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
Related
I wrote an application (NodeJS 12, Express) which installs and works locally, and would like to deploy it on gcloud's app engine.
My app.yaml:
service: staging runtime: nodejs12
handlers:
- url: /.*
secure: always
script: auto
When deploying to google cloud's app engine, I'm getting this error:
Error type: UNKNOWN
Error message: npm ERR! object.assign not accessible from es-abstract
Other projects deploy fine.
Switching the runtime in the app.yaml to nodejs14 made the issue disappear. I know this might not be a perfect solution for everyone, but if your code is fine with a different node version it might help.
I'm new to google cloud and I'm trying my best to implement CI / CD on a simple MERN stack application.
I was able to set up google cloud build and get the deploy with automatic triggers (from github branch) to work.
I have only one question: in the cloudbuild.yaml file I have inserted several steps, to do first npm install, then npm build and finally deploy. The process is quite slow and it also copies all the code to the server, not just the build folder.
I would like to understand how to configure the file to be able to use the build folder already present in the github repository and do the deploy directly, without further steps.
On the frontend I use react, the only thing I have to do is serve the static index.html file.
Here is my current configuration (only the frontend, to understand)
steps:
# Step 0: FRONTEND npm install
- name: "gcr.io/cloud-builders/npm"
dir: 'frontend'
args: ['install']
timeout: "5m"
# Step 1: FRONTEND optimized build
- name: "gcr.io/cloud-builders/npm"
dir: 'frontend'
args: ["run", "build"]
timeout: "5m"
# Step 2: FRONTEND Deploy cloud app frontend
- name: "gcr.io/cloud-builders/gcloud"
args: ["app", "deploy", "-v", "0-1-2", "app.yaml"]
dir: 'frontend'
timeout: "20m"
timeout: 60m
In my remote repository I have the build folder ready to use, but I can't figure out how to do the job.
I've also tried something similar to this:
Upload build folder in Google Cloud Build
without success.
One of the problems is that at the end of the process it appears that cloud build is trying to start npm start.
Finally, I am currently using express to simply serve static files.
Using google cloud can I avoid using it and simply configure the handlers from the app.yaml file?
What web server does it use under the hood to serve files if I don't implement express?
If you only need to deploy the build folder, then the link you've provided should do the job. You don't need to run npm install and npm run build unless you want to to copy all your code and create the build folder using Cloud Build.
Credits to #Guillaume (updated, assuming the .yaml file is located at the root directory of the project and build located at a directory called frontend):
steps:
# Step 0: FRONTEND copy only build and deploy cloud app frontend
- name: 'gcr.io/cloud-builders/gcloud'
entrypoint: bash
dir: 'frontend'
args:
- '-c'
- |
cd ..
cp app-production-build.yaml frontend/build
cd frontend/build
gcloud app deploy
timeout: '1600s'
By default, Cloud Build uses a directory named /workspace as a working directory. If you set the dir field in the build step, the working directory is set to /workspace/<dir>. Basically for this build step, Cloud Build's currently on a directory called frontend in the root directory of your project/repo.
Also as Guillaume mentioned, you need to update your app.yaml URL handlers for this to work. I tested this sample inside the build folder of a new React app and it works for me:
runtime: nodejs12
service: frontend-react
handlers:
# Serve all static files with url ending with a file extension
- url: /(.*\..+)$
static_files: \1
upload: (.*\..+)$
# Catch all handler to index.html
- url: /.*
static_files: index.html
upload: index.html
To answer your last question, you can serve static files directly from your app and what you need to do is to configure URL handlers such as static_dir or static_files.
Take note that each file inside build/static are cached to speed up performance so there could be a delay whenever you make several deployments.
Node.js on App Engine Standard doesn't use any webserver under the hood and you have to set it up by specifying it on your package.json. Here's some web frameworks recommended by Google docs.
I've spent a fair amount of time reading through Stack Overflow questions and can't find what I'm looking for.
I'm creating a Flask API and React frontend to be deployed on GAE. My directory structure looks like this:
application_folder
-> api
-> -> app.yaml
-> -> main.py
-> react_frontend
-> -> app.yaml
-> -> {directories after using create-react-app}
For development
1.) The package.json of the React app, I've set a proxy:
"proxy": "http://localhost:5000/"
My React frontend is running on port 3000.
2.) I fetch within the React frontend's App.js file as such:
fetch('api/endpoint')
Works like a dream.
For Production
However, when deploying to GAE, I have to make the following changes:
1.) Remove proxy from package.json. I couldn't find a way for this to work with a proxy as I received a 404 error on the React frontend on production.
2.) Add Access-Control-Allow-Origin to Flask API in main.py.
#app.route("/api/endpoint", methods=["GET"])
def endpoint():
resp = make_response({"cat": 15})
resp.headers["Access-Control-Allow-Origin"] = "*"
return resp
3.) Now, I have to fetch with absolute path from App.js.
fetch('flask-production-domain.com/api/endpoint')
My question is, would you recommend a way of deploying to production/setting up local development such that I don't have to rewrite the code base when I deploy to production?
By the way my app.yaml files read as such:
# api app.yaml
runtime: python38
env_variables:
none_of: "your_business"
# frontend app.yaml
runtime: nodejs12
service: banana
handlers:
- url: /static
static_dir: build/static
- url: /(.*\.(json|ico|js))$
static_files: build/\1
upload: build/.*\.(json|ico|js)$
- url: .*
static_files: build/index.html
upload: build/index.html
Thanks in advance.
EDIT
I've accepted dishant's answer, but I've done it slightly differently than they've suggested.
Firstly, these two resources are incredible. This guy wrote "the book" on Flask:
https://www.youtube.com/watch?v=Q2eafQYgglM
https://www.youtube.com/watch?v=qEfduVAQ8FQ&t=1289s
In the second video, he describes two methods of deploying. The first one is similar to what dishant suggested. In the video Miguel describes this option as his lesser favorite of the two he describes, as serving the files from python is slow. For me, it works well for now, as it's the "easier" of the two, and it seems like you can easily switch down the road.
So, I've made the following changes:
I changed the directory structure to:
Top Level
-> directories after using create-react-app
application_folder
-> api
-> -> app.yaml
-> -> main.py
Instead of creating the routing in the app.yaml file, I added the following to the main.py fie:
app = Flask(__name__, static_folder="build", static_url_path="/")
#app.route("/")
def index():
return app.send_static_file("index.html")
I added the following line to the package.json to create a script to build and move the static files to the api directory.
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"create-app": "yarn build && rm -r api/build && cp -r build api/build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
So now I run yarn create-app to build.
I'm going to look into Travis for CI/CD, since I've used that before.
From https://create-react-app.dev/docs/proxying-api-requests-in-development/:
Keep in mind that proxy only has effect in development (with npm
start), and it is up to you to ensure that URLs like /api/todos point
to the right thing in production. You don’t have to use the /api
prefix. Any unrecognized request without a text/html accept header
will be redirected to the specified proxy.
You would not serve your frontend from memory in a deployed environment(app engine). Instead, you should build your app and package it along with the Flask app and set routes in app.yaml to point to frontend and backend properly.
You only need 1 app.yaml file.
Example:
Build your react app using npm run build
Copy the build files to your flask app in a new folder called build.
app.yaml:
runtime: python38
env_variables:
none_of: "your_business"
handlers:
# frontend
- url: /static
static_dir: build/static
- url: /(.*\.(json|ico|js|html))$
static_files: build/\1
upload: build/.*\.(json|ico|js|html)$
# backend
- url: /.*
script: auto
You can leverage ci/cd services like cloud build or Jenkins to package the apps and deploy them on app engine.
If you want to use proxy within your deployment, you don't have many options indeed. For example, most of the situations where you need to use proxy with App Engine, it's needed to use an instance on Compute Engine, so you can set static IP and configure better it - as explained in this case here.
Another option would be to deploy your API's backend code with Extensible Service Proxy (ESP to an App Engine Flex environment, using Cloud Endpoints. As explained here, you can configure like this, so ESP can obtain your API's Endpoints configuration, which allows ESP to proxy requests and responses so that Endpoints can manage your API.
These are some different approaches that might give you an idea of how to do it, working more as a starting point than as a solution. However, you are kind of limited on your options here, as your use case is specific and GAE has some specific settings available as well. I would recommend you to keep doing what is working right now and then, give it a try in one of this other options.
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.