Here's the the app.yaml for the deploying build pages to gcloud:
runtime: nodejs16
handlers:
# Serve all static files with url ending with a file extension
- url: /(.*\..+)$
static_files: build/\1
upload: build/(.*\..+)$
# Serve all static images with url ending with a image extension
- url: /(.+\.(gif|png|jpg))$
static_files: build/images/\1
upload: build/images/.+\.(gif|png|jpg)$
# Catch all handler to index.html
- url: /.*
static_files: index.html
upload: index.html
Here's the build structure for the build:
Here are the build scripts for the project:
"scripts": {
"dev-server": "encore dev-server",
"dev": "encore dev",
"watch": "encore dev --watch",
"build": "encore production --progress"
}
When I deploy app on the gcloud here's the blank page I can find the logo png url but it's not being loaded with other components:
https://mintdapp.uc.r.appspot.com/build/images/logo.png
is the image address of the logo
Each service in your app has its own app.yaml file, which acts as a descriptor for its deployment. You must first create the app.yaml file for the default service before you can create and deploy app.yaml files for additional services within your app. For Node.js, the app.yaml is required to contain at least a runtime entry. For a brief overview, see Defining Runtime Settings . To handle deep links, you need a catch-all rule at the end to always serve index.html . However, before that, you need a rule which maps all your static content.
runtime: nodejs16 # or another supported version
instance_class: F2
env_variables:
BUCKET_NAME: "example-gcs-bucket"
handlers:
- url: /example1
static_dir: example1
- url: /.*
secure: always
redirect_http_response_code: 301
script: auto
You may also try rearranging your static assets in a folder rather than under the root. Create a directory named "staticfiles" and move all html files to it(except the homepage.html) example as below; and then try redeploying
url: /(.*\.html)
mime_type: text/html
static_files: staticfiles/\1
upload: staticfiles/(.*\.html)
Related
I created web app that consist with two separate parts: server and client. And I want to deploy it to google cloud with app engine.
I already did it, but the main problem is unworking env_variables that I need for correct work of application that I defined in .yaml files.
I don't understand why the env variables doesn't work, If I do it in accordance to docs.
I wrote .yaml file to each part. Here the file structure:
./
--client/
----source_files...
----client.yaml
--server/
----source_files...
----api.yaml
--dispatch.yaml
Here the content of each file.
client.yaml:
runtime: nodejs16
service: default
handlers:
- url: /(.*\..+)$
static_files: build/\1
upload: build/(.*\..+)$
- url: /.*
static_files: build/index.html
upload: build/index.html
env_variables:
API_LINK: "https://gcloudezample-11111.lm.r.appsport.com"
api.yaml:
runtime: nodejs16
service: api
env: standard
env_variables:
MONGO_DB_PWD: "db_password"
dispatch.yaml:
dispatch:
- url: '*/api'
service: api
Then I deployed this parts in .yaml files order above.
The result is working frontend but failed api requests, because the wrong request URL: http://localhost:3001/v1/my-route
Screenshot
It's a common misunderstanding of how a website works. Take 2 sec and think about it: What are doing your frontend part?
Let me help
handlers:
- url: /(.*\..+)$
static_files: build/\1
upload: build/(.*\..+)$
- url: /.*
static_files: build/index.html
upload: build/index.html
It serves only static files. Therefore, only static file means no processing, no instances, no variable definition in the runtime context because only static files are served.
The runtime is on the client browser that run the JS code.
Note: the counterpart great advantage, that the static page serving is free (in term of resource usage because there is no instance up and running to serve your files; the egress is billed)
So now, how to solve this?
Simply build your static files with the API_LINK value INSIDE the static code.
I have these files: index.php, filecallup.js, image.png, userprofile.php deployed in my xxx.appspot.com.
The index.php file is expected to collect some URL query variables and open the userprofile.php.
My problem is that when I click on the link (https://xxx.appspot.com/?user=peter) it still points to the index.php file and doesn't load userprofile.php.
I think it's a problem with my app.yaml file because it renders well in other servers except for GAE.
Here is the app.yaml code:
#Use the PHP 7.3 runtime (BETA) by replacing "php72" below with "php73"
runtime: php72
#entrypoint: serve main.php
service: default
#threadsafe: true
handlers:
# Serve a directory as a static resource.
#- url: /stylesheets
# static_dir: stylesheets
# Serve images as static resources.
- url: /(.+\.(gif|png|jpg))$
static_files: \1
upload: .+\.(gif|png|jpg)$
- url: /(.+\.(htm|html|css|js))$
static_files: \1
upload: .+\.(htm|html|css|js)$
# Serve your app through a front controller at index.php or public/index.php.
- url: /mail.php
script: auto
Here is the index.php code:
<?php
some codes here`
header('Location:userprofile.php')
>?
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)])
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
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.