📝

Next.jsアプリをVercelにデプロイする

2022/09/30に公開

Next.js のデプロイ

Next.js を開発したのが Vercel とのことで、デプロイがめちゃくちゃ簡単にできるとのことで試してみた。

準備

ビルド

ビルドしてちゃんと動くか確認しよう

 // ビルド .nextフォルダが作成される
 $ npm run build
 // 起動
 $ npm run start

Github

  1. リポジトリを作る

  1. 「…or create a new repository on the command line」の部分をターミナルにコピーして貼り付け

[git push -u origin main] のところで止まるので、エンターを押して実行。push することになる。
そうすると read.me が自動で作成されるが、特にすることはない。

  1. 全てのファイルをステージングする。(.gitignore ファイル内に記載されているものを除く)
 $ git add .
  1. コメントを書いてコミットする
 $ git commit -m "コメント
  1. push する
 $ git push

Vercel

デプロイ

  1. vercel にアクセス
    https://vercel.com/

  2. 「Continue with Github」ボタンを押下

  1. 該当プロジェクトの「Import」ボタンを押下

  1. 必要とあらば環境変数を設定
    ※今後追記

  2. 「Deploy」ボタンを押下

完成!めちゃくちゃ簡単。これでもう公開されている。

DPS

ブランチを切って開発

  1. クローン

git clone https://github.com/sakuraba-coder/nextjs-blog-1.git

  1. [code .] でこの環境で VScode を実行

  2. [npm install]
    npm modules がインストールされていない状況なので、インストールをしておく

  3. [npm run dev]でクローン出来ているか確認

  4. [git checkout]で現在のブランチを確認

  5. [git branch dev] (dev は任意) でブランチを切る

  6. [git checkout dev]でブランチを変更。dev のブランチで開発できる

変更

  1. ソースコードを変更

  2. [git add .]で変更をステージ

  3. [git commit -m "コメント"]でコミット

  4. [git push origin dev] (dev は今開発しているブランチ名)でプッシュする

マージ

  1. github に移動

  2. 黄色い枠があるので、「Compare & pull request」を押下
    ※画像

  3. コメントを書いて[Create pull request]を押下

  4. vercel bot が出現 → プレビューを確認

  5. [Merge pull request]を押下

  6. コメントを書いて[Confirm merge]を押下

  7. pull request の画面が更新されている

vercel

確認してみると、すでに変わっている

まとめ

すごく簡単に Next.js のデプロイができた
AWS でサーバー作ってデプロイしたときもその簡単さに驚愕したけれど、比べ物にならない。

今後の課題としては、firebase や何かを使ってデータベースの情報を読み込めるようにしていきたい

GitHubで編集を提案

Discussion