Dockerfileで生成されたNext.jsの静的ファイルをGoogle Cloud Storageにアップロードする

近年、Dockerを使用してアプリケーションの開発やデプロイを行うことが一般的になり、その中でもNext.jsを利用したWebアプリケーションの構築が増えてきました。

一方、静的ファイルのホスティングには、Google Cloud Storageのようなクラウドストレージサービスが適しています。

この記事では、Docker内で生成されたNext.jsの静的ファイルを効率的にGoogle Cloud Storageにアップロードする方法を詳しく解説します。

前提

• Cloud Run上でNext.jsが動いている
• Cloud Buildを使ってCloud Runにデプロイしている

今回は、Cloud Run上で動いているNext.jsを想定するので、Dockerfile内にビルドされた静的ファイルををアップロードするステップを加える方針で解説していきます。

Dockerfileを準備する

まずは、Next.jsのアプリケーションをビルドする最低限のDockerfileを作成していきます。

FROM node:18-alpine as deps
WORKDIR /opt/app
COPY package.json yarn.lock ./
RUN yarn install --frozen-lockfile

FROM node:18-alpine as builder
WORKDIR /opt/app
COPY . .
COPY --from=deps /opt/app/node_modules ./node_modules
RUN yarn build

FROM node:18-alpine as runner
WORKDIR /opt/app
COPY --from=builder /opt/app/next.config.js ./
COPY --from=builder /opt/app/public ./public
COPY --from=builder /opt/app/.next ./.next
COPY --from=builder /opt/app/node_modules ./node_modules
CMD ["node_modules/.bin/next", "start", "-p", "8080"]

GCSへ静的ファイルをアップロードする

今回は、 builder と runner の間に、アップロードする以下のステップを追加します。
環境変数として利用しているものはすべて、Cloud Buildの設定ファイル内から、--build-arg を通して利用しています。

gcloud コマンドの設定周りを保持している CLOUDSDK_CONFIG ですが、Docker内で利用すると、デフォルトでは /root/.config/gcloud に設定されているため、 gcloud config set project などを設定しても反映されません。
CLOUDSDK_CONFIG を /.config/gcloud に設定し直すことで、しっかり設定が反映されるようになりますので、注意してください。

FROM gcr.io/google.com/cloudsdktool/google-cloud-cli:alpine
WORKDIR /opt/app
ARG _STATIC_GCS_BUCKET_NAME
ARG _PROJECT_ID
ARG _ACCOUNT_ID
ARG _SERVICE_ACCOUNT_KEY_FILE
ARG _CORS_CONFIG_FILE
ARG _COMMIT_SHA
ENV STATIC_GCS_BUCKET_NAME ${_STATIC_GCS_BUCKET_NAME}
ENV PROJECT_ID ${_PROJECT_ID}
ENV ACCOUNT_ID ${_ACCOUNT_ID}
ENV SERVICE_ACCOUNT_KEY_FILE ${_SERVICE_ACCOUNT_KEY_FILE}
ENV CORS_CONFIG_FILE ${_CORS_CONFIG_FILE}
ENV COMMIT_SHA ${_COMMIT_SHA}
ENV CLOUDSDK_CONFIG /.config/gcloud
COPY $SERVICE_ACCOUNT_KEY_FILE ./service-account.json
COPY $CORS_CONFIG_FILE ./cors.json
COPY --from=builder /opt/app/.next ./.next
RUN gcloud auth activate-service-account $ACCOUNT_ID --key-file=./service-account.json
RUN gcloud config set project $PROJECT_ID
RUN gcloud config set account $ACCOUNT_ID
RUN gcloud storage cp -r ./.next/static gs://$STATIC_GCS_BUCKET_NAME/$COMMIT_SHA/_next/
RUN gcloud storage buckets update gs://$STATIC_GCS_BUCKET_NAME --cors-file=./cors.json

最終的なDockerfile

FROM node:18-alpine as deps
WORKDIR /opt/app
COPY package.json yarn.lock ./
RUN yarn install --frozen-lockfile

FROM node:18-alpine as builder
WORKDIR /opt/app
COPY . .
COPY --from=deps /opt/app/node_modules ./node_modules
RUN yarn build

FROM gcr.io/google.com/cloudsdktool/google-cloud-cli:alpine
WORKDIR /opt/app
ARG _STATIC_GCS_BUCKET_NAME
ARG _PROJECT_ID
ARG _ACCOUNT_ID
ARG _SERVICE_ACCOUNT_KEY_FILE
ARG _CORS_CONFIG_FILE
ARG _COMMIT_SHA
ENV STATIC_GCS_BUCKET_NAME ${_STATIC_GCS_BUCKET_NAME}
ENV PROJECT_ID ${_PROJECT_ID}
ENV ACCOUNT_ID ${_ACCOUNT_ID}
ENV SERVICE_ACCOUNT_KEY_FILE ${_SERVICE_ACCOUNT_KEY_FILE}
ENV CORS_CONFIG_FILE ${_CORS_CONFIG_FILE}
ENV COMMIT_SHA ${_COMMIT_SHA}
ENV CLOUDSDK_CONFIG /.config/gcloud
COPY $SERVICE_ACCOUNT_KEY_FILE ./service-account.json
COPY $CORS_CONFIG_FILE ./cors.json
COPY --from=builder /opt/app/.next ./.next
RUN gcloud auth activate-service-account $ACCOUNT_ID --key-file=./service-account.json
RUN gcloud config set project $PROJECT_ID
RUN gcloud config set account $ACCOUNT_ID
RUN gcloud storage cp -r ./.next/static gs://$STATIC_GCS_BUCKET_NAME/$COMMIT_SHA/_next/
RUN gcloud storage buckets update gs://$STATIC_GCS_BUCKET_NAME --cors-file=./cors.json

FROM node:18-alpine as runner
WORKDIR /opt/app
COPY --from=builder /opt/app/next.config.js ./
COPY --from=builder /opt/app/public ./public
COPY --from=builder /opt/app/.next ./.next
COPY --from=builder /opt/app/node_modules ./node_modules
CMD ["node_modules/.bin/next", "start", "-p", "8080"]