Posted at

Vue.jsで作成したSPAなアプリをGoogle App Engineへデプロイする

せっかくGCP使ってるので、SPAなアプリをGoogle App Engine(GAE)へデプロイしてみました。

Vue.jsの場合、https://hogehogehoge.xxx/index.htmlindex.html でアクセスするとルーティングが効かないので、GAEの設定でルーティング設定してやる必要がありました。


前提


  • GCPのアカウントがあり利用できる


  • gcloud コマンドがインストール済み

  • Vue CLIがインストール済み


環境構築

適当にVue.jsのプロジェクトを作成します。ここではVue CLIを利用して作成しています。

Vue CLI 3

https://cli.vuejs.org/

ソースをアップしているので、よければご参考ください。

https://github.com/kai-kou/vue-js-on-gae

> mkdir 任意のディレクトリ

> cd 任意のディレクトリ

> vue --version
3.2.1

> vue create app

プロジェクトが作成できたらローカルで確認しておきます。

> cd app

> yarn serve


GAEへデプロイ

Vue.jsのプロジェクトをビルドしてGAEへデプロイします。

> yarn build

> touch app.yaml

GAEのスタンダード環境へデプロイする際に必要となるapp.yaml は下記を参考に定義しました。

Google App Engine で静的ウェブサイトをホストする  |  PHP の App Engine スタンダード環境  |  Google Cloud

https://cloud.google.com/appengine/docs/standard/php/getting-started/hosting-a-static-website?hl=ja

app.yamlservice を指定しない場合、default サービスにデプロイされますので、すでに別で利用している場合、ご注意ください。

handlers でルーティング設定する感じですね。


app.yaml

runtime: php55

service: サービス名
threadsafe: true

handlers:
- url: /
static_files: dist/index.html
upload: dist/index.html

- url: /(.*)
static_files: dist/\1
upload: dist/(.*)


ではデプロイしてみます。

> gcloud app deploy

Services to deploy:

descriptor: [任意のディレクトリ/app/app.yaml]
source: [任意のディレクトリ/app]
target project: [GCPのプロジェクトID]
target service: [サービス名]
target version: [20181218t121024]
target url: [https://[サービス名]-dot-[GCPのプロジェクトID].appspot.com]

Do you want to continue (Y/n)?

Beginning deployment of service [サービス名]...
╔════════════════════════════════════════════════════════════╗
╠═ Uploading 3147 files to Google Cloud Storage ═╣
╚════════════════════════════════════════════════════════════╝
File upload done.
ERROR: (gcloud.app.deploy) INVALID_ARGUMENT: This deployment has too many files. New versions are limited to 10000files for this app.
- '@type': type.googleapis.com/google.rpc.BadRequest
fieldViolations:
- description: This deployment has too many files. New versions are limited to 10000
files for this app.
field: version.deployment.files[...]

はい。

エラーになりました。ファイル多すぎだそうです。

原因はプロジェクトに含まれるnode_modules などもアップロードされてしまったからです。

app.yaml に特定のファイルを除外する指定skip_files を追加します。

app.yamlに関する仕様は下記が詳しかったです。

app.yaml リファレンス  |  PHP の App Engine スタンダード環境  |  Google Cloud

https://cloud.google.com/appengine/docs/standard/php/config/appref?hl=ja


app.yaml

runtime: php55

service: サービス名
threadsafe: true

handlers:
- url: /
static_files: dist/index.html
upload: dist/index.html

- url: /(.*)
static_files: dist/\1
upload: dist/(.*)

skip_files:
- node_modules/
- public/
- src/
- .browserslistrc
- .gitignore
- babel.config.js
- pakage.json
- postcss.config.js
- README.md
- tsconfig.json
- tslint.json
- yarn.lock


あらためてデプロイします。

> gcloud app deploy

()

Beginning deployment of service [サービス名]...
╔════════════════════════════════════════════════════════════╗
╠═ Uploading 66 files to Google Cloud Storage ═╣
╚════════════════════════════════════════════════════════════╝
File upload done.
Updating service [サービス名]...done.

今度はデプロイできました。

ブラウザで確認してみます。

app.png

app-2.png

ルーティングも効いています。

やったぜ。


参考

Vue CLI 3

https://cli.vuejs.org/

Google App Engine で静的ウェブサイトをホストする  |  PHP の App Engine スタンダード環境  |  Google Cloud

https://cloud.google.com/appengine/docs/standard/php/getting-started/hosting-a-static-website?hl=ja

app.yaml リファレンス  |  PHP の App Engine スタンダード環境  |  Google Cloud

https://cloud.google.com/appengine/docs/standard/php/config/appref?hl=ja