GitHubからVercelへのデプロイ手順を詳しく解説

こんにちは、エンジニアのうさぎです！🐰

今回は、GitHubにアップロードしたプロジェクトをVercelでデプロイする方法について、初心者の方にも分かりやすく解説していきます。

🔍 前提条件

この記事を進めるにあたって、以下が必要です：

• GitHubアカウント
• Node.jsがインストールされていること
• デプロイしたいプロジェクト（説明はNext.jsを使用）

📚 目次

1. プロジェクトの準備
2. GitHubへのアップロード
3. Vercelでのデプロイ

1. プロジェクトの準備 🛠️

まずは、プロジェクトをデプロイできる状態にするための準備をしていきましょう。

必要なファイルの確認

以下のファイルが揃っているか確認してください：

プロジェクトフォルダ/
  ├── package.json
  ├── pages/
  ├── public/
  └── styles/

Gitの初期設定

ターミナルで以下のコマンドを実行します：

# プロジェクトフォルダに移動
cd your-project-name

# Gitの初期化
git init

# .gitignoreファイルの作成
echo "node_modules/
.next/
.env" > .gitignore

2. GitHubへのアップロード 🚀

次に、プロジェクトをGitHubにアップロードします。

GitHubリポジトリの作成

1. GitHubにログイン
2. 右上の「+」から「New Repository」を選択
3. リポジトリ名を入力（例：my-next-project）
4. 「Create Repository」をクリック

コードのアップロード

以下のコマンドを順番に実行します：

# Gitの設定（初回のみ）
git config --global user.name "あなたの名前"
git config --global user.email "あなたのメールアドレス"

# ファイルのステージングとコミット
git add .
git commit -m "最初のコミット"

# メインブランチの設定とプッシュ
git branch -M main
git remote add origin https://github.com/あなたのユーザー名/リポジトリ名.git
git push -u origin main

3. Vercelでのデプロイ 🌐

最後に、VercelでWebサイトとして公開します。

Vercelの設定

1. Vercelにサインアップ（GitHubアカウントで簡単登録可能）
2. 「New Project」をクリック
3. 先ほどのGitHubリポジトリを選択
4. プロジェクトの設定は自動で行われます
5. 「Deploy」をクリック

✨ 完了！

デプロイが完了すると、「https://あなたのプロジェクト名.vercel.app」のURLが発行されます。このURLで、あなたのプロジェクトが世界中からアクセス可能になりました！

🔍 トラブルシューティング

• よくある問題と解決方法：

  1. Gitのユーザー設定エラー

  *** Please tell me who you are.
  

  → git configコマンドで名前とメールを設定してください。

  2. プッシュエラー

  error: failed to push some refs
  

  → リポジトリのURLが正しいか確認してください。

📝 まとめ

この記事では、GitHubからVercelへのデプロイ手順を解説しました。初めは少し複雑に感じるかもしれませんが、手順通りに進めれば簡単にデプロイできます。

分からないことがあれば、コメント欄で質問してください！