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

# 

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

Vue.jsの場合、`https://hogehogehoge.xxx/index.html` と`index.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

```sh
> mkdir 任意のディレクトリ
> cd 任意のディレクトリ

> vue --version
3.2.1

> vue create app
```

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

```sh
> cd app
> yarn serve
```

## GAEへデプロイ

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

```sh
> 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.yaml` で`service` を指定しない場合、`default` サービスにデプロイされますので、すでに別で利用している場合、ご注意ください。

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

```yaml: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/(.*)
```

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

```sh
> 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

```yaml: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

```

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

```sh
> gcloud app deploy
(略)

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

今度はデプロイできました。
ブラウザで確認してみます。

<img width="816" alt="app.png" src="https://qiita-image-store.s3.amazonaws.com/0/48549/77bd2748-a332-3327-eb36-43c921c08cc0.png">
<img width="797" alt="app-2.png" src="https://qiita-image-store.s3.amazonaws.com/0/48549/47b968b5-95ed-bcc2-5245-1501ee464cb9.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