はじめに
- Angular 製のアプリケーションを Google App Engine にデプロイして動かしてみる
- ルーティングを利用するアプリケーションを想定し App Engine の設定を使ってどんなパスでも基本的に index.html で処理する
前提条件
- Angular 及び Angular CLI はインストール済みとする
- App Engine の SDK はインストール済みとする
Angular アプリケーションの作成
ng new angular-gae-app
App Engine のプロジェクトを作成
- Google Cloud Platform コンソールからプロジェクトを作成
- メニューから App Engine を選択してサービスを開始
App Engine 用のファイルを用意
設定ファイルを用意
- 拡張子付きのリクエストに対しては dist 以下の実ファイルを返す
- それ以外のリクエストに対しては dist/index.html を返して Angular アプリケーション内のルーティングに任せる
gae/app.yaml
runtime: go
api_version: go1
handlers:
- url: /(.*\.(gif|png|jpeg|jpg|css|js|ico))$
static_files: dist/\1
upload: dist/(.*)
- url: /(.*)
static_files: dist/index.html
upload: dist/index.html
Goファイルを用意
- runtime を go にしているので .go ファイルがないとデプロイができない
gae/app.go
package main
import "net/http"
func init() {
http.HandleFunc("/", func(w http.ResponseWriter, r *http.Request) {
// no op
})
}
Angular アプリケーションのビルド
ng build --prod --output-path=./gae/dist/
開発サーバーで動作確認
cd gae
goapp serve
- ブラウザで
http://localhost:8080/にアクセスして動作確認
App Engine 用のビルドスクリプトを npm スクリプトに追加
package.json
{
...
"scripts": {
...
"build:gae": "ng build --prod --output-path=./gae/dist/"
App Engine にデプロイ
cd gae
gcloud app deploy app.yaml --project [PROJECT_ID] -v [VERSION]
Angular を提供するパスを変更したい場合
- Angular を提供するパスを変更したい場合はビルドコマンドと app.yaml を変更する
- 以下は
http://{HOST_NAME}/client/で提供する場合
ビルドコマンド
-
--base-hrefオプションで js や css の参照先を指定する
ng build --prod --output-path=./gae/dist/ --base-href=/client/
app.yaml
-
handlers.urlにパスを追加する
gae/app.yaml
runtime: go
api_version: go1
handlers:
- url: /client/(.*\.(gif|png|jpeg|jpg|css|js|ico))$
static_files: dist/\1
upload: dist/(.*)
- url: /client/(.*)
static_files: dist/index.html
upload: dist/index.html