4. GitHubからVercelにDeployする
Vercel へのアップロード(デプロイ)手順
- ブラウザで Vercel にアクセスし、「Sign Up」(または 「Log In」)をクリックします。
- サインイン方法の選択画面で 「Continue with GitHub」 を選び、先ほど Push した GitHub アカウントでログインします。
- Vercel のダッシュボードが開いたら、画面右上(または中央)にある 「Add New…」 ➔ 「Project」 をクリックします。
- 「Import Git Repository」 の一覧に、先ほど GitHub に作成した
my-hydroponics-site(リポジトリ名)が表示されているはずです。その横にある 「Import」 ボタンをクリックします。 (※一覧に出てこない場合は、上の「Adjust GitHub App Permissions」から Vercel にリポジトリへのアクセス許可を出してください) - 「Configure Project」(プロジェクト設定画面)が表示されます。
- Next.js の設定(App Router や
src/ディレクトリ構造など)は Vercel が自動的に認識してくれるため、何も設定を変更する必要はありません。
- Next.js の設定(App Router や
- 一番下にある 「Deploy」 ボタンをクリックします。
デプロイ完了の確認
- ボタンを押すとビルド(構築作業)が始まり、約 30 秒〜1 分ほどで画面に紙吹雪が舞う 「Congratulations!」 の画面に切り替わります。
- 画面に表示されているプレビュー画像や、
[https://my-hydroponics-site.vercel.app](https://my-hydroponics-site.vercel.app)のような Domains(URL) をクリックしてみてください。世界中どこからでもアクセスできるあなたの水耕栽培サイトが表示されます!
今後のサイト更新方法(補足)
今後、Mac 上でコードを書き換えたり新しい MDX 記事を追加した場合は、ターミナルで以下の 3 行を実行するだけで、Vercel が自動で変更を検知してサイトを最新状態に更新してくれます。
git add .
git commit -m “記事を追加”
git push