将用 Angular 构建的应用程序部署到 Google App Engine

2 年 ago
宇, 华
2 minutes

第一篇

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

 

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

前提条件 tí

    • 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 アプリケーション内のルーティングに任せる
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 ファイルがないとデプロイができない
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 脚本中。

{
  ...
  "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 にパスを追加する

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

请参阅以下链接

    • https://stackoverflow.com/questions/39782506/deploying-basic-angular-2-app-to-google-app-engine

 

    https://github.com/googlearchive/appengine-angular-hello-world-python
bannerAds