如何将使用Angular CLI创建的应用部署到GAE

首先

这篇文章是Web Crew Advent Calendar 2017的第25篇，也是最后一篇。
昨天是@razgriz_ray先生的《尝试在公司引入远程工作的经历》。

今天是圣诞节，您过得如何呢？我们今天的主题是如何使用Angular CLI将应用部署到GAE，我将由 @DotaKobayashi 为大家介绍如何将Angular部署到GAE。让我们马上开始吧。

总结

这次我们将使用Angular CLI创建的Web应用程序，使其能够部署到GCP（Google Cloud Platform）的GAE（Google App Engine）。

预先准备

• GCPに接続（Googleアカウントがあれば使える）

• gcloudコマンドを使えるようにする SDKのダウンロード

Angular CLIを使ってWebアプリを作成する

请参考以下文章创建Angular5项目。

DockerでAngular5の開発環境をつくる

为了使用GAE所需的准备工作

app.yamlを用意する

runtime: go
api_version: go1

handlers:
- url: /(.*\.(css|gif|png|jpg|ico|js|html))
  static_files: static/\1
  upload: static/(.*\.(css|gif|png|jpg|ico|js|html))
- url: /(.*)
  static_files: static/index.html
  upload: static/index.html

Goのランタイムを利用しているのでGoファイルを用意します

package main

import "net/http"

func init() {
    http.HandleFunc("/", func(w http.ResponseWriter, r *http.Request) {
    })
}

package.jsonにコマンド追加

  "scripts": {
...
# buildとdeployを追加
    "build": "ng build --target=production --output-path=./service/static",
    "deploy": "gcloud app deploy --project=${PROJECT_ID} service/app.yaml",
...

部署的步骤

Dockerで環境作っている場合

# Dockerで環境作っている場合はdocker run で実行する
docker run -it --rm -w /app -v $(pwd)/my-project-name:/app angular5:latest ng build --target=production --output-path=./service/static

# 環境変数を設定
export PROJECT_ID=GCPで作成したプロジェクトのID
cd my-project-name/service
gcloud app deploy --project=${PROJECT_ID} app.yaml

# gcloud でinstallが必要なcomponentsがあった場合はinstallを求められるのでinstallする

npm をローカルにインストールしている場合

export PROJECT_ID=GCPで作成したプロジェクトのID
npm run build && npm run deploy

デプロイしたら https://　[GCPで作成したプロジェクトのID].appspot.com でアクセスできるようになります

这段代码

GitHub

如果要部署在Heroku上，请参考以下文章。

Angular CLI で作成したアプリをHerokuへデプロイする方法

请参考以下网址

• Build a Todo List with Angular and Google App Engine

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

最后

感谢您阅读到最后！通过这一篇文章，我们结束了2017年度的Web Crew点亮日历活动。

在Web Crew中，我们随时招募能与我们一起工作的工程师。请随意申请。

各位，祝你们新年快乐！