How to deploy a Docusaurus website to Google App Engine? [closed] - google-app-engine

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 2 months ago.
The community reviewed whether to reopen this question 2 months ago and left it closed:
Original close reason(s) were not resolved
Improve this question
I built a production-ready Docusaurus website using docusaurus build (or npm run build). How can I deploy it to Google App Engine as a static website?

In your project root folder, create an app.yaml file with the following contents:
# runtime could be anything, it won't create any instances as everything is static
runtime: python38
handlers:
# static files with a URL ending with a file extension
# (e.g. favicon.ico, manifest.json, jylade.png)
- url: /(.*\..+)$
static_files: build/\1
upload: build/(.*\..+)$
# index page
- url: /
static_files: build/index.html
upload: build/index.html
# anything that ends with a slash (e.g. /docs/)
- url: /(.*)/$
static_files: build/\1/index.html
upload: build/(.*)
# anything else (e.g. /docs)
- url: /(.*)
static_files: build/\1/index.html
upload: build/(.*)
Then, create a .gcloudignore file:
# ignore everything
/[!.]*
/.?*
# except for the build folder
!/build/**
Last, run the following command to deploy the site:
gcloud app deploy app.yaml --project <YOUR GCP PROJECT>

Related

Google App Engine -- Deploying a new version will make my site go down

I have a flask + react application that is deployed on Google App Engine. Recently, I discovered that each time I deployed a new version to the GAE, my site would go down for a few hours, and several web pages cannot load correctly. I checked the console, the web application is trying to get the static files from the last version, which resulted in a 404 Error. Can anyone help me to find what the problem is?
Here is my app.yaml file:
runtime: python37
env: standard
default_expiration: "5m"
entrypoint: gunicorn -b :$PORT main:app --timeout 150
instance_class: F4
automatic_scaling:
max_instances: 5
min_instances: 1
min_pending_latency: "5s"
target_cpu_utilization: 0.75
inbound_services:
- warmup
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))$
static_files: build/\1
upload: build/.*\.(json|ico)$
- url: /
static_files: build/index.html
upload: build/index.html
- url: /.*
script: auto
I am here to answer my own question. I seem to find the problem and how to solve it.
The main problem seems to be a caching issue. For the app.yaml settings, although the default expiration time is set to 5m, the url with path don't have the expiration set. For example, page www.example.com/about will have a different caching time than the js package. This means when a new build folder is deployed, the js packages have been changed, but the www.example.com/about page generated by your backend application is still the old version, and it will try to request the js package from the previous build foler. Thus, causing the 404 error.
The way to solve this is to set the expiration time for your response generated by your backend application. I am using the Flask environment, so the code for that is (credited to this answer)
response["Cache-Control"] = "no-cache, no-store, must-revalidate" # HTTP 1.1.
response["Pragma"] = "no-cache" # HTTP 1.0.
response["Expires"] = "0" # Proxies.
the web application is trying to get the static files from the last version
So are these files that were removed in your new version that you just deployed?
In general, it sounds like your problem has to do with stale browser caches. I wouldn't remove static assets from your deployed app right away specifically for this reason.
I see you're using ReactJS. Are you using the features that combine all the js and css into a single file whose name contains a hash? This should help with cache-busting.
The part that's confusing is that you said it would go down for a few hours. You have default_expiration: "5m" in your app.yaml so a few hours sounds a bit extreme. Are you not doing a hard reload (or even a full reload) when you are trying to check out your changes in your browser?

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

How to serve source folder on Google App Engine?

The below app.yaml pasted below gives error:
sre_constants.error: cannot refer to open group
application: villagegamedev
runtime: python27
api_version: 1
threadsafe: yes
handlers:
- url: /(.*)
static_files: ./\1
upload: ./\1
My express purpose for this test is to serve the source folder. When I Google this effort, the search only comes up with all the docs that say "App Engine does not serve files directly out of your application's source directory unless configured to do so." So how do I configure it to do so?
handlers:
- url: /
static_dir: static
Then just put all of the files you want to serve in a directory named static.
This link gives a full description.
Basically what you should do is;
Create a project on google cloud platform
Create a directory on your computer with the same name as the
project created above. Create your app.yaml file here.
Paste this code into the app.yaml file
runtime: python27
api_version: 1
threadsafe: true
handlers:
- url: /
static_files: www/index.html
upload: www/index.html
- url: /(.*)
static_files: www/\1
upload: www/(.*)
Install the google sdk into this folder (browse and select this
folder when prompted during installation).
Create a directory named www in your project folder. Save your static website files here.
Start up the google cloud sdk on your computer and run the following command
gcloud app deploy
7.run gcloud app browse to see your website in your browser.
Hope that helps!

How to write app.yaml for vast php project?

I have a ready php website. For that website I am writing app.yaml for google app engine.
I read so many answers but it doesnt help me.
I am facing problem with php files under various subfolders in libraries folder.
In index.php, i accept rss feed url and process it for full text feed by calling other php files. but getting this error.
/makefulltextfeed.php?url=https%3A%2F%2Fnews.google.co.in%2Fnews%3Fpz%max
=10&links=preserve&exc=&submit=Create+Feed was not found on this server.
How to write app.yaml for all php files which comes under various sub-folders??
Do i have to write handlers: for all individual php files??
I am stuck here for whole day.
I am new to this topic. So if you find this as stupid question please forgive me.
Here is my app.yaml
application: xxxx-xxxx-90212
version: alpha-001
runtime: php
api_version: 1
handlers:
- url: /
script: index.php
- url: /config
script: config.php
- url: /makefulltextfeed
script: makefulltextfeed.php
- url: /css
static_dir: css
- url: /js
static_dir: css
- url: /images
static_dir: images
I have php files in subfolder. How to write app.yaml for that.
As described here you can use this notation to match all root path, that ends with .php, to a php script
# Serve php scripts.
- url: /(.+\.php)$
script: \1
This config assume that each your URL ends with .php, you can modify url regex to catch all urls (I test only the regex but I think it's works :) )
# Serve ALL php scripts.
- url: /((.+\/).*)$
script: \1.php
Or you can simulate httpd mod_rewrite as described here.

Resources