在Google App Engine上部署带环回的Angular 10应用

问题描述

我是Angular的新手，并使用Loopback作为后端来构建Angular 10应用程序，以处理MysqL数据库中的所有关键功能。我的Angular应用程序在localhost：4200上运行，在Loopback上在localhost：3000上运行。现在，我想在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

解决方法

您必须将后端代码部署在另一个App Engine服务上，并且必须将该服务URL用作角度应用程序中的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:

,

您必须将Nodejs Backend部署为GAE上的另一项服务，并在该服务URL上进行角度环回，使用以下app.yaml config部署nodejs

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

gcloud应用部署

这将创建类似这样的URL

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

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

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

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

ng build --prod 

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

Angular Application 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

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

然后使用（在 dist 目录内部）将其部署到Google云中

gcloud app deploy

这应该工作！！