Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

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

More than 3 years have 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:

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away