Next.js(SSR)をCloud Runにデプロイしてみた

こんにちはかみむらです。Cloud Runの記事も3回目となりました。

過去の記事はこちらです。
code-log.hatenablog.com

code-log.hatenablog.com

そして今回はフロントエンド(Next.js) とCloud Runについての話題です。

Cloud Runでフロントエンドを運用するケースとして、サーバーサイドレンダリング(SSR)が必要なアプリケーションあります。SSRはサーバーを必要とするため、フロントエンドとサーバー管理で二重のコストがかかってしまいます。

そこでコンテナをサーバレスで扱えるCloud Runを使うことで、サーバーの運用コストを少なくすることができます。これはフロントエンジニアにとって、負担がかなり少なくなります。

今回はNext.js(SSR)をCloud Runにデプロイしてみます。

使うソースコードはこちらです。
github.com

前提

Cloud SDKがインストールされている
もしMacを使ってる場合は、こちらの記事も参照してください。
code-log.hatenablog.com

APIの有効化

GCPダッシュボードからAPIとサービス > ライブラリから検索できます。下の3つのAPIを有効化します。

Cloud Run API
Container Registry API
Resource Manager API

セットアップ

まずは今回のプロジェクトをGitHubからクローンしてください。

$ git clone https://github.com/hiro08gh/next-cloudrun

そしてプロジェクトのフォルダに移動した後、インストールします。

$ yarn install

yarn devのコマンドを打ってみてください。するとアプリケーションを立ち上げることができます。

$ yarn dev

localhost:3000にアクセスしてください。内容は3ページの簡単なアプリケーションです。ここでは、serverフォルダのindex.tsをエントリーポイントにしています。Next.jsではgetRequestHandler()を使うことで、簡単にSSRすることができます。
f:id:kamimura-dev:20191226091809p:plain

Dockerで動かしてみる

試しにDockerでアプリケーションを起動してみましょう。まずはコンテナイメージをビルドします。

$ docker build . -t next-cloudrun:latest

そして、コンテナイメージが作成できているか確認してください。

$ docker images

f:id:kamimura-dev:20191226090446p:plain

上記で確認したコンテナIDを指定して、コンテナを立ち上げます。

$ docker run -p 3000:3000 next-cloudrun

f:id:kamimura-dev:20191226091753p:plain

Cloud Run へデプロイ

コンテナにタグをつけます。[PROJECT-ID]には自分が使っているGCPプロジェクトIDをいれます。

$ docker tag next-cloudrun gcr.io/[PROJECT-ID]/next-cloudrun:latest

f:id:kamimura-dev:20191226092323p:plain
そして、Container Registryにイメージを登録します。

$ docker push gcr.io/[PROJECT-ID]/next-cloudrun:latest

下記のコマンドで、Cloud Runにデプロイしていきます。サービス名はデフォルトで大丈夫です。

$ gcloud beta run deploy --image gcr.io/[PROJECT-ID]/next-cloudrun --platform managed --region us-central1 --allow-unauthenticated

GCPダッシュボードからCloud Runのページを見てください。デプロイができています。

f:id:kamimura-dev:20191226205736p:plain

OGPの確認

すでにOGPの設定がしてあるので、TwitterCard Validatorで確認してみましょう。Cloud Runで発行されたURLをいれて確認してください。無事にOGP対応できています。
cards-dev.twitter.com

f:id:kamimura-dev:20191226221944p:plain

最後に

今回は簡単ではありましたが、Next.js(SSR)をCloud Runにデプロイしてみました。Cloud Runはデプロイが容易なので、今後フロントエンドでも採用するケースが増えてくると思います。