Posted at

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

More than 1 year has passed since last update.


はじめに

この記事は ウェブクルー 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のプロジェクト作成は以下記事を参照して下さい


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 でアクセスできるようになります


今回のコード


Herokuにデプロイする場合は以下の記事を参考にして下さい


参考ULR


さいごに

最後までお読み頂き、ありがとうございました!

以上で ウェブクルー Advent Calendar 2017 終了します。

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

お気軽にエントリーくださいませ。

皆さま、良いお年を!:grin: