🎃

GCPのCloudRunでVueアプリを公開するまで

2022/05/08に公開約3,300字
  • 2022/5/16 追記

環境

  • windows 11(ほぼ関係無い)
  • docker
  • google cloud sdk (python必須)

Vue サイトの作成

取り敢えず適当な最小構成で作成します。ファイルは使用するフォルダのルートに保存します。

Dockerfile
FROM node:16.15.0-buster-slim

WORKDIR /app

RUN apt-get update && \
    npm install -g npm @vue/cli
docker-compose.yml
version: "3.7"

services:
  web:
    container_name: "vue-test"
    build:
      context: "./"
      dockerfile: "Dockerfile"
    working_dir: /app
    volumes:
      - ./app/:/app/
    ports:
      - 50080:80

Vue CLI のコマンドで環境をサクッと生成します。
プロジェクト名は任意で大丈夫ですが、後でsrcフォルダに変更します。

vue create cloudrun-sample

名前の変更

rm -rf app
mv cloudrun-sample app

vue プロジェクトが実行できるか確認します。

cd app
npm run serve

vueのdocker起動画面

確認出来たら、ビルドします。このビルドの出力ファイルをデプロイします。
生成物はdistフォルダに格納されます。

npm run build

cloud run にデプロイする準備

デプロイ用の Dockerfile を用意します。
今回はバックエンドなしで構築するので、nginx のサーバー環境を使っています。

CloudRun.Dockerfile
FROM nginx:alpine

# 出力フォルダを表示させる
ADD ./app/dist/ /usr/share/nginx/html/
ADD ./nginx/ /etc/nginx/conf.d/

EXPOSE 8080
CMD ["nginx", "-g", "daemon off;"]

デプロイ用のCloudRun.Dockerfileを読み込めるように
cloudbuild.ymlでは、プロジェクト名とイメージ名を指定します。

変数 説明
PROJECT_ID GCP のプロジェクト ID
GCPのトップページから取得できる
IMAGE ビルドしたコンテナイメージの保存名(任意の名前)
cloudbuild.yml
step:
  # Build the container image
- name: 'gcr.io/cloud-builders/docker'
  args: ['build', '-t', 'gcr.io/{ PROJECT_ID }/{ IMAGE }', '-f', 'CloudRun.Dockerfile' '.']
images:
- 'gcr.io/{ PROJECT_ID }/{ IMAGE }'

nginxフォルダを作成し、その中にdefault.confファイルを作成します。
ここで、ポートを80から8080に変更しないと、デプロイ時に以下のようなエラーが発生します。

nginx/default.conf
server {
+ listen       8080;
  server_name  localhost;

  location / {
    root   /usr/share/nginx/html;
    index  index.html index.htm;
  }

  error_page 500 502 503 504  /50x.html;
  location = /50x.html {
    root     /usr/share/nginx/html;
  }
}

ビルド・デプロイ

  • gcloud initなどでログインしておく
  • 以下のサービスを有効にする。
    • Container Registry
    • Cloud Build
    • (Cloud Strage)

cloudbuild.ymlを参照してコンテナイメージをビルドします。

gcloud builds submit ./ --config cloudbuild.yml

ビルドしたイメージを元にデプロイします。

gcloud run deploy vue-test --image gcr.io/{ PROJECT_ID }/{ IMAGE }

成功すると、Cloud Runのページで確認できます。

エラー

以下のようなエラーが発生した場合、rm -rf ./node_modules/などでnode_modulesを削除すると解決する。なぜ起こったか不明。

.gcloudignore*/node_modulesを追加するだけで解決しました。

gcloud crashed (OSError): [WinError 1920] ファイルにアクセスできません。 ./app\node_modules\\.bin\\acorn'
.gcloudignore
*/node_modules

8080ポートが読み込めない

ERROR: (gcloud.run.deploy) Cloud Run error: The user-provided container failed to start and listen on the port defined provided by the PORT=8080 environment variable. 
Logs for this revision might contain more information.

終わり

vueのサーバー起動時とビルドした生成物の表示が違う可能性があるので、docker-composeの方でnginxの環境を作った方が良かったかもしれない。

GitHubで編集を提案

Discussion

ログインするとコメントできます