Next.jsアプリをVercelにデプロイする
Next.js のデプロイ
Next.js を開発したのが Vercel とのことで、デプロイがめちゃくちゃ簡単にできるとのことで試してみた。
準備
ビルド
ビルドしてちゃんと動くか確認しよう
// ビルド .nextフォルダが作成される
$ npm run build
// 起動
$ npm run start
Github
- リポジトリを作る
- 「…or create a new repository on the command line」の部分をターミナルにコピーして貼り付け
[git push -u origin main] のところで止まるので、エンターを押して実行。push することになる。
そうすると read.me が自動で作成されるが、特にすることはない。
- 全てのファイルをステージングする。(.gitignore ファイル内に記載されているものを除く)
$ git add .
- コメントを書いてコミットする
$ git commit -m "コメント
- push する
$ git push
Vercel
デプロイ
-
vercel にアクセス
https://vercel.com/ -
「Continue with Github」ボタンを押下
- 該当プロジェクトの「Import」ボタンを押下
-
必要とあらば環境変数を設定
※今後追記 -
「Deploy」ボタンを押下
完成！めちゃくちゃ簡単。これでもう公開されている。
DPS
ブランチを切って開発
- クローン
git clone https://github.com/sakuraba-coder/nextjs-blog-1.git
-
[code .] でこの環境で VScode を実行
-
[npm install]
npm modules がインストールされていない状況なので、インストールをしておく -
[npm run dev]でクローン出来ているか確認
-
[git checkout]で現在のブランチを確認
-
[git branch dev] (dev は任意) でブランチを切る
-
[git checkout dev]でブランチを変更。dev のブランチで開発できる
変更
-
ソースコードを変更
-
[git add .]で変更をステージ
-
[git commit -m "コメント"]でコミット
-
[git push origin dev] (dev は今開発しているブランチ名)でプッシュする
マージ
-
github に移動
-
黄色い枠があるので、「Compare & pull request」を押下
※画像 -
コメントを書いて[Create pull request]を押下
-
vercel bot が出現 → プレビューを確認
-
[Merge pull request]を押下
-
コメントを書いて[Confirm merge]を押下
-
pull request の画面が更新されている
vercel
確認してみると、すでに変わっている
まとめ
すごく簡単に Next.js のデプロイができた
AWS でサーバー作ってデプロイしたときもその簡単さに驚愕したけれど、比べ物にならない。
今後の課題としては、firebase や何かを使ってデータベースの情報を読み込めるようにしていきたい
Discussion