本日はNext.jsのプロジェクトをデプロイする流れまで解説していきます。
これらは多くの選択肢があります
例えば有名なら『Cloudflare Pages』・『Netlify 』などです
当ブログでは『Vercel』×『Git Hub』を使用してサイトを公開します。
ビルドやサイトの公開は『Vercel』を活用します。
難しい複雑な操作などはありません。
事前準備
・Next.jsプロジェクト
・Git Hubアカウント
※当ブログではVS Code上のターミナルで操作していきます。
・OS
Macでも構いませんが当ブログではWindowsとなりますのでご了承下さい。
以前に当ブログのNext.js入門で静的・動的ルーティングのプロジェクト作成の記事を紹介致しました。
そちらのプロジェクトをデプロイしていくのですが
本日のデプロイでは静的ルーティングのみ、つまりAPIルートはまた別で記事として紹介致します。
記事はこちらになります。
※新しく既存のプロジェクトを用意してくださっても問題はありません。
Vercelとは
『Next.js』でSSR対応されたアプリを動かせる事が可能となるサーバーレスプラットフォームです。
『Next.js』で作成したプロジェクトを容易にデプロイができるサービスとなっており
競合相手である『Netlify』同様に、『Vercel』は独自のエッジネットワーク(CDNの一種)を構築しており ビルドとホスティングなどをまとめて変わりにやってくれます。
個人開発などの目的の方々であれば、クレジットなどの登録は必要なく無料で利用が可能となっております。
『Vercel』は現在、非常に人気なプラットフォームとなっており『Netlify』から移行する方々も多くいらっしゃいます。
是非、当ブログの記事でデプロイまでの流れを覚えて帰って下さい。
『Vercel』についての詳しい解説はまた記事に致します。
Git Hubと連携
『Vercel』でサイトを公開するには『GitHub』アカウントが必要となります。
『GitHub』以外での連携は可能ですが、『GitHub』が一般的なのでこちらを使用していきます。
まずは貴方の『GitHub』アカウントにサインイン後に新しく『リポジトリ』を１つ作成して下さい。
リポジトリ名はお好きな任意で構いません。
私は『test-next』などとしておきます
公開状態はテスト用で公開するので、『private』を推奨しますがどちらでも問題ありません。
作成したら、URLのコピーをしておきましょう
https://github.com/ユーザー名/test-next.git
VS Codeのターミナルに移動します
ローカルリポジトリと『GitHub』のリモートリポジトリを紐付け作業します。
git remote add origin https://github.com/ユーザー名/test-next.git
ここで一応、リモートリポジトリに紐付けされてるか確認しときましょう。
git remote -v
origin https://github.com/ユーザー名/test-next.git (fetch) origin https://github.com/ユーザー名/test-next.git (push)
こちらの結果が返ってくれば成功しています。
リモートリポジトリにプッシュします
git branch -M main git push -u origin main
プッシュを行った結果が『GitHub』に反映されたかの確認をして下さい。
ローカルリポジトリでコミットした内容の確認ができましたら連携は完了となります。
今後に変更などの際はVSコード上でステージング・コミットをし、リモートリポジトリの変更内容をリポジトリに対してまたプッシュします。
Vercel アカウントの作成
下記サイトにアクセスして下さい。
Develop. Preview. Ship. For the best frontend teams – Vercel
選択肢があるかと思いますが、今回は『Continue with GitHub 』を選択します。
『Authorize Vercer』で先に進みますと自動でページが遷移され下記の画像のように『lmport Git Repository』があるかとおもいます。
『Add GitHub Org or Account』を選択し『Install Vercel』が表示されます。
『All』もしくは『Only』の選択肢がありますがどちらでも構いません、そのまま『Install』を押します。
『GitHub』のアクセスパスワードを入力します。
下記画像の『import』をクリックして下さい。
『Configure Project』は基本的にはデフォルトで設定がされています
そのまま『Deploy』をクリックします。
貴方のNext.jsプロジェクトのビルドが始まります 多少時間かかるので待ちましょう。
貴方のアプリケーションはこれでデプロイ完了となります。
デプロイするとAPIルートもデプロイされますが今回ではDEMOを用意しておりません。
是非ご自身でお試し下さい。
『Visit』ボタンをクリックするとデプロイ済みのアプリケーションを確認する事ができます。
まとめと機能
『Vercel 』ではカスタムドメインの使用も可能となります。
そちらは公式ドキュメントを参照下さい。
本日の記事のように『Vercel』はサーバーサイドの知識に精通していなくても誰でも簡単にデプロイができます。 無料の範囲内でも外部APIと連携する事も色々と可能となっておりVercelで環境変数を設定することもできます。
静的生成とアセット(JS、CSS、画像、フォントなど)を使用するページは、非常に高速な『Vercel 』『EdgeNetwork』から自動的に提供されます。
SSR(サーバーサイドレンダリング)とAPIルートを使用するページは、自動的に分離されたサーバーレス機能となり
これによりページのレンダリングとAPIリクエストを無限にスケーリングが容易となります。
デプロイ後は新しくブランチを作成し、いくつかの変更をし『GitHub』にプッシュをお勧めします。
そして新しいプルリクエストを作成して下さい プルリクエストを開くと『Vercel』は『GitHub』と連携するとプッシュする度にアプリケーションが自動的にデプロイされます。
本番環境以外ではGoogleの検索エンジンに登録されないように『noindex』にしてくれてます。
HTTPSはデフォルトで有効になっており(カスタムドメインを含む)追加の構成は必要ありません、SSL証明書を自動更新致します。
本日は以上となります。
最後まで読んで頂きありがとうございます。
貴方のアプリケーションをスムーズに公開する方法に役に立ってくれていたら幸いでございます。