![](https://images.microcms-assets.io/assets/d227d458429d4051a17239ee5909bf41/b135ca4195b2419f8e2d9e35ef71bbe4/file.jpeg?q=80)
ローコードに抵抗感があったが、UIパーツもAPIも開発が不要に。すぐ画面が用意でき、助かっている。
ファンコミュニケーションズは、日本最大級の成功報酬型アドネットワーク企業グループです。アフィリエイトサービス「A8.net(エーハチネット)」やスマートフォン(iOS/Android)アプリ専用アフィリエイトサービス「seedApp(シードアップ)」などを運営
more
2023.08.23に公開 | 2023.08.23に更新
Querier運営
「Querier(クエリア)」は社内向け管理画面を圧倒的な速さで、かつビジネスのスケールに合わせて柔軟に構築することができるローコードツールです。
近年、Dockerを使用してアプリケーションの開発やデプロイを行うことが一般的になり、その中でもNext.jsを利用したWebアプリケーションの構築が増えてきました。
一方、静的ファイルのホスティングには、Google Cloud Storageのようなクラウドストレージサービスが適しています。
この記事では、Docker内で生成されたNext.jsの静的ファイルを効率的にGoogle Cloud Storageにアップロードする方法を詳しく解説します。
今回は、Cloud Run上で動いているNext.jsを想定するので、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"]
今回は、 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
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"]
Querier運営
「Querier(クエリア)」は社内向け管理画面を圧倒的な速さで、かつビジネスのスケールに合わせて柔軟に構築することができるローコードツールです。
ファンコミュニケーションズは、日本最大級の成功報酬型アドネットワーク企業グループです。アフィリエイトサービス「A8.net(エーハチネット)」やスマートフォン(iOS/Android)アプリ専用アフィリエイトサービス「seedApp(シードアップ)」などを運営
more
2012年5月創業のフルカイテン株式会社。 「在庫をフル回転させる」をコンセプトに、機械学習を駆使したSaaS『FULL KAITEN』を提供し、在庫問題の解決に取り組む。
more
みなさんこんにちは。Querier開発チームです。今回はMySQLとクエリアを連携してユーザー情報の一覧とメールアドレス変更ができる管理画面を10分以内で構築してみたいと思います。
more
近年、Dockerを使用してアプリケーションの開発やデプロイを行うことが一般的になり、その中でもNext.jsを利用したWebアプリケーションの構築が増えてきました。
more