【问题标题】：How to deploy Angular with SSR and Django Rest Framework separately but on the same server如何在同一台服务器上分别部署带有 SSR 和 Django Rest Framework 的 Angular
【发布时间】：2019-12-27 03:05:37
【问题描述】：

大多数教程都说您必须将 Angular 集成到 Django 中，但我不想这样做。

我想用 Angular 使用 Node.js Express 和 Django 使用 Gunicorn 将两者部署在同一台服务器上。

但我不知道该怎么做。我知道如何使用 SSR 和 Django 部署 Angular，但不能同时部署在同一台服务器上。

【问题讨论】：

标签： django deployment server angular8

【解决方案1】：

我会告诉你如何做你所要求的，但我也会告诉你一个更高效、稳定和快速的方法。

跳至推荐方法了解我推荐的方法。

大部分教程都说必须将 Angular 集成到 Django 中

我不知道为什么这些教程说你需要将 Angular 集成到 Django 中，因为它们没有集成彼此，它们一起工作。前端（在本例中为 Angular）将向后端（在本例中为 Django Rest Framework）发出请求并向用户显示信息。它们不会作为一个单一的代码库一起存在。

我想将两者部署在同一台服务器上

在开始之前，我应该说我在管理生产服务方面拥有丰富的行业经验，我建议不要这样做。通常，您会将每个服务置于负载均衡器之后，因为运行后端代码比交付前端包需要更多资源。

您可以在同一台服务器或不同服务器上拥有前端和后端，但两种解决方案都需要反向代理和负载平衡器，如 NGINX，它可以从后端传递前端包和数据，其中两个配置文件。

此 NGINX 配置将从 /var/www/example 的前端返回 index.html 文件：

# example.com.conf
server {
    root /var/www/example;
    index index.html;

    server_name example.com;
    location / {
        try_files $uri $uri/ = 404;
    }

    listen 443 ssl;
    ssl_certificate /path/to/fullchain.pem;
    ssl_certificate_key /path/to/privkey.pem;
    include /path/to/options-ssl-nginx.conf;
}

server {
    listen       80;
    listen [::]:80;
    server_name  example.com;

    include /path/to/encrypt.conf;

    location / {
        return 301 https://example.com$request_uri;
    }
}

这个 NGINX 配置将允许前端通过端点 api.example.com 向后端发出请求：

# api.example.com.conf
server {
    server_name api.example.com;

    listen 443 ssl;
    ssl_certificate /path/to/fullchain.pem;
    ssl_certificate_key /path/to/privkey.pem;
    include /path/to/options-ssl-nginx.conf;

    location / {
        proxy_pass http://0.0.0.0:8000;
        proxy_set_header Host $myhost;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-Proto https;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_redirect off;
    }
}

server {
    listen       80;
    listen [::]:80;
    server_name  api.example.com;

    include /path/to/encrypt.conf;

    location / {
        return 301 https://api.example/com$request_uri;
    }
}

部署

有几种方法可以做到这一点：

在服务器上运行服务

这是更传统的方法，需要自己在服务器上安装所有应用程序的依赖项，例如 Node.js、Python 和 NGINX。由于生产服务器环境与您的开发环境不同（例如，生产服务器是 Ubuntu 服务器，而开发服务器是 Macbook），因此很有可能出现问题。

而且每当您更新代码时，您都不想弄乱生产服务器，因此您需要创建一个新服务器，再次安装所有依赖项......这是很多工作。

使用 Docker 在服务器上运行服务

我无法表达 Docker 的神奇和有用！它允许您在虚拟化、隔离的容器中运行代码，无论主机环境如何，这些容器都运行相同，并且不会降低您的应用程序的速度。

这很好，你可以和上面完全一样，但是将前端和后端容器化，并容器化 NGINX 代理，然后让 NGINX 容器将请求路由到不同的容器或服务器，例如：

    location / {
        proxy_pass http://drf-container:8000;

这意味着您现在可以在开发、暂存和生产中运行相同的代码，并且知道即使在部署时结果也是一样的。

使用 Docker 在集群上运行服务（最流行）

我在 AWS 和 DigitalOcean 上都有托管服务器。

AWS 允许您启动服务器集群并将 Docker 映像上传到其存储库，并以预先分配的资源限制启动 Docker 容器实例，AWS 会自动将它们部署到集群中。这很棒，因为 AWS 还允许您无缝地创建一个新容器，如果它是健康的，AWS 会自动将旧容器的连接引流到新容器，并删除旧容器。这意味着极其快速、安全和高效的部署。

DigitalOcean 现在提供类似的功能。 DigitalOcean Kubernetes 可以做到与我在上面描述的 AWS 所做的完全一样，但需要更多的手动设置。

总结

我希望以上内容有助于理清 Django 和 Angular 的部署。归结为拥有以下三个 Docker 容器：

Angular 容器（包含 Angular 应用依赖项和代码库）
Django 容器（包含 Django Rest Framework 依赖项和代码库）
NGINX 容器（包含来自 Angular 容器的生产包，以及一个 .conf 文件，其中包含代理传递到 Django 容器的配置）

然后将这些容器部署到服务器或集群。