はじめに

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 へ相対パスにするために次の文言を入れる。

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

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を抜くだけです。。

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

④　コンソールでデプロイする。
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へ割り当てる
ここは公式がわかりやすく書いてくれているので、こちらを参照してください

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

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」と呪文を唱え始めるかもしれません。
そうなる前に、ログを見ましょう。

次のようにwebのコンソールにアクセスして、ログでかならずなんらかの挙動が見えるはずです。

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

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

最後に

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