在 google 应用引擎上部署 Angular 10 个带环回的应用

Question

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

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

    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

Answer 1

您必须将后端代码部署到另一个应用引擎服务上，并且必须将该服务 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:

Answer 2

您必须将 Nodejs 后端部署为 GAE 上的不同服务，并在该服务上调用您的 angular 环回 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 目录中）

在 google 云上部署它

gcloud app deploy

这应该行得通！！

在 google 应用引擎上部署 Angular 10 个带环回的应用

Deploying Angular 10 app with loopback on google app engine

google-app-engine

loopback

angular