Edited at

Angular 製のアプリケーションを Google App Engine にデプロイする

More than 1 year has passed since last update.


はじめに


  • Angular 製のアプリケーションを Google App Engine にデプロイして動かしてみる

  • ルーティングを利用するアプリケーションを想定し App Engine の設定を使ってどんなパスでも基本的に index.html で処理する


前提条件


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



参考リンク