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

6854 ワード
GAE angular-cli Angular2 Angular GAE テキストリンク

はじめに

この記事は ウェブクルー 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 終了します。

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

皆さま、良いお年を！