在谷歌应用引擎上使用环回部署 Angular 10 应用答案

【问题标题】：Deploying Angular 10 app with loopback on google app engine在谷歌应用引擎上使用环回部署 Angular 10 应用
【发布时间】：2020-10-01 17:54:58
【问题描述】：

我是 Angular 的新手，我用 Loopback 作为后端来构建我的 Angular 10 应用程序，以处理我的 MySQL 数据库的所有 crud 函数。我的 Angular 应用程序在 localhost:4200 上运行，而 Loopback 在 localhost:3000 上运行。现在我想在谷歌应用引擎标准环境中部署我的应用。我能够部署角度应用程序并且角度工作正常。但是如何在谷歌应用引擎上连接环回。

我运行此命令在根文件夹中构建我的应用程序

    ng build --prod

这创建了 dist 文件夹，我已经使用 app.yml 文件部署了它。 app.yml 文件内容

    runtime: python37
    manual_scaling:
        instances: 5
    service: angular

    handlers:
        - url: /
          static_files: my-app/index.html
          upload: my-app/index.html
        - url: /
          static_dir: my-app

【问题讨论】：

你也只需要托管你的后端，如果它是一个 nodejs 后端，也许这可以帮助cloud.google.com/appengine/docs/standard/nodejs/quickstart
你能分享更多关于你的后端的细节吗？

标签： angular google-app-engine loopback

【解决方案1】：

您必须在 GAE 上将 Nodejs 后端部署为不同的服务，并在该服务 URL 上调用您的角度环回，使用以下 app.yaml 配置部署 nodejs

#app.yaml
 runtime: nodejs
 manual_scaling:
   instances: 5
 service: angular
 env: flex

gcloud 应用部署

这将创建类似这样的 URL

https://angular-dot-{project-id}.{region}.appspot.com

然后在您的应用程序中查找“app.component.ts”文件，通常位于 src/app/ 并更改以下配置

LoopBackConfig.setBaseURL('https://angular-dot-{project-id}.{region}.appspot.com');

然后通过以下方式创建 Angular 应用的生产配置：

ng build --prod

它会创建一个dist目录，创建一个 app.yaml 文件以将其部署到云上，如下所示

Angular 应用程序 App.yaml

#app.yaml
runtime: python37
manual_scaling:
    instances: 5
service: ang-loop
handlers:
    - url: /
      static_files: my-app/index.html
      upload: my-app/index.html
    - url: /
      static_dir: my-app

将 app.yaml 文件移动到 dist 目录中。

然后使用（在 dist 目录内）将其部署到谷歌云上

gcloud app deploy

这应该有效！

【讨论】：

【解决方案2】：

您必须在另一个应用引擎服务上部署您的后端代码，并且您必须将该服务 URL 用作 Angular 应用中的 API URL。

例如：后端部署在 API 服务上，其 URL 类似于 https://api-dot-{project-id}.{region}.appspot.com 然后将此 URL 用作 API url。

App.yaml 文件应如下所示：

runtime: python37
service: api

runtime_config:
  document_root: public // web accessible path here
  whitelist_functions: shell_exec

env_variables:

【讨论】：