将基本的Angular 2应用程序部署到Google App Engine

Question

我可以使用Angular 2创建基本的前端应用程序，并且可以使用python在Google App引擎上创建带有端点的后端。然而，我似乎无法弄清楚如何将这两者结合在一起并将其部署到云SDK中。

这里是一个基本的例子，我甚至不能在GAE上托管一个简单的angular2应用程序而没有后端调用。在使用angular2 CLI构建后，我已经拿到了dist文件夹，并尝试用app.yaml文件连接到它。它似乎可以在浏览器开发者（dev_appserver.py app.yaml）中工作，尽管我在SDK中发现了一些404错误，并且发现GET请求会处理我的index.html文件。然后，我创建一个空白index.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: dist\1/index.html 
    upload: dist 

- url: (.*) 
    static_files: dist\1 
    upload: dist 

我真的不知道我在做什么错。我是否需要某种main.application python后端连接到dist文件或？我是否需要包含来自Angular2的节点模块或其他类型或文件？任何帮助将大量赞赏！谢谢

Answer 1

角形4和应用程序引擎的最新版本，我建了以下内容：

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 

寻找反馈如何可以改善。

Answer 2

将您的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" 

Answer 3

它看起来像你的正则表达式匹配是在错误的地方。试试这个格式：

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/(.*) 

这是来自测试和在创建Static Hosting tutorial on App Engine我们遇到了一些怪事。

Answer 4

我现在更新我的app.yaml文件中的处理程序，看起来像这样静态上传到谷歌云平台。如果正则表达式不是这样的，那么Angular Router有问题。 DIST文件夹是从角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：

对于生产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文件夹中的其他文件类型到第一个处理程序中的正则表达式分组字符：(gif|png|jpeg|jpg|css|js|ico)