概要
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
