ここまで簡単になったNext.js on Cloud Run
Next.jsといえば、Vercelで簡便なデプロイができることで有名ですが、GCPのCloud Runでもそれに負けないくらい簡単にデプロイできるようになってきました。
本記事では、GitHubでソース管理されたNext.jsアプリケーションをCloud Runにデプロイし、mainブランチへのpushをトリガーとしたデプロイの自動化を設定する方法を紹介します。
1. Next.jsアプリケーションの作成
Cloud Runでデプロイするためには、Next.jsをDockerに対応させる必要があります。Next.js公式がwith-dockerというexampleを公開しているので、今回はこれを利用しましょう。
以下のコマンドは、nextjs-cloudrunという名前のNext.jsアプリケーションを新規作成します。
yarn create next-app --example with-docker nextjs-cloudrun
cd nextjs-cloudrun
次に、.gitignoreファイルの一部を以下のように削除します。ビルド時にlockファイルが必要となるため、ignoreリストから外しています。
@@ -36,3 +36,1 @@
# lock files
- yarn.lock
- package-lock.json
2. GitHubリポジトリの作成
GitHubでnextjs-cloudrunという名前のリポジトリを作成し、以下のコマンドを入力してください。USER_NAMEの部分はGitHubユーザー名を代入してください。
git remote add origin https://github.com/USER_NAME/nextjs-cloudrun.git
git branch -M main
git push -u origin main
SSHで接続する場合は、代わりに以下のコマンドを入力してください。
git remote add origin git@github.com:USER_NAME/nextjs-cloudrun.git
git branch -M main
git push -u origin main
次に、.gitignoreファイルの変更をリモートリポジトリに反映させます。以下のコマンドを実行してください。
git add .
git commit -m "modify .gitignore"
git push
これで、ソースコードの準備が整いました。
3. Cloud Runでデプロイ&自動化設定
GCPのコンソールを用いて、先ほどのNext.jsアプリケーションをCloud Runへデプロイします。なお、この章の内容は以下のドキュメントを参考しています。
以下の手順に従ってデプロイを行ってください。
- Cloud Runコンソールにアクセスします。
- [サービスの作成]を選択します。
- [ソースリポジトリから新しいリビジョンを継続的にデプロイする]を選択します。
- [SET UP WITH CLOUD BUILD]をクリックします。
- プロバイダとリポジトリを選択します。GitHubを認証していない場合は、[認証]をクリックして画面に従います。
- 同意事項を確認し、チェックを入れます。
- [次へ]をクリックします。
- ブランチに
^main$と入力します。 - ビルドタイプの[Dockerfile]を選択します。
- ソースの場所に
/Dockerfileと入力します。 - [保存]をクリックします。
- サービス名に
nextjs-cloudrunと入力します。 - リージョンを選択します。どこでも構いません。
- 認証の[未認証の呼び出しを許可]を選択します。
- コンテナ、変数とシークレット、接続、セキュリティの詳細を開きます。
- コンテナのタブを選択し、コンテナポートを
3000に設定します。
- [作成]をクリックします。
後はCloud Runが自動でビルドとデプロイを行います。デプロイが成功したら、以下のような画面が出てきます。
この画面に記載されたURL(上図における"https://nextjs-cloudrun-bypy7r64cq-an.a.run.app"の部分)にアクセスし、以下のような画面が出てきたらデプロイ成功です！
4. 自動デプロイの確認
ここまでの設定ができたなら、GitHubへのをpushをトリガーとした自動デプロイが可能となっているはずです。実際にソースコードを改変し、pushして、デプロイが自動で行われるか確認してみましょう。
pages/index.jsの一部を以下のように変更します。
@@ -13,3 +13,3 @@
<h1 className={styles.title}>
- Welcome to <a href="https://nextjs.org">Next.js</a> on Docker!
+ Hello, <a href="https://nextjs.org">Next.js</a> on Cloud Run!
</h1>
この変更をリモートリポジトリにpushします。以下のコマンドを実行してください。
git add .
git commit -m "change index.js"
git push
Cloud Runコンソールにアクセスすると、変更内容のリストに新しい行が追加されたのを確認できます。なお、このデプロイには数分ほど時間がかかる場合があります。
画面記載のURLにアクセスすると、以下のような画面が出てくるはずです。文章が前と変わっていることを確認してください。
まとめ
GitHubでソース管理されたNext.jsアプリケーションをCloud Runでデプロイし、合わせてGitHub上での変更をトリガーとしたデプロイの自動化を適用する方法について紹介しました。Cloud BuildやIAMに関する細かい設定をGCPが自動でやってくれるので、とても簡単にできるようになっています。
Cloud RunでデプロイするとISRなどの一部機能が使えなくなるデメリットもありますが、料金面やサーバーのカスタマイズ性など、メリットがとても大きいです。Next.jsアプリをデプロイする際は、ぜひ検討してみてください。
Discussion