はじめに

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

前提条件

Angular 及び Angular CLI はインストール済みとする
App Engine の SDK はインストール済みとする
- https://cloud.google.com/appengine/downloads

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

はじめに

前提条件

Angular アプリケーションの作成

App Engine のプロジェクトを作成

App Engine 用のファイルを用意

設定ファイルを用意

Goファイルを用意

Angular アプリケーションのビルド

開発サーバーで動作確認

App Engine 用のビルドスクリプトを npm スクリプトに追加

App Engine にデプロイ

Angular を提供するパスを変更したい場合

ビルドコマンド

app.yaml

参考リンク