ここまで簡単になったNext.js on Cloud Run

以下の手順に従ってデプロイを行ってください。

1. Cloud Runコンソールにアクセスします。
2. [サービスの作成]を選択します。
3. [ソースリポジトリから新しいリビジョンを継続的にデプロイする]を選択します。
4. [SET UP WITH CLOUD BUILD]をクリックします。
5. プロバイダとリポジトリを選択します。GitHubを認証していない場合は、[認証]をクリックして画面に従います。
6. 同意事項を確認し、チェックを入れます。
7. [次へ]をクリックします。
   
8. ブランチに^main$と入力します。
9. ビルドタイプの[Dockerfile]を選択します。
10. ソースの場所に/Dockerfileと入力します。
11. [保存]をクリックします。
    
12. サービス名にnextjs-cloudrunと入力します。
13. リージョンを選択します。どこでも構いません。
    
14. 認証の[未認証の呼び出しを許可]を選択します。
15. コンテナ、変数とシークレット、接続、セキュリティの詳細を開きます。
16. コンテナのタブを選択し、コンテナポートを3000に設定します。
    
17. [作成]をクリックします。

後は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アプリをデプロイする際は、ぜひ検討してみてください。