I'm building a VueJS app with Vuex and a NodeJS API to Gcloud AppEngine.
I've pushed successfully my API to appengine and it works perfectly.
Now the problem is VueJS. What should include in the app.yaml?
Already tried with
runtime: php55
threadsafe: true
handlers:
- url: /
static_files: dist/index.html
upload: dist/index.html
- url: /(.*)
static_files: dist/\1
upload: dist/(.*)
But it pushed 19000 files which is really too big for AppEngine (10 000 max)
What files can be avoided? And how?
Thanks a lot
You should build your vuejs project(probably npm run build) and only deploy the built files only(several files).
refer to https://cli.vuejs.org/guide/build-targets.html for details
https://cli.vuejs.org/guide/deployment.html#general-guidelines
Related
I am trying to serve static site on app engine and I am pretty unsuccessful with deployment. I followed the tutorial here https://cloud.google.com/appengine/docs/standard/python/getting-started/hosting-a-static-website . The only update is that I do specify the service name.
The app is pretty minimal
app.yaml
runtime: python27
service: swdocs
api_version: 1
threadsafe: true
handlers:
- url: /
static_files: www/index.html
upload: www/index.html
secure: always
- url: /(.*)
static_files: www/\1
upload: www/(.*)
The file tree is
.
├── app.yaml
└── www
└── index.html
When I deploy it and go to the page
gcloud app deploy
gcloud app browse
The app is not reachable. Out of ~10 deploys one actually works if I go to the version url not the service url (and only in Chrome, not safari). I am not deploying to my own domain. I am using the appspot one.
Anybody has an idea what I might be doing wrong or how to debug?
I have a React application that is running on google cloud (I am new to google cloud). My react version is "react": "16.8.3" (I think it is irrelevant but anyway).
My problem is that when I have some developments I am running npm run build again and then I am using this command 'gc app deploy' to deploy the new version. After this when I run 'gc app browse' I can see and use my new version of app but when I go to real url I see it as the previous version. After I clear my cookies on browser (I have the same problem with the other browsers also) I can use the new version.
I am using cloudflare and all the configurations that I made as following this article; https://medium.com/tech-tajawal/deploying-react-app-to-google-app-engine-a6ea0d5af132 did not do any further configurations. I am using AWS for some other project and don't have this problem. Is there anyone with similar issue or anybody to help?
Btw, my app.yaml as below;
runtime: nodejs
env: flex
manual_scaling:
instances: 1
resources:
cpu: 1
memory_gb: 4
disk_size_gb: 10
handlers:
- url: /
static_files: build/index.html
upload: build/index.html
- url: /
static_dir: build
Have a good day!
I assume you're not splitting traffic but I'd try setting the Cache-Control, Expires or Vary: Cookie headers suggested in the official documentation and see if that changes anything.
I created a simple Vue.js application. Then I created a build for production using
npm run build command which creates dist folder in the project structure.
Then I use gcloud app deploy command to deploy it to Google App Engine, but then the deployment stops and gives error as:
ERROR: (gcloud.app.deploy) INVALID_ARGUMENT: This deployment has too many files. New versions are limited to 10000 files for this app.
Can someone please tell me what is the proper way to deploy Vue.js application to Google App Engine?
Have you tried deploying your Vue.js app to Google App Engine using Cloud Build? I have had no problem deploying any Vue.js apps in this way. Try following this tutorial for complete instructions.
Basically, you would have to include the following two files in your project root directory when deploying your Vue.js app to Google App Engine via Cloud Build:
App.yaml
runtime: nodejs10
handlers:
# Serve all static files with urls ending with a file extension
- url: /(.*\..+)$
static_files: dist/\1
upload: dist/(.*\..+)$
# catch all handler to index.html
- url: /.*
static_files: dist/index.html
upload: dist/index.html
and
cloudbuild.yaml
steps:
- name: node:10.15.1
entrypoint: npm
args: ["install"]
- name: node:10.15.1
entrypoint: npm
args: ["run", "build"]
- name: "gcr.io/cloud-builders/gcloud"
args: ["app", "deploy"]
timeout: "1600s"
In the case you're not using cloud build you may just use the app.yaml above and reference the steps implied in the cloudbuild.yaml, which means:
run npm install
run npm run build
run gcloud app deploy
You have too many files in the project.
In your app.yaml file, add the skip_files tag to it so the deployment does not include unnecessary files or folder in the upload. You can also mix with regex so for example:
skip_files:
- node_modules/
- .gitignore
- src/
- public/
- babel.config.js
- ^(.*/)?\..*$
I found some Google Cloud Platform documentation that may be helpful to your issue, in this link under the deployment section it's indicated that for every deployment you only can upload 10,000 files per version and each file is limited to a maximum size of 32 megabytes. You're running into one of this two problems, I suggest to check this out on your app and try to deploy it again.
if you don't want to waste $10 on namecheap for an SSL cert and hours of your time (like me) you probably want to add the secure: always option to each handler.
- url: /.*
static_files: dist/index.html
upload: dist/index.html
secure: always
like so! That's if you're using a custom domain though.
I've been trying to deploy my website using Google App Engine. I have a domain name. I have a bucket with all my files uploaded into it, organized the way that google wants them. I even have the app.yaml file in the folder. However, every time I try to deploy the app I get this message:
Any advice?
the error represent a problem with the app.yaml file. here you can see an example of the app.yaml file for static sites-structure.
runtime: python27
api_version: 1
threadsafe: true
handlers:
- url: /
static_files: index.html
upload: index.html
- url: /(.*)
static_files: \1
upload: (.*)
Also you can follow these official recommendations
*Off course, is necessary validate gcloud to use the last version updated.
gcloud components update
If you receive problems with the SSL3_GET_SERVER_CERTIFICATE please check this question because maybe is a problem with SDK but depend the OS and other variables.
Did you run gcloud init first? You need to do so first and follow instructions to create a named gcloud configuration e.g my_ga_app.
And then every time before running deploy, you need to run (only necessary if you are working on multiple apps):
gcloud config configurations activate my_ga_app
then the deploy
gcloud app deploy
if this does not work, make sure your gcloud is upto date by running
gcloud components update
Using Yeoman webapp generator, I am able to install bower_components and execute grunt locally. When deploying the app to Google App Engine, I had to add all files served from /dist folder.
What changes should be made to app.yaml file to serve the font files under dist/bower_components?
My app.yaml file:
version: 1
runtime: php55
api_version: 1
handlers:
- url: /
script: dist/index.html
- url: /styles
static_dir: dist/styles
- url: /scripts
static_dir: dist/scripts
- url: /bower_components/bootstrap-sass/assets/fonts/bootstrap
static_dir: /dist/bower_components/bootstrap-sass/assets/fonts/bootstrap
skip_files:
- ^node_modules*$
- ^bower_components*$