我可以使用Angular 2来创建基本的前端应用程序，也可以使用python来创建带有Google App引擎端点的后端。然而，我似乎不知道如何将两者结合在一起，并将它们与云SDK一起部署。
这是一个基本的例子，我甚至不能托管一个简单的angular2应用程序，没有对GAE的后端调用。在使用angular2 CLI构建后，我已经采取了dist文件夹，并试图用app.yaml文件连接到它。它似乎在浏览器开发人员(dev_appserver.py app.yaml)中工作，尽管我在SDK中得到一些404错误，我认为get请求与我的index.html文件有关。然后创建一个空白索引。yaml文件并尝试部署它，但在appspot.com位置得到404错误。这是app.yaml文件:
application:
version:
runtime: python27
threadsafe: true
api_version: 1
handlers:
- url: /favicon.ico
static_files: favicon.ico
upload: favicon.ico
- url: (.*)/
static_files: dist1/index.html
upload: dist
- url: (.*)
static_files: dist1
upload: dist
我真的不知道我做错了什么。我是否需要某种主。应用程序python后端连接到dist文件还是?我需要从Angular2中包含节点模块或其他类型的文件吗?任何帮助都会非常感激!由于
对于最新版本的Angular 4和App Engine，我构建了如下代码:
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
寻找如何改进的反馈
我现在更新app.yaml文件中的处理程序，使其看起来像这样用于静态上传到google云平台。如果正则表达式不是这样的，Angular Router就会出现问题。Dist文件夹是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
更新:
对于生产ng build --prod，这是我的app.yaml文件的样子:
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
我会将dist文件夹中的任何其他文件类型添加到第一个处理程序中的regex分组字符中:(gif|png|jpeg|jpg|css|js|ico)
在Angular 6中，文件结构发生了一些变化。以下是基于@Rob的回答，但针对启用了service-worker的Angular 6进行了更新。请务必将"my-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
看起来您的正则表达式匹配在错误的位置。试试这个格式:
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/(.*)
这是我们在App Engine上创建静态主机教程时遇到的一些奇怪的测试结果。
将app.yaml替换为以下内容:会成功的!
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"
首先运行以下命令构建angular项目
--ng build prod
# [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
运行后:
gcloud app deploy
如果你使用的是自定义字体，你可以使用这个模板:
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