vue.js を GAE で上げる方法

# はじめに
Vueを単純にGAEに上げる方法を書きます。
ただし、カスタムドメインで、しかもサブディレクトリに上げたい方向けに書いてます。
予めご了承ください。

## 環境
Google Cloud SDK 281.0.0
vue: 2.6.11
vue-cli-service: 4.4.0

GCPでプロジェクトはすでに作られているとします。
またGCPについては次のとおりです。

- プロジェクト名：`hogeprj` 
- サービス名　`hogesrv`
- 公開するURL `https://abcd.com/hogesrv/`
- サービス`default`には、なんらかがdeployされている。

## 構造
├── app.yaml (->GoogleAppsEngineの設定ファイル）
├── babel.config.js
├── dist (-> 公開ファイル。ビルドすると出てくる。)
├── node_modules
├── package-lock.json
├── package.json
├── public
├── src
├── vue.config.js　(->vueの設定ファイル)
└── yarn.lock

基本的に、[app.yaml][dist内][vue.config.js]の３つ以外触らないです。

#設定方法
① vue.config.js へ相対パスにするために次の文言を入れる。

```node.js:vue.config.js
module.exports = {
  publicPath: "./"
}
```
  v3以降はこれを入れないと、デフォルトで相対パスにならないので注意。(デフォルトは"/"です）。
  あと、ディレクトリ名`dist`が気にいらない場合は、`outputDir`で替えられます。詳しくは[こちら] 
 (https://cli.vuejs.org/config/#publicpath)


② vue を　buildする。
  buildは上のようにyarnで作っていれば、yarnのコマンド。
  vue-cliを入れていれば　`vue-cli-service build`　
  なにも入っていないプレーンの状態であれば　`npm run build` で、できるかと思います。

  buildが終わると　dist　フォルダができているはずです。

② distの中身を確認して、各リンクが./から始まっているか確認する。
  例）index.html

```html:dist/index.html
<!DOCTYPE html>
<html lang=en>
 <head>
  <meta charset=utf-8>
  ~省略~
  <link rel=icon href=./favicon.ico>
  <title>hoge</title>
  ~省略~
  <link href=./css/chunk-vendors.xyz123.css rel=preload as=style>
  <link href=./js/app.xyz123.js rel=preload as=script>
  <link href=./js/chunk-vendors.xyz1234.js rel=preload as=script>
  <link href=./css/chunk-vendors.xyz1234.css rel=stylesheet>
 </head>
 <body>
   ~省略~
  <div id=app></div>
  <script src=./js/chunk-vendors.xyz1234.js></script>
  <script src=./js/app.xyz1234.js></script>
 </body>
</html>
```

③ app.yamlを作る
  app.yamlは次のとおりです。

```yaml/app.yaml
runtime: php55
service: hogesrv
handlers:
- url: /hogesrv/
  static_files: dist/index.html
  upload: dist/index.html
  secure: always
- url: /hogesrv/(.*)
  static_files: dist/\1
  upload: dist/(.*)
  secure: always
skip_files:
- node_modules/
- public/
- src/
- .browserslistrc
- .gitignore
- babel.config.js
- pakage.json
- package-lock.json
- vue.config.js　
- yarn.lock
```
　　->もし、ドメイン直（abcd.comで表示させたい場合）は`/hogesrv`を抜くだけです。。

　　

   <dl>ちょっとapp.yamlについて突っ込まれたことをQAで解説。
　　<dt>Q1:runtimeは、なぜｐｈｐ？これｈｔｍｌ。。。</dt>
　　<dd>A1:そうなんですよね。。。でもhtmlのランタイムはないので、phpになります。</dd>
　　<dt>Q2:urlでドメイン書いてないんですが、いいんですか？</dt>
　　<dd>A2：いいんです。このあと設定してきます。</dd>
　　<dt>Q3：Static_filesとかUploadとか意味わかりません。</dt>
　　<dd>A3: [こちら](https://cloud.google.com/appengine/docs/flexible/php/reference/app-yaml?hl=ja)を確認してみましょう</dd>
　　<dt>Q4:secure: always っているんですか？</dt>
　　<dd>　　A4：SSLで強制的にアクセスさせたければ入れてください。(https://にhttp://でアクセスしても勝手に向かう)</dd>
　　<dt>Q5:skip_filesめっちゃあるけどいるんですか？</dt>
　　<dd>A5:GAEで必要なのは'dist'と`app.yaml`だけです。他のいらないものはサーバ上げない（というかそもそも容量的に上がらないけど）</dd>
   </dl>

④　コンソールでデプロイする。
  `kotadora@hogemaru % gcloud app deploy --project=hogeprj `

⑤　確認してみる。
  次のコマンドを打つとブラウザが起動するはずなので、URLの後ろに **/hogesrv/** をつけて正しく表示されるか確認。
  `kotadora@hogemaru % gcloud app browse -s hogesrv --project=hogeprj`
　
　　例）`https://hogesrv-dot-hogeprj.an.r.appspot.com/hogesrv`

⑥　ドメイン（カスタムドメイン）をGAEへ割り当てる
  ここは公式がわかりやすく書いてくれているので、[こちら](https://cloud.google.com/appengine/docs/standard/php/mapping-custom-domains?hl=ja)を参照してください

⑦ ドメインをサービスに割り当てるdispatch.yamlを書く
   ドメインを割り当てるためにはdispatch.yamlを書く必要がある。今回は`default`と`hogesrv`のふたつにそれぞれ振ってみる。

```yaml:dispatch.yaml
dispatch:
  - url: "abcd.com/hogesrv/*"
    service: hogesrv

  - url: "abcd.com/"
    service: default
```

⑧　dispatchをGAEへデプロイする
　　`kotadora@hogemaru % gcloud app deploy --project=hogeprj dispatch.yaml`

注意）app.yamlが優先して読み込まれるので、dispatch.yamlを上げるときは明示してあげるほうがよい。

⑨　少し待つ。（すぐできることもあるが、なぜか時間がかかることがある）

⑩　ドメインでアクセスしてみる。
　　`https://abcd.com/hogesrv/`

⑪ データを保全する
　gitにあげるなり、source repositoryにあげるなり、zip化するなり、次に備えておく。



## トラブル対処方法
・GAEについて
結構GAEをやっていると、「なんでルーティングされねーんだよ！自分の環境ではちゃんと見えてるのに！デベロッパーコンソールすら出てこねーよ！なんてこった！！」
と叫び、挙げ句「gcloud app deploy 、じーくらうどでぷろい、depl...orz」と呪文を唱え始めるかもしれません。
そうなる前に、[ログ](https://console.cloud.google.com/appengine/services)を見ましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166400/4ace2d88-dfe2-afb6-c278-246a88021bc9.png)

次のようにwebのコンソールにアクセスして、ログでかならずなんらかの挙動が見えるはずです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166400/bb0105a3-4341-f041-1e70-b0710ef922d3.png)

ただし、Google様のよく読めば全て出ているログは優秀すぎて、逆に惑わされることも多々ありますが、目的をしっかり持てば惑わされないでしょう。（このファイルがどうなってる！とか。この時間にどう動いたんじゃ！とかでいいので。なんでだろーってふわ～ってみると情報が多すぎて、見失います。注意。）
見えたら、あとは、app.yamlを修正するなり、ファイルパスを修正するなり、行えばおそらくできるでしょう。

・vueについて
buildしているのに、なぜかファイルが生成されなかったり、パスがおかしかったりすることがある場合、
一度distフォルダごと消してから、buildしてみてください。
うまくいくことがあります。

#最後に
GoogleCloudPlatformは正しく使えば、無料枠で相当色々できます。
一見、AmazonやAzureのが楽ちんに見えますが、さして変わらないです。何より安い。。。
ぜひ、よいGAEライフを！