Last updated on

Vercelを使ったWebサイト公開方法

大学院の授業で、Vercelを使ってWebサイトを公開する機会がありました。今回はその経験をもとに、Vercelを使ってWebサイトを簡単に公開する方法をわかりやすく解説します。

Vercelとは

Vercelは、Next.jsやReactといったフロントエンドフレームワークを使用してWebサイトを公開するためのホスティングプラットフォームです。特に、以下の特徴が魅力的です：

  • 簡単デプロイ：GitHubやGitLabなどのリポジトリにコードをプッシュするだけで、自動的にビルド・デプロイが行われます。
  • 無料プラン対応：個人プロジェクトや学習目的にも利用しやすい。
  • 高速パフォーマンス：CDN（コンテンツ配信ネットワーク）を活用し、世界中で高速なページ読み込みを実現します。

Vercelのアカウント作成方法

まず最初に、Vercel公式サイトでアカウントを作成しましょう。以下の手順に従えば簡単です：

  1. 公式サイトにアクセスし、Sign Upボタンをクリック。
  2. GitHub、GitLab、またはBitbucketのアカウントでログイン。
    • 学生の方は、GitHubのアカウントを利用すると、スムーズに連携が行えます。
  3. 必要情報を入力して登録完了。

これで準備は整いました！

ブログサイトの作成

次に、実際にブログを作成してみましょう。ここでは簡単な例として、Next.jsを使ったブログを作成する手順を説明します。

1. プロジェクトの作成

ローカル環境で以下のコマンドを実行して、Next.jsアプリを作成します：

npx create-next-app@latest my-blog
cd my-blog
npm run dev

ブラウザでhttp://localhost:3000にアクセスすると、初期画面が表示されます。

2. GitHubリポジトリにプッシュ

作成したプロジェクトをGitHubにアップロードします：

git init
git add .
git commit -m "Initial commit"
git branch -M main
git remote add origin https://github.com/your-username/my-blog.git
git push -u origin main

3. Vercelでデプロイ

Vercelのダッシュボードにログイン。

“New Project”ボタンをクリック。

GitHubリポジトリを選択し、設定を確認後“Deploy”をクリック。

デプロイが完了すると、公開されたURLが表示されます。