Next.jsベースのWebアプリケーションをGoogle Cloud Runでデプロイしてみる

1. 全体構成図

Cloud RunはGoogle Cloudによる、完全に管理されたコンピューティング・プラットフォームです。このプラットフォームはスケーラブルなインフラを利用しており、ユーザーはプログラミング言語で開発されたコンテナイメージをCloud Runにデプロイすることができます。Cloud Buildは、Code Repositoryやクラウドストレージからソースコードを取り込むことができます。このツールはビルドタスクのパイプラインを基にして、迅速なビルドやデプロイの自動化、CI/CD（継続的インテグレーション／継続的デリバリー）を実現します。 また、Cloud BuildはGoogle Kubernetes Engine、Cloud Run、App Engine、Cloud Functions、Firebaseなど、Google Cloud上の多くの他の製品とも連携しています。

＜参考＞ Cloud Run　Cloud Build

今回は、Next.jsをベースに開発したWebアプリケーションのソースコードをGitHubで管理します。Cloud Buildで build タスクを実行し、コンテナイメージを取得しながら、最終的にはCloud Runで展開します。

2. Next.jsベースのウェブアプリケーションの構築

Next.jsには、さまざまなシナリオに対応したプロジェクトテンプレートが用意されています。今回はコンテナイメージを使った開発およびbuild を行うため、Next.jsが提供する`with docker`プロジェクトテンプレートを使います。

＜参考＞ Next.js Docker

npxコマンドを実行し、ローカル環境でプロジェクトを初期化します。npxは node package executerの略でパッケージの実行ツールです。Node.js をインストールするとすぐに利用できる依存性+パッケージのマネージャーのnpmとの違いは、インストールされてないパッケージでも自動的に探してインストールして実行してインストールしたパッケージの削除をします。今回、Next.jsが提供する`with docker`プロジェクトテンプレートとしてパッケージ一式をローカル環境にインストールしたあと初期化する必要があります。

実行が成功したら、npmコマンドを使ってローカルでWebアプリケーションを起動します。

ブラウザで`http://localhost:3000`にアクセスし、Webアプリケーションを表示します。

Cloud Buildがプロジェクトのソースコードをインポートするために、対応するCode RepositoryをGitHubに作成します。Cloud Runは、認証後にアカウントで指定されたCode Repositoryにアクセスできるため、プライベートなCode Repositoryを作成することができます。

作成に成功したら、ページ上のコマンドに従って、ローカル環境にCode Repositoryを関連付け、コードをアップロードします。

アップロードに成功すると、対応するプロジェクトコードをGitHubで見ることができます。

3. Cloud Runを使用したNextjsアプリケーションのデプロイ

WebアプリケーションのプロジェクトコードとGitHubCode Repositoryの準備ができたら、デプロイのためにCloud Run製品でサービスを作成することができます。

Cloud Runコンソールの`Create Service`ボタンをクリックしてサービスを作成します。

ユーザーがすでにコンテナイメージを手動で build し、それを `Artifact Registry` サービスにアップロードしている場合は、デプロイ時に `Deploy one revision from an existing container image` メソッドを選択できます。この展開方法では、イメージのバージョンを手動で指定する必要があることに注意してください。

デプロイには`Continuously deploy new revisions from a source repository`方法を選択します。このアプローチでは、Cloud BuildサービスとCode Repositoryを関連付ける必要があります。そのメリットは、Cloud Buildを使って自動デプロイメントやCI/CDを完了できることです。

`SET UP WITH CLOUD BUILD`ボタンをクリックしてCloud Buildを設定します。Code Repositoryサービスとして `GitHub` を選択します。GitHub アカウントが関連付けられていない場合は、`Authenticate` ボタンをクリックして関連付けを承認する必要があります。

ポップアップウィンドウの`CONTINUE`ボタンをクリックします。その後、Code Repositoryを作成した GitHub アカウントにログインし、`Authorize Google Cloud Build` ボタンをクリックして Cloud Build サービスの認証を完了します。

認証成功のメッセージが表示された後、ページは自動的にCloud Runサービス設定ページにジャンプします。

`INSTALL GOOGLE CLOUD BUILD`ボタンをクリックすると、すべてのCode Repositoryまたは指定したCode RepositoryにCloud Buildサービスがインストールされます。インストールに成功すると、 build タスクを完了するために、Cloud Buildサービスに対応するCode Repositoryへの関連パーミッションが付与されます。

