將基本的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)