GCPのCloudRunでVueアプリを公開するまで
- 2022/5/16 追記
環境
- windows 11（ほぼ関係無い）
- docker
- google cloud sdk (python必須)
Vue サイトの作成
取り敢えず適当な最小構成で作成します。ファイルは使用するフォルダのルートに保存します。
FROM node:16.15.0-buster-slim
WORKDIR /app
RUN apt-get update && \
npm install -g npm @vue/cli
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
確認出来たら、ビルドします。このビルドの出力ファイルをデプロイします。
生成物はdistフォルダに格納されます。
npm run build
cloud run にデプロイする準備
デプロイ用の Dockerfile を用意します。
今回はバックエンドなしで構築するので、nginx のサーバー環境を使っています。
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 |
ビルドしたコンテナイメージの保存名（任意の名前） |
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に変更しないと、デプロイ時に以下のようなエラーが発生します。
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'
*/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の環境を作った方が良かったかもしれない。
Author And Source
この問題について(GCPのCloudRunでVueアプリを公開するまで), 我々は、より多くの情報をここで見つけました https://zenn.dev/masa_dev/articles/54bc5d71247146696df1著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Collection and Share based on the CC protocol