23
22

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Posted at

せっかく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

23
22
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
23
22

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?