Google Container RegistryにVue.jsアプリを置いてCompute Engineにデプロイ

GCP

Vue.jsのウェブアプリをDockerコンテナにし、コンテナイメージからGoogle Compute Engineのインスタンスを作成して、Vue.jsのウェブアプリを動かしてみます。

Vue.jsのプロジェクト作成

$ vue create sample

Vue 2 or 3 は2を選択しました。

$ cd sample
$ npm run serve

サーバが立ち上がりますので、ブラウザでlocalhostにアクセスしてみます。ポート番号は npm run serve を実行しているコンソール上に表示されているはずですが、たぶん8080番です。すでに使われていたら8081、8082と順番に空きを探してくれるみたいです。

f:id:suzuki-navi:20210419092042p:plain

コンテナイメージ作成

Dockerfile は以下の内容です。

FROM node:15.14.0-alpine3.10

RUN npm install -g http-server

WORKDIR /opt/app

COPY package*.json ./

RUN npm install

COPY . .
# Dockerレイヤーのキャッシュを活用するために2段階のコピー

RUN npm run build
# distディレクトリに静的なファイルが生成される

EXPOSE 80
CMD ["http-server", "dist", "-p", "80"]

以下のVue.js公式ドキュメントを参考にしました。

Dockerize Vue.js App — Vue.js

ビルドします。

$ docker build -t vuejs-sample .
$ docker images
REPOSITORY                                TAG                  IMAGE ID            CREATED             SIZE
vuejs-sample                              latest               9d7cbcd7bd1f        About an hour ago   360MB

Google Container Registryにpush

Google Container Registryにpushします。

やり方はきのうの記事にも書きました。

Google Container RegistryにHello, WorldなDockerイメージを置いてみる

$ docker tag vuejs-sample gcr.io/xxxxxxxx/vuejs-sample

$ gcloud docker -- push gcr.io/xxxxxxxx/vuejs-sample

Google Compute Engineを作成し、デプロイ

sample1という名前のGoogle Compute Engineのインスタンスを作成します。その際にコンテナイメージを指定します。

$ gcloud compute instances create-with-container sample1 --container-image gcr.io/xxxxxxxx/vuejs-sample --tags http-server

このコマンドで作成されたインスタンスは、ディスク容量は10GB、マシンタイプn1-standard-1、OSはコンテナ実行に最適化された専用OS(Container-Optimized OS from Google documentation  |  Google Cloud)でした。

コンテナがLISTENしているポートは自動でホスト側のポートにもマッピングされます。

コンテナを実行する際のオプションの構成  |  Compute Engine ドキュメント  |  Google Cloud

ただし、firewallの設定は必要なようです。

$ gcloud compute firewall-rules create allow-http --allow tcp:80 --target-tags http-server

作成したインスタンスのグローバルIPにブラウザでアクセスすると、さきほどのVue.jsのデモアプリが動いていることが確認できます。