将基本的 Angular 2 应用程序部署到 Google App Engine [英] Deploying basic Angular 2 app to 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: dist1/index.html
  upload: dist

- url: (.*)
  static_files: dist1
  upload: dist

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

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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！