I am trying to deploy the react app on gcloud. The app builds and starts normally when I do it locally.
If I npm start from gcloud console it's also available.
The problem is that when I build the app and deploy it to App Engine, the redirects does not work.
I have a google sign in added to the page but when I click Sign In, instead of redirecting, page says that the URL was not found and the url string after {app-url}/ consists of the contents of index.html.
I have tried different variations of the app.yaml file. The one I'm using right now looks like this.
runtime: nodejs16
handlers:
# Serve all static files with url ending with a file extension
- url: /(.*\..+)$
static_files: build/\1
upload: build/(.*\..+)$
# Catch all handler to index.html
- url: /.*
static_files: build/index.html
upload: build/index.html
I'm a noob to gcloud so would appreciate any help.
Thanks
Related
after searching a lot on the internet I have found the next GAE yaml deploy file to deploy a react web on most web pages (nodejs runtime):
# [START handlers]
handlers:
# Serve all static files with url ending with a file extension
- url: /(.*\..+)$
static_files: build/\1
upload: build/(.*\..+)$
secure: always
# Catch all handler to index.html
- url: /.*
static_files: build/index.html
upload: build/index.html
secure: always
redirect_http_response_code: 301
# [END handlers]
With this file, all works correctly in a GAE flex environment but not in standard environment and I get the next error after deploy when an url include dots in the path: Error: not found
I have tried a lot of combinations without success, for example, I think the first url handle may be causing the problem but the next code doesn't work either:
# [START handlers]
handlers:
# Catch all handler to index.html
- url: /.*
static_files: build/index.html
upload: build/index.html
secure: always
# [END handlers]
But this handlers only load a white page.
Doing research, the only conclusion I get is that GAE flex environment uses Debian and standard environment uses Ubuntu, Otherwise I don't know what could be going on.
PD: I tried on nodejs12, nodejs14 and nodejs16 runtimes with B1 and F1 instance_class.
Can someone help me please?
Thanks
I am unable to deploy my Nuxt JS SSR app to Google Cloud App Engine.
The app is able to run locally both in dev and production mode.
The Nuxt JS documentation suggests using the app.yaml as follows:
runtime: nodejs10
instance_class: F2
handlers:
- url: /_nuxt
static_dir: .nuxt/dist/client
secure: always
- url: /(.*\.(gif|png|jpg|ico|txt))$
static_files: static/\1
upload: static/.*\.(gif|png|jpg|ico|txt)$
secure: always
- url: /.*
script: auto
secure: always
env_variables:
HOST: '0.0.0.0'
However, the Google Cloud documentation suggests using nodejs14 as well as the env_variables for the bucket name which I assume is the same name as the staging bucket automatically created by Google App Engine.
runtime: nodejs14 # or another supported version
instance_class: F2
env_variables:
BUCKET_NAME: "staging.myapp.appspot.com"
handlers:
- url: /_nuxt
static_dir: .nuxt/dist/client
secure: always
- url: /(.*\.(gif|png|jpg|ico|txt))$
static_files: static/\1
upload: static/.*\.(gif|png|jpg|ico|txt)$
secure: always
- url: /.*
script: auto
secure: always
When deploying with both of these app.yaml configurations it deploys successfully to Google App Engine however upon visiting the URL for the instance (myapp.uk.r.appspot.com) I am met with the error as follows:
Error: Server Error
The server encountered an error and could not complete your request.
Please try again in 30 seconds.
And when visiting staging.myapp.appspot.com I am met with a range of errors from a generic Google 404 error to a certificate error. Does anyone have any idea about the correct app.yaml configuration for deploying a Nuxt JS SSR app to Google Cloud App Engine?
Does anyone have any idea about the correct app.yaml configuration for deploying a Nuxt JS SSR app to Google Cloud App Engine?
I replicated your case and deployed the basic tutorial deploying of Nuxt JS app in App Engine using your provided app.yaml configuration. Both configuration are working even I reduced the the instance_class from F2 to F1, its still working well.
As of now, the recommended version of nodejs is nodejs14 but the app is still working in App Engine Standard even the version is nodejs10. The env_variables is optional, you can define environment variables in your app.yaml file to make them available or use it inside your app.
Error:
Error: Server Error
The server encountered an error and could not complete your request.
Please try again in 30 seconds.
The 500 error or server error is hard to find the cause. Look for the logs in Cloud Logging or click this link to direct go to console. Make sure that you are in GAE application > your service name > App Engine Version. Start looking for error appearing when accessing your application and look for error cause description. If you haven't find any try to switch to all logs.
Please note, it also requires the following API is already enabled:
App Engine API
Compute Engine API
Cloud Build API
Additional troubleshooting, double check the listening port on your application.
Please check the application logs to make sure whats happen on GAE
gcloud app logs tail
Then try my yaml file for nuxt SSR too:
runtime: nodejs14
service: nuxt
instance_class: F1
handlers:
- url: /_nuxt
static_dir: .nuxt/dist/client
secure: always
- url: /(.*\.(gif|png|jpg|ico|txt))$
static_files: static/\1
upload: static/.*\.(gif|png|jpg|ico|txt)$
secure: always
- url: /.*
script: auto
secure: always
Solved the issue it seems to have been an oversight regarding specifying a different server port in nuxt.config.js of 8000 rather than the default.
By looking at the logs using:
gcloud app logs tail
This error became apparent:
✖ Nuxt Fatal Error
Error: listen EADDRNOTAVAIL: address not available *.*.*.*:8000
Try this configuration:
runtime: nodejs12
instance_class: F2
handlers:
- url: /_nuxt
static_dir: .nuxt/dist/client
secure: always
- url: /(.*\.(gif|png|jpg|ico|txt))$
static_files: static/\1
upload: static/.*\.(gif|png|jpg|ico|txt)$
secure: always
- url: /.*
script: auto
secure: always
env_variables:
HOST: '0.0.0.0'
I have an nuxt app running in App Engine, and this is my Yaml config.
I suggest you to check if your application is Enabled in GCP/App Engine/Configurations=>Deactivate App field.
I have a skeleton Google App Engine running on the URL provided by GAE in the format of "myproject.appspot.com". I have two services - one running a backend Node/Express server, and another for a React front-end. The backend service has url "api-dot-myproject.appspot.com" and the front end "client-dot-myproject.appspot.com". I have independently deployed each service along with the root-level dispatch.yaml, and have gotten these GAE-provided urls to work. When I go to the URLs provided by Google, my deployed services work as intended. However, I've also tried used a custom domain from Google Domains which is causing me trouble. I've followed the instructionss provided by Google - I first bought the domain from Google, then added it to Google App Engine. My GAE app then provided me with A, AAAA, and CNAME records to add to my Google Domains "Custom resource records" which I did.
I then waited over 24 hours before trying to access mydomain.app (the domain name I purchased). However, attempting to access the page results in a 404 error.
I've been trying to figure this out for a while now, and I've searched through every previous stackoverflow question on this topic but wasn't able to resolve it. Any help would be greatly appreciated.
dispatch.yaml:
dispatch:
- url: "*client-dot-myproject.appspot.com/*"
service: client
- url: "*mydomain.app/*"
service: client
- url: "*api-dot-myproject.appspot.com/*"
service: api
- url: "*/*"
service: client
api.yaml
runtime: nodejs12
service: api
handlers:
- url: /api/
script: auto
- url: /
script: auto
client.yaml
runtime: nodejs12
service: client
handlers:
- url: /static/js/(.*)
static_files: build/static/js/\1
upload: build/static/js/(.*)
- url: /static/css/(.*)
static_files: build/static/css/\1
upload: build/static/css/(.*)
- url: /static/media/(.*)
static_files: build/static/media/\1
upload: build/static/media/(.*)
- url: /(.*\.(json|ico|png))$
static_files: build/\1
upload: build/.*\.(json|ico|png)$
- url: /
static_files: build/index.html
upload: build/index.html
http_headers:
Access-Control-Allow-Origin: "*"
- url: /.*
static_files: build/index.html
upload: build/index.html
http_headers:
Access-Control-Allow-Origin: "*"
Truly one of the dumbest mistakes - I had switched over gcloud projects at some point and forgot to reinitialize with gcloud init.
Rather than having an issue, this is more of a knowledge question. I've been diving deep on GAE's docs, Youtube videos and posts, on how to serve a full MERN stack app from a single App Engine service.
I honestly don't have a fine-grained understanding of what App Engine deployment does behind the scenes, but I understand that it exposes your service at port 8080 from a default route assigned (i.e. https://xxxxxxxx.uc.r.appspot.com).
Based on this knowledge, I thought it would be totally possible to statically serve a built React app and handle incoming queries from this same app through /graphql endpoint.
For instance:
This solves CORS since everything shares the same origin.
You limit yourself to a single App Engine service which allows you to remain on the free tier service :)
This is my project structure:
root/
app/
node_modules/
build/ <----- React app built
src/
App.js
index.js
...
server/ <----- In here is the Apollo Express Server v2.x.x serving app/build generated above^
index.js
package.json
node_modules/
app.yaml <---- This file tells App Engine what to do and which routes to expose
...
My app.yaml
runtime: nodejs12
env_variables:
PORT: 4000
handlers:
- url: /
static_files: app/build/index.html
upload: app/build/index.html
- url: /
static_dir: app/build
- url: /graphql
script: auto <---- Supposedly App Engine is smart enough to understand what to do with this route.
I am just not being able to query my App Engine service back from the served to React app.
Does anyone know if what I'm doing is even possible, or there's just no way to configure App Engine with Apollo Server to serve a static webapp + expose a /graphql endpoint at the same time.
Any suggestions or ideas are extremely welcome!
--------------------------------- Update ---------------------------------
After GAEfan suggestion, I updated the app.yaml file:
Yeah okay! I think this is indeed working, I just still get a few errors on the console about resources not found so, here is the internal structure of the build/
build/
static/
css/
js/
asset-manifest.json
favicon.ico
index.html
logo192.png
manifest.json
robots.txt
service-worker.js
I already added to this suggestion json|txt|map|ico resources in the same fashion.
- url: /(.*\.(gif|png|jpg|css|js|json|txt|map|ico))$
static_files: app/build/\1
upload: app/build/.*\.(gif|png|jpg|css|js|json|txt|map|ico)$
This resolved the not found resources issue. And your wildcards already resolved the /graphql endpoint. For some reason, the WebSocket handshake is not being correctly established, but I'm not sure if that's a direct limitation from App Engine, or that the protocol is blocked by default.
Does anyone have knowledge of Websockets over App Engine?
Still more questions, but I'll add this as a partial/temporary answer...
Your first 2 url handlers in app.yaml are duplicates. URL handling with match the first one, and send everything to ...index.html. I assume you have some js, css, or other static files in the build directory. Those will never be made available to the browser. So, you need to use better regex routing, with wildcards, etc.
Let's do these one at a time:
handlers:
- url: /$ # this '$' ends the match, so the url matches only the root domain
static_files: app/build/index.html
upload: app/build/index.html
Next, let's test for .js, .css, etc.:
- url: /(.*\.(gif|png|jpg|css|js))$
static_files: app/build/\1
upload: app/build/.*\.(gif|png|jpg|css|js)$
Then (assuming you have graphql working properly, you can send all other requests there:
- url: /graphql
script: auto
or even:
- url: /(.*) # catches everything else!
script: auto
Show the files or directory tree inside your /build directory, and we can make sure we've accounted for everything.
I have built a Flask app using Python 3.7. The setup works locally. When uploaded to GAE, I get an Internal Server Error. The GAE dashboard says index.html not found. Is this issue related to the app.yaml file?
My project structure is as follows:
root/
|-app.yaml
|-requirements.txt
|-main.py
|-other model files that feed into main.py
|-templates/
|-index.html
|-index2.html
|-js
|-css
|-images
app.yaml
runtime: python37
# [START handlers]
handlers:
- url: /.*
script: auto
- url: /index.html
static_files: templates/index.html
upload: Templates/index.html
- url: /templates
static_dir: Templates
- url: /(.*\.(css|js|png|jpg))
static_files: templates/\1
upload: templates/(.*)
# [END handlers]
The App Engine handlers element documentation states:
Patterns are evaluated in the order they appear in the app.yaml file, from top to bottom. The first mapping whose pattern matches the URL is the one used to handle the request.
Put the catch-all handler at the end.
The templates directory does not need to be added to the URL handlers.
The templates directory should be lower case as a matter of convention. In addition, in the event that URL handlers do need to reference templates, the app.yaml patterns are case sensitive (as mentioned by Dan Cornilescu), and using lowercase will help avoid mismatches.
The standard setup is to create a separate static (and/or assets) directory next to the templates directory. The static directory would contain files such as Javascript, CSS, and images.
Project Structure
root/
|-app.yaml
|-requirements.txt
|-main.py
|-other model files that feed into main.py
|-static/
|-js
|-css
|-images
|-templates/
|-index.html
|-index2.html
app.yaml
runtime: python37
handlers:
- url: /static
static_dir: static
- url: /.*
script: auto