Google App EngineにAngularアプリをデプロイしてみた

概要

Google AppEnbineにAngularアプリをデプロイしてみました。

AngularアプリはSSR対応しなければ静的コンテンツなSPAですので、単にCloud Storageなどにアップして公開すればよいのですが、興味本位でやってみました。

手順

以下を参考にしてDockerコンテナを作成して環境を作りました。
コンテナじゃなきゃいけない理由は特にありません。

DockerでAngularをお試し
https://qiita.com/k5n/items/1a4987a430cf32e3e57d

Dockerはインストール済みの前提です。
docker-composeがインストールされているか確認しておきます。

> docker-compose version

docker-compose version 1.22.0, build f46880f
docker-py version: 3.4.1
CPython version: 3.6.4
OpenSSL version: OpenSSL 1.0.2o  27 Mar 2018

Dockerfileとdocker-compose.ymlの作成。

> mkdir 任意のディレクトリ
> cd 任意のディレクトリ

> touch Dockerfile
> touch docker-compose.yml

Dockerfile

FROM node:10.8.0-stretch

RUN npm install -g @angular/cli && ng config -g cli.packageManager yarn
WORKDIR /projects

docker-compose.yml

version: '3'

services:
  node:
    build: .
    ports:
      - "4200:4200"
    volumes:
      - ".:/projects"
    tty: true

Dockerコンテナを起動する前に、今回はAngularのサンプルプロジェクトを利用するのでダウンロードして、展開しておきます。

> cd 任意のディレクトリ
> curl -LO https://angular.io/generated/zips/toh-pt6/toh-pt6.zip
> unzip toh-pt6 -d toh-pt6

Dockerコンテナを起動して入ります。

> docker-compose up -d

ker-compose build` or `docker-compose up --build`.
Creating appengine-on-angular_node_1 ... done

> docker-compose exec node bash

ライブラリのインストール

コンテナに入れたら必要なライブラリをインストールします。
私の環境だと結構時間(30分)がかかりました。なぜに？

コンテナ内

> cd toh-pt6
> yarn

yarn install v1.9.2
(略)
[4/4] Building fresh packages...
success Saved lockfile.
Done in 1663.77s.

ローカルでの起動確認

Angularアプリが立ち上がるか確認します。
--host=0.0.0.0 を指定してコンテナ外からアクセスできるようにするのをお忘れなく。

> yarn run ng serve --host=0.0.0.0

はい。

GCPの設定

gcloud コマンドのインストールは下記をご参考ください。
※今回は記事中のNode.jsのインストールは不要。

SDK for App Engine のダウンロード
https://cloud.google.com/appengine/docs/flexible/nodejs/download

GCPプロジェクトやデプロイに必要な設定は下記をご参考ください。

GCP プロジェクト、App Engine アプリケーション、課金の管理
https://cloud.google.com/appengine/docs/flexible/nodejs/managing-projects-apps-billing

App Engineへのデプロイ

では、AngularアプリをApp Engineへデプロイしましょう。

今回は静的コンテンツが参照できたらよいので、下記を参考にして、App EngineのランタイムをPHPにして、Webサーバにnginxを利用します。

App Engine > Documentation > PHP > フレキシブル環境 > 静的ファイルの提供
https://cloud.google.com/appengine/docs/flexible/php/serving-static-files?hl=ja

Angularアプリのビルド

デプロイするために、Angularアプリをビルドします。

コンテナ内

> yarn build

yarn run v1.9.2
$ ng build --prod

Date: 2018-08-13T05:10:08.196Z
Hash: ec4f1dff5a2a0a0fc658
Time: 18976ms
chunk {0} runtime.a66f828dca56eeb90e02.js (runtime) 1.05 kB [entry] [rendered]
chunk {1} styles.a006ff9ecb31fc360851.css (styles) 765 bytes [initial] [rendered]
chunk {2} polyfills.cdf87a8e5b31fe8a11f1.js (polyfills) 130 bytes [initial] [rendered]
chunk {3} main.a2bc6cab25d0aa41c17a.js (main) 128 bytes [initial] [rendered]

デプロイ設定

Google App Engineへデプロイするための設定をします。
こちらの作業はコンテナ内・外どちらで行っても問題ありません。

もし、既存のGCPプロジェクトへデプロイする場合には、service を指定します。
指定しないとdefaultサービスへデプロイして痛い目にあいます。

Angularアプリをビルドするとdistフォルダに出力されますので、そこをドキュメントルートに指定します。

> touch app.yaml

app.yaml

runtime: php
env: flex
service: サービス名

runtime_config:
  document_root: dist

Google App Engineへデプロイ

準備ができましたので、デプロイします。
こちらはコンテナ外で作業しましょう。

> gcloud app deploy

Services to deploy:

descriptor:      [任意のディレクトリ/toh-pt6/app.yaml]
source:          [任意のディレクトリ/toh-pt6]
target project:  [プロジェクトID]
target service:  [サービス名]
target version:  [20180813t150926]
target url:      [https://サービス名-dot-プロジェクトID.appspot.com]

Do you want to continue (Y/n)?
(略)
DONE
-------------------------------------------------------------------------------------------------------------------

Updating service [サービス名] (this may take several minutes)...done.
Setting traffic split for service [サービス名]...done.
Deployed service [サービス名] to [https://サービス名-dot-プロジェクトID.appspot.com]

はい。
それでは、上記にあるURLにアクセスしてみましょう。
404になりましたね？
index.htmlをデフォルトでみてくれてないので、URLの後ろにindex.htmlを付けましょう。
設定方法はまた調べます(汗

> open https://サービス名-dot-プロジェクトID.appspot.com/index.html

やったぜ。

ひとまず、SPAもApp Engineへデプロイできることがわかりました^^

参考

DockerでAngularをお試し
https://qiita.com/k5n/items/1a4987a430cf32e3e57d

SDK for App Engine のダウンロード
https://cloud.google.com/appengine/docs/flexible/nodejs/download

GCP プロジェクト、App Engine アプリケーション、課金の管理
https://cloud.google.com/appengine/docs/flexible/nodejs/managing-projects-apps-billing

App Engine > Documentation > PHP > フレキシブル環境 > 静的ファイルの提供
https://cloud.google.com/appengine/docs/flexible/php/serving-static-files?hl=ja