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

问题描述

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

I can use Angular 2 to create basic front-end applications and can use python to create back-ends with endpoints on Google App engine. I can't however seem to figure out how to put the two together and deploy them with the cloud 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文件：

Here is a basic example where I can't even host a simple angular2 app with no back-end calls on GAE. I have taken the dist folder after building with angular2 CLI and tried to connect to it with the app.yaml file. It seems to work in the browser developer (dev_appserver.py app.yaml) although I get some 404 errors in SDK with the GET requests to do with my index.html file I think. I then create a blank index.yaml file and try to deploy it but get a 404 Error at the appspot.com location. This is the app.yaml file:

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

I really have no idea what I am doing wrong. Do I need some kind of a main.application python back-end to connect to the dist files or? Do I need to include node modules or some other kind or files from Angular2? Any help would be massively appreciated! Thanks

推荐答案

对于最新版本的Angular 4和App Engine，我构建了以下内容：

For the latest versions of Angular 4 and App Engine I built the following:

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

寻找关于如何改进的反馈。

Looking for feedback on how this could be improved.

这篇关于将基本的Angular 2应用程序部署到Google App Engine的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！