Deployment of Vuejs - webpack webapp on Google App Engine

1
votes

I am building my first Vue.js webapp. I have setup a new project by using:

vue init webpack <project_name>

I have done some work and almost everything works as I want (except for sass but that's a story for another time). I now want to deploy my webapp to google app engine. I have created a new node.js project on GAE. I've created my app.yaml (see below). I deploy with the usual

gcloud app deploy --project="<project_name>"

but then the deployment fails after a very long time (~5-8minutes) saying

Updating service [default]...failed.                                                                                                                   

ERROR: (gcloud.app.deploy) Error Response: [4] Your deployment has 
failed to become healthy in the allotted time and therefore was 
rolled back. If you believe this was an error, try adjusting the 
'app_start_timeout_sec' setting in the 'readiness_check' section.

My current project structure is:

  • build/
  • config/
  • dist/
    • index.html
    • static
      • css/
      • images/
      • js/
  • node modules/
  • src/
    • components/
    • scss/
    • App.vue
    • main.js
  • static/
  • package.json
  • babel.rc
  • index.html
  • app.yaml

My app.yaml is:

runtime: nodejs
env: flex

handlers:
- url: /
  static_files: dist/index.html
  upload: dist/index.html

- url: /(.*)
  static_files: dist/\1
  upload: dist/(.*)
2
node.jsgoogle-app-enginedeploymentwebpackvue.js

2 Answers

2
votes

Add this config in file app.yaml

runtime: php55
threadsafe: true

handlers:
- url: /
  static_files: dist/index.html
  upload: dist/index.html

- url: /(.*)
  static_files: dist/\1
  upload: dist/(.*)
0
votes

The error message indicates:

Your deployment has failed to become healthy in the allotted time

Go through the Health checks documentation.

The 5-8 minutes deploying time is not unusual, see Google cloud deploy so slow.