🎃

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

2022/05/08に公開

GCP

Vue.js

nginx

tech

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で編集を提案

環境

Vue サイトの作成

cloud run にデプロイする準備

ビルド・デプロイ

エラー

終わり

Discussion