URLs not found after deploying create-react-app build to Google Cloud Platform - reactjs

I've uploaded a create-react-app build (with an app.yaml file) to a GCP bucket. The app has then been deployed on a App Engine instance using the cloud shell.
Going to the app's root URL works fine. But going to example.com/anything returns the following error:
Error: Not Found
The requested URL /anything was not found on this server.
App.yaml file looks like this:
runtime: python27
api_version: 1
threadsafe: true
handlers:
- url: /(.*\.(html|css|js))
static_files: build/\1
upload: build/(.*\.(html|css|js))
- url: /
static_files: build/index.html
upload: build/index.html

You don't have a handler for /anything. If you want a catch-all url, use regex type handler:
- url: /.*
static_files: build/index.html
upload: build/index.html
or, if you want to serve them anything.html as a static file, put it in your build dir, and navigate to /anything.html. Your first handler is set up to map that url.

Related

Issue with app.yaml to deploy static website on App Engine, images won't display

I'm trying to deploy my web app on Google App Engine.
My project follows this structure
The app.yaml has this content:
runtime: nodejs14
handlers:
- url: /
static_files: www/index.html
upload: www/index.html
- url: /(.*)
static_files: \1
upload: (.*)
But, when I execute gcloud app deploy --project=MY PROJECT, and open my site, it looks like this:
I assume there is an error in the app.yaml file, but I don't understand what. Any ideas?
Update your second URL handler to:
- url: /(.*\.(svg|png))$
static_files: www/images/\1
upload: www/images/.*\.(svg|png)$
Then reference your img src like this:
<img src="/test.png" alt="oops" width="104" height="142">
One thing to add, you can also use static_dir as your second URL handler instead. This way it's easier organize static files per directory. Change your app.yaml to:
runtime: nodejs14
handlers:
- url: /
static_files: www/index.html
upload: www/index.html
- url: /static-img
static_dir: www/images
In that example, what happens is that images located at www/images are mapped on URLs beginning at /static-img. You can use that URL to reference your img src in your HTML. For example:
<img src="/static-img/test.png" alt="oops" width="104" height="142">
Learn more at: https://cloud.google.com/appengine/docs/standard/nodejs/config/appref#handlers_static_dir

GCloud Error: Not Found The requested URL was not found on this server

I followed this steps to deploy my angular 8 application in Google Cloud
https://medium.com/#karthiksagar/how-to-deploy-angular-8-app-on-google-cloud-platform-gcp-cdd79e5cc5cf
My app.yaml is as follows
runtime: python27
api_version: 1
threadsafe: true
handlers:
- url: /
static_files: sofbox-angular/index.html
upload: sofbox-angular/index.html
- url: /
static_dir: sofbox-angular
I have placed the app.yaml file inside dist/ directory as mentioned.
I am able to access the main url- http://www.myridemate.com/
but when clicked on blog the link is not accessible - http://www.myridemate.com/blog
It gives below error
Error: Not Found The requested URL /blog was not found on this server.
Tried adding extra handler for /blog in app.yaml and it didn't work.
This same code is working in my local and also in hostgator - https://www.myridemate.alexvijayraj.com/blog
Not sure what I am missing here. Is there some extra configuration required in app.yaml or anything in GCP?
Error Message in App Engine Logs:
{
"time": "2020-09-17T03:58:28.682252Z",
"severity": "WARNING",
"logMessage": "Static file referenced by handler not found: sofbox-angular/blog"
}
The answer in this thread worked for me. Angular 6 routes not found on Google App Engine
Remember to remove the two handlers that are already on the .yaml file (-url: ...)
handlers:
- url: /(.*\.(js|css|svg|png)(|\.map))$
static_files: dist/\1
upload: dist/(.*)(|\.map)
- url: /.*
static_files: dist/index.html
upload: dist/.*

Vue production URL redirection returning 404 on gae

