将基本的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错误,我认为我的index.html文件有GET请求.然后我创建一个空白的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

寻求有关如何改进的反馈意见.

Answer 2

我现在更新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文件夹中的任何其他文件类型添加到第一个处理程序中的正则表达式分组字符: (gif|png|jpeg|jpg|css|js|ico)

Answer 3

对于Angular 6,文件结构有所改变.以下内容基于@ Rob的答案,但针对已启用服务工作者的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