インストール成功のメッセージが表示された後、ページは再びCloud Runサービスの設定ページにジャンプします。

`Repository` ドロップダウンボックスで、関連するCode Repositoryを選択します。サービス契約にチェックを入れ、`NEXT`ボタンをクリックして次の設定ステップに進みます。

 build タスクの設定で、リッスンする必要のあるBranchとデプロイ方法を選択します。デプロイメントにDockerfileを使用することを選択します。`SAVE`ボタンをクリックしてCloud Buildの設定情報を保存します。

`Service name`を入力し、デプロイする`Region`を選択します。デモとして、コンピュートリソースを割り当てる方法として、`CPU is only allocated during request processing`を選択します。

詳細コンフィギュレーションには、コンテナのネットワークコンフィギュレーション情報とネットワークポート情報の変更が必要です。

• ネットワーク設定で`Allow unauthenticated invocations`オプショ ンを選択する必要があります。これにより、ユーザーは配置されたウェブサイトのページに自由にアクセスできます。
• Dockerfileによると、コンテナのネットワークポートをデフォルトの8080から3000に変更する必要があります。

`CREATE`ボタンをクリックしてCloud Runサービスを作成します。作成中のタスクの詳細が表示されます。`Building and deploying from repository` ステップで、`logs` リンクをクリックして Cloud Build  build タスクの詳細を表示します。

 build が成功すると、Cloud Runサービスページで提供されるURL情報でウェブアプリケーションにアクセスすることができます。アクセスページは、ローカルに構築されたページと一致しています。

4. Cloud BuildによるCI/CDの実装

以上の手順でCloud RunへのNext.jsプロジェクトのデプロイが完了したら、GitHubのCode RepositoryをベースにしたCloud Buildの設定も完了です。Code Repositoryのmaster branchが変更されると、Cloud Buildサービスがトリガーされ、 build とデプロイが自動化されます。

どう自動化されるか挙動を確認してみましょう。ローカルのコードから `pages/index.js` ファイルを探し、以下のコードを追加します。このコードは、Webアプリケーションのインデックスページにテキストの段落を追加するものです。

コードが更新されたら、Gitコマンドを使って変更したコードファイルをCode Repositoryのmaster branchにアップロードします。

Cloud Runコンソールをチェックして、新しい build とリリースタスクがトリガーされたことを確認します。

 build が完了すると、Cloud Runコンソールが build タスクの詳細を更新します。ブラウザで以前のURLにアクセスし、更新されたインデックスページを確認します。追加されたテキストはページに正しく反映されます。

5. 補足事項

5-1. Google Cloud BuildのGitHub認証の表示と解除方法

Google Cloud Buildサービスを使用して自動デプロイを完了するには、GitHubアカウントでGoogle Cloud Buildアプリの認証とインストールを完了する必要があります。対応する GitHub アカウントの設定ページで、対応する認証の確認と取り消しができます。

認証がキャンセルされた後、Google Cloud Buildサービスを再度利用する必要がある場合は、前述の手順で再認証を行い、対応するアプリをインストールする必要があります。

＜参考＞ 公認GitHubアプリ  インストールされているGitHubアプリ

5-2. Next.jsとNode.jsのバージョン管理の問題

Node.js v16は2023年9月以降にサポートが終了するため、Next.jsもv14.0.0リリース以降はNode.js v16をサポートしません。

＜参考＞ Next.js v14.0.0

ローカルでNext.jsアプリを build する場合、v14.0.0以降を使用する必要がある場合は、ローカルのNode.jsのバージョンがv18.0.0以上であることを確認する必要があります。

この記事でローカルで使用しているNode.jsのバージョンはv18.18.0、Next.jsのバージョンは最新版（latest v14.0.4）、Dockerfileで使用しているNode.jsのベースイメージは18-alpineです。

6. さいごに

今回、Google Cloud RunとGithubを使用してWebアプリケーションを迅速にデプロイし、CI/CD パイプラインを構築することを紹介しました。Google Cloud Run はコンテナベースのサービスであり、マイクロサービスアーキテクチャの採用に適しているので、各マイクロサービスを個別のコンテナとしてデプロイし、独立してスケールすることができます。そのため、マイクロサービスアーキテクチャを活かした複雑かつスケーラビリティを求めるシステムでは、こういったアプローチが参考になると思いますので、気になる方はお試しいただければと思います。

関連サービス