I have a vue application that I want to deploy to google app engine. I have deployed it and everything works as it should but when I manually enter in a url the app responds with a 404. Is there any way I can setup the app.yaml to allow for the redirection to the SPA from a url?
# GAE yml setup
runtime: python27
api_version: 1
threadsafe: true
# URL handlers
handlers:
- url: /
static_files: dist/index.html
upload: dist/index.html
- url: /(.*)
static_files: dist/\1
upload: dist/(.*)
- url: .*
static_files: dist/index.html
upload: dist/index.html
# GAE has a limit of 10,000 files so ignore node_modules and anything else thats not neccassary
skip_files:
- node_modules/
- .gitignore
- src/
- public/
- babel.config.js
- ^(.*/)?\..*$
How can I redirect with handlers to a specific page on the SPA?
Here is an example about what you are trying to achieve.
This specific solution (redirect all URLs to a single URL) works in two steps, modifying your app.yaml and adding some source in the .py file.
In the app.yaml, by adding the handlers: "App Engine can handle URLs by executing application code, or by serving static files uploaded with the code, such as images, CSS, or JavaScript."
handlers:
- url: /.*
script: main.py
And in the .py file, by adding the 'rule' to redirect.
class AllHandler(webapp.RequestHandler):
def get(self):
self.redirect("http://example.com", True)
application = webapp.WSGIApplication([('/.*', AllHandler)])

google app engine: url not found on this server/404 error

I have code cloned from GitHub Zorya. I just added a www folder and an index.html file in it as I read somewhere that error was because there was no www directory.
Here's how my app structure looks like:
My app.yaml file:
runtime: python27
api_version: 1
threadsafe: true
service: default
builtins:
- deferred: on
# Handlers define how to route requests to your application.
handlers:
- url: /api/v1/(.*)
script: main.app
- url: /tasks/(.*)
script: main.app
- url: /
static_files: build/index.html
upload: build/index.html
- url: /favicon\.png
static_files: build/favicon.png
upload: build/favicon\.png
# unused for now
# - url: /service-worker\.js
# static_files: build/service-worker.js
# upload: build/service-worker\.js
- url: /manifest\.json
static_files: build/manifest.json
upload: build/manifest\.json
- url: /static/(.*)
static_files: build/static/\1
upload: build/static/(.*)
- url: .*
static_files: build/index.html
upload: build/index.html
# here if you want to use them. See
# https://developers.google.com/appengine/docs/python/tools/libraries27 for
# a list of libraries included in the SDK. Third party libs that are *not*
part
# of the App Engine SDK don't need to be listed here, instead add them to
your
# project directory, either as a git submodule or as a plain subdirectory.
#libraries:
#- name: jinja2
# version: latest
libraries:
- name: ssl
version: latest
- name: numpy
version: "1.6.1"
skip_files:
- ^\.git$
- ^\client$
- ^\venv$
# needed for dev_appserver.py, tracks too many changes otherwise
- .*/zorya/client
Here's one of the errors that I see in the logs :
Your requests for /favicon.ico (shown in the comment log) and for / (from the logs image) both match the .* handler pattern, for which you have configured serving a build/index.html static resource.
But you don't have a build directory under the zorya app/service directory, so your static resource doesn't exist. Hence the 404 error.
Maybe you mean to use www instead of build? If so you should match the name of the directory with the one used in the handler pattern. You could just rename the www directory to build (no, you don't need to use that exact name).
In particular for the favicon error, you may want to specify a handler for favicon.ico instead of favicon.png

ImportError using Flask and GAE

I'd like the app engine to associate index.html with the root URL and main.app with /stats. Here's my app.yaml:
runtime: python27
api_version: 1
threadsafe: yes
handlers:
- url: /
static_files: index.html
upload: index.html
- url: /stats.*
script: main.app
- url: /(.*)
static_files: \1
upload: (.*)
If the URL is /stats, I'd like to print a short message. Here's the code in main.py:
import logging
from flask import Flask
app = Flask(__name__)
#app.route('/stats')
def stats():
return 'Hello World!'
When I try to access /stats, the GCP log says ImportError: No module named main. How can I fix this?
Looks like you entered in a conflict between the /stats handler and the /(.*) handler. As per the documentation for static_files:
If a static file path matches a path to a script used in a dynamic handler, the script will not be available to the dynamic handler.
So, either remove the /(.*) handler, or, as you intent to serve static files with it, I recommend using a handler like the one described in the documentation:
- url: /(.*\.(gif|png|jpg|whateverextension))$
static_files: static/\1
upload: static/.*\.(gif|png|jpg|whateverextension)$
Also, don't forget to add the Flask library to your app.yaml file:
libraries:
- name: flask
version: 0.12

Resources