はじめに
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 へ相対パスにするために次の文言を入れる。
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
<!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は次のとおりです。
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を抜くだけです。。
- ちょっとapp.yamlについて突っ込まれたことをQAで解説。
- 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:
- 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ライフを！