🐡

AppServicesにコンテナをデプロイする

2025/03/20に公開

Next.js

appservice

tech

認証機能を作ったのでクラウドに反映します。

今回のやりたい事

・Next.jsの実行環境をDockerに移行する
・DockerをビルドしてAzureのレジストリにpushする
・AppServicesで公開する

Nodeのような環境であればPaaSに乗せられますが、ディレクトリの制限とか環境部分に依存するため、リソース効率は悪いですがコンテナを使います。

Next.jsのコンテナ化

公式に手順とDockerfileがあるので、それを流用します。

ビルドする

AppServicesのBasicプランにビルドするため、それを見越した構成でビルドします

docker build --tag <tag名> . --platform linux/amd64

手順は公式の以下を参考にしました。ところどころAzureのUIが変わっているので注意します。

Azureのレジストリにプッシュする

docker tag <tag名> <レジストリ名>.azurecr.io/<image名>:latest
docker push <レジストリ名>.azurecr.io/<image名>:latest

上記のpushが終われば、AppServicesで対象のレジストリを元にデプロイする設定を入れます。

デプロイする

デプロイが終わったので動かしてみたところDBに接続できない。内容をみるとPrismaでビルド環境差異のエラーが出ていました。これは指摘の通りですね。めちゃめちゃ親切なログが出ていて助かります。ログに記載の通り binaryTargets を追加して npm exec prisma generate しました。

2025-03-20T12:15:17.5145210Z [Error [PrismaClientInitializationError]: Prisma Client could not locate the Query Engine for runtime "linux-musl-openssl-3.0.x".
2025-03-20T12:15:17.5145440Z This happened because Prisma Client was generated for "darwin", but the actual deployment required "linux-musl-openssl-3.0.x".
2025-03-20T12:15:17.5145459Z Add "linux-musl-openssl-3.0.x" to `binaryTargets` in the "schema.prisma" file and run `prisma generate` after saving it:
2025-03-20T12:15:17.5145487Z generator client {
2025-03-20T12:15:17.5145503Z   provider      = "prisma-client-js"
2025-03-20T12:15:17.5145520Z   binaryTargets = ["native", "linux-musl-arm64-openssl-3.0.x", "linux-musl-openssl-3.0.x"]
2025-03-20T12:15:17.5145534Z }

Googleのソーシャルログインを試したところ、リダイレクト先が合致せずエラーとなりました。今回Dockerで動かす際にサービスのURLを定義していて、ローカル環境のままだったので、AppServicesで割り振られるURLに更新しました。

ENV NEXTAUTH_URL=http://<AppServicesのURL>.japaneast-01.azurewebsites.net/

Docker化とAppServicesにデプロイができたので、次回はgithubにpushしてマージしたら反映されるCI/CDを整備していきます。

今回のやりたい事

Next.jsのコンテナ化

ビルドする

デプロイする

Discussion