はじめに

この記事はウェブクルー Advent Calendar 2017 25日目最後の記事になります。
昨日は@razgriz_rayさんの「会社でリモートワークを導入してみた話」でした。

クリスマスですね、いかがお過ごしでしょうか。
今日は Angular CLI で作成したアプリをGAEへデプロイする方法というタイトルで
AngularをGAEへデプロイするまでの内容を @DotaKobayashi がお届けいたします。
さっそく始めていきます。

概要

今回はAngular CLIで作成したWebアプリをGCP(Google Cloud Platform) の GAE(Google App Engine) にデプロイできるようにします

事前準備

GCPに接続（Googleアカウントがあれば使える）
gcloudコマンドを使えるようにする SDKのダウンロード
Angular CLIを使ってWebアプリを作成する

Angular5のプロジェクト作成は以下記事を参照して下さい

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

GAEを利用する為の準備

app.yamlを用意する

servcie/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ファイルを用意します

service/app.go

package main

import "net/http"

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

package.jsonにコマンド追加

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へデプロイする方法

参考ULR

さいごに

最後までお読み頂き、ありがとうございました！
以上でウェブクルー Advent Calendar 2017 終了します。

ウェブクルーでは一緒に働いていただけるエンジニアを随時募集しております。
お気軽にエントリーくださいませ。

皆さま、良いお年を！