はじめに
この記事は ウェブクルー 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 終了します。
ウェブクルーでは一緒に働いていただけるエンジニアを随時募集しております。
お気軽にエントリーくださいませ。
皆さま、良いお年を！