Question

我对自己想要建立的网站有一个想法。我一直在阅读文档，文章和教程。但是我无法完全找到所需的答案。

情况：

我在AWS Lightsail上有一个项目（包括：Angular 7，Node，MongoDB，Nginx，Express）。我有多个带有动态子域的域名，用于区分客户/品牌员工的信息。它是多个域的一部分，以使其更易于导航和通信。

例如：

client1.domain1.com/some/info/
client1.domain2.com/some/info/
..etc.

设置：

我已经通过 Nginx 配置了子域和域，使其可以与通配符子域以及声明的子域和域一起使用。动态子域的配置如下：

server {
  listen 80;
  listen [::]:80;
  server_name ~^((?<sub>.*)\.)(?<domain>[^.]+)\.com$;
  root /opt/bitnami/nginx/html/$domain/$sub;
  try_files $uri $uri/ /index.html$is_args$args;
}

输出为该目录：

/opt/bitnami/nginx/html/domain1/client1/

（client1仅在其中进行测试。在理想情况下，它不是目录。而且domain1和client1仅应作为域和子域本身位于url中，而不是目录）< / em>

想法：

理想情况下，它将是每个域指向的一个系统，并且根据域名和客户端来区分内容。我考虑了以下问题：

在每个域上都有一个单独的应用程序。但这会产生大量重复的代码，并会维护/进行更改。

每个域都有一个组件。但是然后我不知道如何使路由工作。

在一个项目中拥有多个应用程序。但是Angular使用JavaScript将所有内容部署在1个HTML文件中。我如何使路由在那里工作？

等

但是似乎没有一个像我想象的那样工作。我如何使它正常工作？我如何才能以有效，可扩展和安全的方式使用多个域来为应用提供服务？

Answer 1

为什么不只使用具有多个域绑定的单个应用程序，然后在应用程序内使用路由来分隔内容。假设没有将特定于客户端的安全信息硬编码到angular应用程序中，那么您应该能够使用Angular Routeing和网络api配对创建安全应用程序，以得到最终描述的结果。

client1.domain1.com/client/1/info/ client1.domain2.com/client/2/info /

clientx.domainx.com->全部解析为您的应用

/ client /->路由到角度组件

const routes: Routes = [
  {
    path: '',
    children: [ 
       { path: 'client/:id', component: dynamicClientComponent },
     ]
  }
];

在有角度的客户端组件中，您可以从URL获取客户端ID，并从Web服务/ api中检索特定于客户端的内容

 constructor(
    private formBuilder: FormBuilder,
    private route: ActivatedRoute,
    private router: Router,
    private clientService: CientService,

  ) {
    route.params.subscribe(params => {
         this.id = this.route.snapshot.params.id;
         if (this.id) {
             this.clientService.getById(this.id).subscribe(
              (record) => {
                 this.ClientInfo = record;
                   //update UI accordingly

         })
    };
}

这是一个工作示例，比我的代码摘录更好地说明了这一点 https://stackblitz.com/edit/router-pillar1-demo-final?file=src%2Fapp%2Fapp.module.ts

Answer 2

如果您将不同的域用于不同的信息，则可以使用不同的路由，并由于当前域location.hostname插入它们。希望它对https://stackoverflow.com/a/59784694/9026103

有帮助

使用一个Angular 7应用程序

2 个答案: