时间戳

首页 > 解决方案 > 如何在同一服务器上分别部署带有 SSR 和 Django Rest Framework 的 Angular

django - 如何在同一服务器上分别部署带有 SSR 和 Django Rest Framework 的 Angular

问题描述

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

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

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

标签： djangodeploymentserverangular8

解决方案

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

跳到我推荐的方法的推荐方法。

大多数教程都说你必须将 Angular 集成到 Django

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

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

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

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

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

# 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 容器：

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

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

推荐方法

随着无服务器变得流行，我的个人设置是在 Docker 集群中托管 GraphQL API 的微服务后端（在 Python 或 Go 中），如上所述。Apollo 可以在无服务器或服务器中运行，并将我的所有微服务 GraphQL API 组合到我的前端可以查询的单个端点中。不需要 NGINX，非常可扩展且非常容易开发和部署。

推荐阅读