google-app-engine - 将基本的 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

对于最新版本的 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

寻求有关如何改进的反馈。