せっかく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
1 2 3 4 5 6 7 | > mkdir 任意のディレクトリ > cd 任意のディレクトリ > vue --version 3.2.1 > vue create app |
プロジェクトが作成できたらローカルで確認しておきます。
1 2 | > cd app > yarn serve |
GAEへデプロイ
Vue.jsのプロジェクトをビルドしてGAEへデプロイします。
1 2 | > 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
でルーティング設定する感じですね。
app.yaml
01 02 03 04 05 06 07 08 09 10 11 12 | runtime: php55 service: サービス名 threadsafe: true handlers: - url: / static_files: dist /index .html upload: dist /index .html - url: /(.*) static_files: dist/\1 upload: dist/(.*) |
ではデプロイしてみます。
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | > 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
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | 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 |
あらためてデプロイします。
1 2 3 4 5 6 7 8 9 | > gcloud app deploy (略) Beginning deployment of service [サービス名]... ╔════════════════════════════════════════════════════════════╗ ╠═ Uploading 66 files to Google Cloud Storage ═╣ ╚════════════════════════════════════════════════════════════╝ File upload done . Updating service [サービス名]... done . |
今度はデプロイできました。
ブラウザで確認してみます。
ルーティングも効いています。
やったぜ。
参考
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