Java - 在谷歌应用引擎标准上托管 Angular 应用程序。 webapp 文件夹与 GCS 存储桶？答案

【问题标题】：Java - Hosting Angular application on google app engine standard. webapp folder vs. GCS bucket?Java - 在谷歌应用引擎标准上托管 Angular 应用程序。 webapp 文件夹与 GCS 存储桶？
【发布时间】：2019-06-12 07:48:39
【问题描述】：

我有一个使用 App Engine 标准 JAVA 作为后端 API 的 Angular Web 应用程序。

在同一个项目下托管 Angular Web 应用程序的最佳方式是什么？

我想在同一个谷歌项目下托管网络应用程序。

当我将文件放在 Java API 项目下的 src/main/Webapp 文件夹下时，应用程序运行良好。但是，每次我需要更改 Web 应用程序时，都需要刷新后端 API。

另外，在 GCS 存储桶中托管 Angular 应用程序时遇到了类似的情况： https://medium.com/@asanoop24/deploying-angular-6-app-on-google-app-engine-b6259d4c16c2

关于在 GAE 上托管 Angular Web 应用程序的首选方法是什么？

谢谢

【问题讨论】：

查看 GAE 服务。您可以为每个服务提供一项服务，并一次更新一项。

标签： angular google-app-engine

【解决方案1】：

这是您可以考虑的一种方法。我将它用于 Google AppEngine Standard 上的多个全栈部署，并且由于 GAE 功能（版本控制、拆分流量、日志......）而更喜欢这个（与 GCS 相比）。但成本可能高于 GCS 公共存储桶。

这样做：

1) 为前端部署第一个服务

只需简单部署由ng build --prod 生成的Angular dist 文件夹。选择一个简单的标准python 环境来执行此操作。

app.yaml 应该是这样的：

runtime: python27
threadsafe: true
api_version: 1

handlers:
- url: /(.+\.js)
  static_files: app/\1
  upload: app/(.+\.js)

- url: /(.+\.css)
  static_files: app/\1
  upload: app/(.+\.css)

- url: /(.+\.png)
  static_files: app/\1
  upload: app/(.+\.png)

- url: /(.+\.jpg)
  static_files: app/\1
  upload: app/(.+\.jpg)

- url: /(.+\.svg)
  static_files: app/\1
  upload: app/(.+\.svg)

- url: /favicon.ico
  static_files: app/favicon.ico
  upload: app/favicon.ico

- url: /(.+\.json)
  static_files: app/\1
  upload: app/(.+\.json)

- url: /(.+)
  static_files: app/index.html
  upload: app/index.html

- url: /
  static_files: app/index.html
  upload: app/index.html

我确信处理程序规则可能会被优化。我不是正则表达式的专家。 ;-)

deploy 文件夹的目录结构应如下所示：

/deploy
  app.yaml
  /app  =>  generated by ng build
    index.html
    ...bundles..js
    /assets
      ...

此默认服务将照常在https://YOUR_PROJECT_ID.appspot.com 提供。

2) 为后端部署第二个服务

然后（并且仅在第一次前端部署之后），使用 Java 标准环境为后端部署第二个服务。

但是我们在<service>标签内精确地定义了服务的名称。这里我选择api，其他名字应该都可以。

<?xml version="1.0" encoding="utf-8"?>
<appengine-web-app xmlns="http://appengine.google.com/ns/1.0">
    <version>1</version>
    <threadsafe>true</threadsafe>
    <runtime>java8</runtime>          
    <instance-class>F4</instance-class>
    ...
    <service>api</service>
    ...

这项新服务将在https://YOUR_SERVICE_NAME-dot-YOUR_PROJECT_ID.appspot.com 提供，所以这里是https://api-dot-YOUR_PROJECT_ID.appspot.com。

注意后台管理CORS，正确接受https://YOUR_PROJECT_ID.appspot.com的请求。

【讨论】：