GAE
angular

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

参考リンク