I have 17 files in a images folder. I have created 17 rules for them, that I would like to simplify, i.e. make one rule that will work with regex or something else. Is there a way?
- url: /favicon.ico
static_files: images/favicon.ico
upload: images/favicon.ico
- url: /apple-touch-icon-57x57.png
static_files: images/apple-touch-icon-57x57.png
upload: images/apple-touch-icon-57x57.png
- url: /apple-touch-icon-60x60.png
static_files: images/apple-touch-icon-60x60.png
upload: images/apple-touch-icon-60x60.png
- url: /apple-touch-icon-72x72.png
static_files: images/apple-touch-icon-72x72.png
upload: images/apple-touch-icon-72x72.png
...
I ended up using these rules:
- url: /(apple-touch-icon.*\.(png))
static_files: images/\1
upload: images/(apple-touch-icon.*\.(png))
- url: /(android-chrome.*\.(png))
static_files: images/\1
upload: images/(android-chrome.*\.(png))
- url: /(mstile.*\.(png))
static_files: images/\1
upload: images/(mstile.*\.(png))
- url: /(favicon-.*\.(png))
static_files: images/\1
upload: images/(favicon-.*\.(png))
- url: /favicon.ico
static_files: images/favicon.ico
upload: images/favicon.ico
Take a look at the Google App Engine Boilerplate:
- url: /(\w*)/(apple-touch-icon.*\.(png))
static_files: bp_content/themes/\1/static/\2
upload: bp_content/themes/(\w*)/static/(apple-touch-icon.*\.(png))
That's the relevant source for your needs, and you might also pick up a few more tricks :)
Related
I deployed my app to App Engine and it works with the default subdomain that is auto generated. However, after going through the steps in the mapping a custom domain section of the docs I can't see it at the custom domain.
here's my app.yaml:
runtime: nodejs10
service: platform
automatic_scaling:
max_instances: 1
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: /.*
static_files: build/index.html
upload: build/index.html
Here are the errors I'm getting:
I am trying to deploy angular 7 app in app engine
Used ng deploy --prod to create deployment. Now deployed generated dist using app.yaml.
Content of app.yaml
runtime: python27
api_version: 1
threadsafe: yes
handlers:
- url: /
static_files: dist/index.html
upload: dist/index.html
- url: /
static_dir: dist
- url: /\w{3,}-?[^.\s]\w*
static_files: dist/index.html
upload: dist/index.html
This works perfectly fine if URL is unchanged i.e. domain.com but when url changed to domain.com/login or domain.com/profile then it generated 404 error
Error: Not Found
The requested URL /admin-dashboard was not found on this server.
To resolve redirection, I have added url pattern in app.yaml to match any urls and forward to dist/index.html
- url: /\w{3,}-?[^.\s]\w*
static_files: dist/index.html
upload: dist/index.html
But that is not helping. I am totally stuck. Please any pointer
#Christopher Peisert thanks a lot for your pointer. Here is the final app.yaml works for all types of URL patterns
runtime: python27
api_version: 1
threadsafe: yes
handlers:
- url: /
static_files: dist/index.html
upload: dist/index.html
- url: /\w+$
static_files: dist/index.html
upload: dist/index.html
- url: /(\w+-\w+)$
static_files: dist/index.html
upload: dist/index.html
- url: /(.*)$
static_files: dist/\1
upload: dist/(.*)
Try adding a catch-all URL handler after the default route:
handlers:
- url: /
static_files: dist/index.html
upload: dist/index.html
- url: /(.*)$
static_files: dist/\1
upload: dist/(.*)
See documentation on Handlers Element.
In case you're using PathLocationStrategy (html5 history) you need to have a handler to catch those dynamic routes
runtime: python37
handlers:
# index files
- url: /([^.]+)/?$ # urls with no dot in them
static_files: dist/index.html
upload: dist/index.html
# site root
- url: /
static_files: dist/index.html
upload: dist/index.html
# everything else
- url: /(.*)
static_files: dist/\1
upload: dist/(.*)
I can use Angular 2 to create basic front-end applications and can use python to create back-ends with endpoints on Google App engine. I can't however seem to figure out how to put the two together and deploy them with the cloud SDK.
Here is a basic example where I can't even host a simple angular2 app with no back-end calls on GAE. I have taken the dist folder after building with angular2 CLI and tried to connect to it with the app.yaml file. It seems to work in the browser developer (dev_appserver.py app.yaml) although I get some 404 errors in SDK with the GET requests to do with my index.html file I think. I then create a blank index.yaml file and try to deploy it but get a 404 Error at the appspot.com location. This is the app.yaml file:
application:
version:
runtime: python27
threadsafe: true
api_version: 1
handlers:
- url: /favicon\.ico
static_files: favicon.ico
upload: favicon\.ico
- url: (.*)/
static_files: dist\1/index.html
upload: dist
- url: (.*)
static_files: dist\1
upload: dist
I really have no idea what I am doing wrong. Do I need some kind of a main.application python back-end to connect to the dist files or? Do I need to include node modules or some other kind or files from Angular2? Any help would be massively appreciated! Thanks
For the latest versions of Angular 4 and App Engine I built the following:
service: stage
runtime: python27
api_version: 1
threadsafe: true
skip_files:
- ^(?!dist) # Skip any files not in the dist folder
handlers:
# Routing for bundles to serve directly
- url: /((?:inline|main|polyfills|styles|vendor)\.[a-z0-9]+\.bundle\.js)
secure: always
redirect_http_response_code: 301
static_files: dist/\1
upload: dist/.*
# Routing for a prod styles.bundle.css to serve directly
- url: /(styles\.[a-z0-9]+\.bundle\.css)
secure: always
redirect_http_response_code: 301
static_files: dist/\1
upload: dist/.*
# Routing for typedoc, assets and favicon.ico to serve directly
- url: /((?:assets|docs)/.*|favicon\.ico)
secure: always
redirect_http_response_code: 301
static_files: dist/\1
upload: dist/.*
# Any other requests are routed to index.html for angular to handle so we don't need hash URLs
- url: /.*
secure: always
redirect_http_response_code: 301
static_files: dist/index.html
upload: dist/index\.html
http_headers:
Strict-Transport-Security: max-age=31536000; includeSubDomains
X-Frame-Options: DENY
Looking for feedback on how this could be improved.
I now update the handlers in my app.yaml file to look like this for static uploads to the google cloud platform. There was issues with Angular Router if the regular expression wasn't like this. Dist folder is output from angular cli ng build:
handlers:
- url: /favicon.ico
static_files: dist/favicon.ico
upload: dist/assets/favicon.ico
- url: /(.*\.(gif|png|jpg|css|js)(|\.map))$
static_files: dist/\1
upload: dist/(.*)(|\.map)
- url: /(.*)
static_files: dist/index.html
upload: dist/index.html
UPDATE:
For production ng build --prod, this is how my app.yaml file would look:
runtime: python27
threadsafe: true
api_version: 1
handlers:
- url: /(.*\.(gif|png|jpeg|jpg|css|js|ico))$
static_files: dist/\1
upload: dist/(.*)
- url: /(.*)
static_files: dist/index.html
upload: dist/index.html
I would add any other file types in the dist folder to the regex grouping characters in the first handler: (gif|png|jpeg|jpg|css|js|ico)
For Angular 6, the file structure changed somewhat. The following is based on #Rob's answer, but updated for an Angular 6 with a service-worker enabled. Be sure to replace "my-app" with the folder name of your app.
service: stage
runtime: python27
api_version: 1
threadsafe: true
skip_files:
- ^(?!dist) # Skip any files not in the dist folder
handlers:
# Routing for bundles to serve directly
- url: /((?:runtime|main|polyfills|styles|vendor)\.[a-z0-9]+\.js)
secure: always
redirect_http_response_code: 301
static_files: dist/my-app/\1
upload: dist/my-app/.*
# Routing for bundle maps to serve directly
- url: /((?:runtime|main|polyfills|styles|vendor)\.[a-z0-9]+\.js\.map)
secure: always
redirect_http_response_code: 301
static_files: dist/my-app/\1
upload: dist/my-app/.*
# Routing for a prod styles.bundle.css to serve directly
- url: /(styles\.[a-z0-9]+\.css)
secure: always
redirect_http_response_code: 301
static_files: dist/my-app/\1
upload: dist/my-app/.*
# Routing for typedoc, assets, and favicon.ico to serve directly
- url: /((?:assets|docs)/.*|favicon\.ico)
secure: always
redirect_http_response_code: 301
static_files: dist/my-app/\1
upload: dist/my-app/.*
# Routing for service worker files serve directly
- url: /(manifest\.json|ngsw\.json|ngsw-worker\.js|safety-worker\.js|worker-basic\.min\.js|ngsw_worker\.es6\.js\.map)
secure: always
redirect_http_response_code: 301
static_files: dist/my-app/\1
upload: dist/my-app/.*
# Any other requests are routed to index.html for angular to handle so we don't need hash URLs
- url: /.*
secure: always
redirect_http_response_code: 301
static_files: dist/my-app/index.html
upload: dist/my-app/index\.html
http_headers:
Strict-Transport-Security: max-age=31536000; includeSubDomains
X-Frame-Options: DENY
It looks like your regular expression match is in the wrong spot. Try this format:
handlers:
- url: /favicon\.ico
static_files: favicon.ico
upload: favicon\.ico
- url: /
static_files: dist/index.html
upload: dist/index.html
- url: /(.*)
static_files: dist/\1
upload: dist/(.*)
This comes from testing and some oddities we encountered while creating the Static Hosting tutorial on App Engine.
Replace your app.yaml with the following. It will work!
application: you-app-name-here
version: 1
runtime: python
api_version: 1
default_expiration: "30d"
handlers:
- url: /(.*\.(appcache|manifest))
mime_type: text/cache-manifest
static_files: static/\1
upload: static/(.*\.(appcache|manifest))
expiration: "0m"
- url: /(.*\.atom)
mime_type: application/atom+xml
static_files: static/\1
upload: static/(.*\.atom)
expiration: "1h"
- url: /(.*\.crx)
mime_type: application/x-chrome-extension
static_files: static/\1
upload: static/(.*\.crx)
- url: /(.*\.css)
mime_type: text/css
static_files: static/\1
upload: static/(.*\.css)
- url: /(.*\.eot)
mime_type: application/vnd.ms-fontobject
static_files: static/\1
upload: static/(.*\.eot)
- url: /(.*\.htc)
mime_type: text/x-component
static_files: static/\1
upload: static/(.*\.htc)
- url: /(.*\.html)
mime_type: text/html
static_files: static/\1
upload: static/(.*\.html)
expiration: "1h"
- url: /(.*\.ico)
mime_type: image/x-icon
static_files: static/\1
upload: static/(.*\.ico)
expiration: "7d"
- url: /(.*\.js)
mime_type: text/javascript
static_files: static/\1
upload: static/(.*\.js)
- url: /(.*\.json)
mime_type: application/json
static_files: static/\1
upload: static/(.*\.json)
expiration: "1h"
- url: /(.*\.m4v)
mime_type: video/m4v
static_files: static/\1
upload: static/(.*\.m4v)
- url: /(.*\.mp4)
mime_type: video/mp4
static_files: static/\1
upload: static/(.*\.mp4)
- url: /(.*\.(ogg|oga))
mime_type: audio/ogg
static_files: static/\1
upload: static/(.*\.(ogg|oga))
- url: /(.*\.ogv)
mime_type: video/ogg
static_files: static/\1
upload: static/(.*\.ogv)
- url: /(.*\.otf)
mime_type: font/opentype
static_files: static/\1
upload: static/(.*\.otf)
- url: /(.*\.rss)
mime_type: application/rss+xml
static_files: static/\1
upload: static/(.*\.rss)
expiration: "1h"
- url: /(.*\.safariextz)
mime_type: application/octet-stream
static_files: static/\1
upload: static/(.*\.safariextz)
- url: /(.*\.(svg|svgz))
mime_type: images/svg+xml
static_files: static/\1
upload: static/(.*\.(svg|svgz))
- url: /(.*\.swf)
mime_type: application/x-shockwave-flash
static_files: static/\1
upload: static/(.*\.swf)
- url: /(.*\.ttf)
mime_type: font/truetype
static_files: static/\1
upload: static/(.*\.ttf)
- url: /(.*\.txt)
mime_type: text/plain
static_files: static/\1
upload: static/(.*\.txt)
- url: /(.*\.unity3d)
mime_type: application/vnd.unity
static_files: static/\1
upload: static/(.*\.unity3d)
- url: /(.*\.webm)
mime_type: video/webm
static_files: static/\1
upload: static/(.*\.webm)
- url: /(.*\.webp)
mime_type: image/webp
static_files: static/\1
upload: static/(.*\.webp)
- url: /(.*\.woff)
mime_type: application/x-font-woff
static_files: static/\1
upload: static/(.*\.woff)
- url: /(.*\.xml)
mime_type: application/xml
static_files: static/\1
upload: static/(.*\.xml)
expiration: "1h"
- url: /(.*\.xpi)
mime_type: application/x-xpinstall
static_files: static/\1
upload: static/(.*\.xpi)
# image files
- url: /(.*\.(bmp|gif|ico|jpeg|jpg|png))
static_files: static/\1
upload: static/(.*\.(bmp|gif|ico|jpeg|jpg|png))
# audio files
- url: /(.*\.(mid|midi|mp3|wav))
static_files: static/\1
upload: static/(.*\.(mid|midi|mp3|wav))
# windows files
- url: /(.*\.(doc|exe|ppt|rtf|xls))
static_files: static/\1
upload: static/(.*\.(doc|exe|ppt|rtf|xls))
# compressed files
- url: /(.*\.(bz2|gz|rar|tar|tgz|zip))
static_files: static/\1
upload: static/(.*\.(bz2|gz|rar|tar|tgz|zip))
# index files
- url: /(.+)/
static_files: static/\1/index.html
upload: static/(.+)/index.html
expiration: "15m"
- url: /(.+)
static_files: static/\1/index.html
upload: static/(.+)/index.html
expiration: "15m"
# site root
- url: /
static_files: static/index.html
upload: static/index.html
expiration: "15m"
first build your angular project by running the following command
--ng build prod
the after the build is done create an app.yaml file in the root folder of your project and paste the following code:
# [START runtime]
runtime: python27
threadsafe: yes
# [END runtime]
handlers:
- url: /(.+)
static_files: dist/\1
upload: dist/(.*)
- url: /
static_files: dist/index.html
upload: dist/index.html
# Temporary setting to keep gcloud from uploading not required files for
deployment
skip_files:
- ^node_modules$
- ^app\.yaml
- ^README\..*
- \.gitignore
- ^\.git$
- ^grunt\.js
- ^src$
- ^e2e$
- \.editorconfig
- ^karma\.config\.js
- ^package\.json
- ^protractor\.conf\.js
- ^tslint\.json
after this run:
gcloud app deploy
If you're using custom fonts, you may use this template:
handlers:
# Routing for bundles to serve directly
- url: /(.*\.(gif|png|jpeg|jpg|css|js|ico))$
static_files: dist/\1
upload: dist/(.*)
- url: /assets/fonts/(.*\.(eot|woff|woff2|svg))$
static_files: dist/assets/fonts/\1
upload: dist/assets/fonts/(.*)
- url: /.*
static_files: dist/index.html
upload: dist/index.html
I just deployed a website for testing on Google Appengine.
Using google App Engine Launcher Its successfully done.
Now I tried to open the deployed website, please check here https://acuteservice-1260.appspot.com the internal pages are not opening.
Below is my APP YAML file
application: acuteservice-1260
version: 1
runtime: php55
api_version: 1
threadsafe: yes
handlers:
- url: /(.*\.(gif|png|jpg|ico|js|css|eot|svg|ttf|woff))
static_files: \1
upload: (.*\.(gif|png|jpg|ico|js|css|eot|svg|ttf|woff))
- url: /favicon\.ico
static_files: favicon.ico
upload: favicon\.ico
- url: .*
script: index.php
Please try below YAML, all static files should go to "static" folder.
application: acuteservice-1260
version: 1
runtime: python
api_version: 1
default_expiration: "30d"
handlers:
- url: /(.*\.(appcache|manifest))
mime_type: text/cache-manifest
static_files: static/\1
upload: static/(.*\.(appcache|manifest))
expiration: "0m"
- url: /(.*\.atom)
mime_type: application/atom+xml
static_files: static/\1
upload: static/(.*\.atom)
expiration: "1h"
- url: /(.*\.crx)
mime_type: application/x-chrome-extension
static_files: static/\1
upload: static/(.*\.crx)
- url: /(.*\.css)
mime_type: text/css
static_files: static/\1
upload: static/(.*\.css)
- url: /(.*\.eot)
mime_type: application/vnd.ms-fontobject
static_files: static/\1
upload: static/(.*\.eot)
- url: /(.*\.htc)
mime_type: text/x-component
static_files: static/\1
upload: static/(.*\.htc)
- url: /(.*\.php)
mime_type: text/html
static_files: static/\1
upload: static/(.*\.php)
expiration: "1h"
- url: /(.*\.ico)
mime_type: image/x-icon
static_files: static/\1
upload: static/(.*\.ico)
expiration: "7d"
- url: /(.*\.js)
mime_type: text/javascript
static_files: static/\1
upload: static/(.*\.js)
- url: /(.*\.json)
mime_type: application/json
static_files: static/\1
upload: static/(.*\.json)
expiration: "1h"
- url: /(.*\.m4v)
mime_type: video/m4v
static_files: static/\1
upload: static/(.*\.m4v)
- url: /(.*\.mp4)
mime_type: video/mp4
static_files: static/\1
upload: static/(.*\.mp4)
- url: /(.*\.(ogg|oga))
mime_type: audio/ogg
static_files: static/\1
upload: static/(.*\.(ogg|oga))
- url: /(.*\.ogv)
mime_type: video/ogg
static_files: static/\1
upload: static/(.*\.ogv)
- url: /(.*\.otf)
mime_type: font/opentype
static_files: static/\1
upload: static/(.*\.otf)
- url: /(.*\.rss)
mime_type: application/rss+xml
static_files: static/\1
upload: static/(.*\.rss)
expiration: "1h"
- url: /(.*\.safariextz)
mime_type: application/octet-stream
static_files: static/\1
upload: static/(.*\.safariextz)
- url: /(.*\.(svg|svgz))
mime_type: images/svg+xml
static_files: static/\1
upload: static/(.*\.(svg|svgz))
- url: /(.*\.swf)
mime_type: application/x-shockwave-flash
static_files: static/\1
upload: static/(.*\.swf)
- url: /(.*\.ttf)
mime_type: font/truetype
static_files: static/\1
upload: static/(.*\.ttf)
- url: /(.*\.txt)
mime_type: text/plain
static_files: static/\1
upload: static/(.*\.txt)
- url: /(.*\.unity3d)
mime_type: application/vnd.unity
static_files: static/\1
upload: static/(.*\.unity3d)
- url: /(.*\.webm)
mime_type: video/webm
static_files: static/\1
upload: static/(.*\.webm)
- url: /(.*\.webp)
mime_type: image/webp
static_files: static/\1
upload: static/(.*\.webp)
- url: /(.*\.woff)
mime_type: application/x-font-woff
static_files: static/\1
upload: static/(.*\.woff)
- url: /(.*\.xml)
mime_type: application/xml
static_files: static/\1
upload: static/(.*\.xml)
expiration: "1h"
- url: /(.*\.xpi)
mime_type: application/x-xpinstall
static_files: static/\1
upload: static/(.*\.xpi)
# image files
- url: /(.*\.(bmp|gif|ico|jpeg|jpg|png))
static_files: static/\1
upload: static/(.*\.(bmp|gif|ico|jpeg|jpg|png))
# audio files
- url: /(.*\.(mid|midi|mp3|wav))
static_files: static/\1
upload: static/(.*\.(mid|midi|mp3|wav))
# windows files
- url: /(.*\.(doc|exe|ppt|rtf|xls))
static_files: static/\1
upload: static/(.*\.(doc|exe|ppt|rtf|xls))
# compressed files
- url: /(.*\.(bz2|gz|rar|tar|tgz|zip))
static_files: static/\1
upload: static/(.*\.(bz2|gz|rar|tar|tgz|zip))
# index files
- url: /(.+)/
static_files: static/\1/index.php
upload: static/(.+)/index.php
expiration: "15m"
- url: /(.+)
static_files: static/\1/index.php
upload: static/(.+)/index.php
expiration: "15m"
# site root
- url: /
static_files: static/index.php
upload: static/index.php
expiration: "15m"
- url: .*
script: index.php
That's because you've instructed app engine to route all actions(.*) through index.php. You'll realise that when you navigate to any path on your site it get's redirected to index.php.
What you can do is to add more url mappings for all the other pages in your site and these should come before the index.php mapping.
- url: /about.php
script: about.php
- url: /services.php
script: services.php
etc.
Then you can put your catch all url mapping to index.php last.
If that'll be too much of a hassle and there are a bunch of php files you could use something like this to serve all php scripts:
application: acuteservice-1260
version: 1
runtime: php55
api_version: 1
threadsafe: yes
handlers:
- url: /(.*\.(gif|png|jpg|ico|js|css|eot|svg|ttf|woff))
static_files: \1
upload: (.*\.(gif|png|jpg|ico|js|css|eot|svg|ttf|woff))
- url: /favicon\.ico
static_files: favicon.ico
upload: favicon\.ico
# Serve php scripts.
- url: /(.+\.php)$
script: \1
- url: /.*
script: index.php
I'm trying to make a login and profile page. Here is the app.yaml file which works fine for '/' and '/(anything)'. Instead of '/(anything)' I would like to have the path as '/user/.*'. I tried a lot but it only renders the html part of the page. How do I configure my app.yaml, so that it renders with complete CSS and JS and works for '/(anything)/(anything)'?
application: My-App-name
version: 1
runtime: python27
api_version: 1
threadsafe: yes
handlers:
- url: /(.*\.css)
mime_type: text/css
static_files: static/\1
upload: static/(.*\.css)
- url: /(.*\.html)
mime_type: text/html
static_files: static/\1
upload: static/(.*\.html)
- url: /(.*\.js)
mime_type: text/javascript
static_files: static/\1
upload: static/(.*\.js)
image files
- url: /(.*\.(bmp|gif|ico|jpeg|jpg|png))
static_files: static/\1
upload: static/(.*\.(bmp|gif|ico|jpeg|jpg|png))
# index files
- url: /(.+)/
static_files: static/\1/index.html
upload: static/(.+)/index.html
# site root
- url: /.*
script: main.app
#- url: /user/.*
# script: main.app
libraries:
- name: jinja2
version: latest
PS: I have my folder tree as,
app.yaml
static->CSS,JS,Images,html files
index.yaml
main.app
Try something like:
- url: /(.+)/(.*\.js)
mime_type: text/javascript
static_files: static/\2
upload: static/(.*\.js)
This will match /anything/file.js as well as /anything/anything/file.js, as well as /junk/static/hellothere/this/matches/everything/file.js, because (.+) also matches all the slashes. If you don't want it to match both, then you need to handle the slashes in the regex (separate handling for characters and slashes):
- url: /([A-Za-z0-9-_]+)/([A-Za-z0-9-_]+)/(.*\.js)
mime_type: text/javascript
static_files: static/\3
upload: static/(.*\.js)
This matches /any-thing/any_th-ing/file.js. If you want to get more specific, you can use:
- url: /user/([A-Za-z0-9-_]+)/(.*\.js)
mime_type: text/javascript
static_files: static/\2
upload: static/(.*\.js)
to match `/user/anything/file.js', or:
- url: /([A-Za-z0-9-_]+)/static/(.*\.js)
mime_type: text/javascript
static_files: static/\2
upload: static/(.*\.js)
to match /anything/static/file.js