使用 nginx 部署 django 并在云上做出反应

Posted

技术标签:

【中文标题】使用 nginx 部署 django 并在云上做出反应【英文标题】:Deploy both django and react on cloud using nginx 【发布时间】:2021-03-15 09:02:35 【问题描述】:

我有一个 digitalocean 服务器,并且我已经使用 gunicorn 和 nginx 部署了我的 Django 后端服务器。

如何在同一台服务器上部署 React 应用程序?

【问题讨论】:

你说的在同一台服务器上是什么意思?在同一个服务器上使用子域,在同一个域上使用一些 URI 前缀等等? 【参考方案1】: 您可以构建 React 应用并使用 Nginx 提供其静态文件 您可以使用 docker-compose 来管理 Nginx 和 Django。更重要的是,您可以在 docker build 期间构建 React 静态文件。

这是我的文章: Docker-Compose for Django and React with Nginx reverse-proxy and Let's encrypt certificate.

在我的 Nginx 配置下:

server 
    listen 80;
    server_name _;
    server_tokens off;
    client_max_body_size 20M;

    location / 
        root   /usr/share/nginx/html;
        index  index.html index.htm;
        try_files $uri $uri/ /index.html;
    

    location /api 
        try_files $uri @proxy_api;
    
    location /admin 
        try_files $uri @proxy_api;
    

    location @proxy_api 
        proxy_set_header X-Forwarded-Proto https;
        proxy_set_header X-Url-Scheme $scheme;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Host $http_host;
        proxy_redirect off;
        proxy_pass   http://backend:8000;
    

    location /django_static/ 
        autoindex on;
        alias /app/backend/server/django_static/;
    

Nginx 码头文件:

# The first stage
# Build React static files
FROM node:13.12.0-alpine as build

WORKDIR /app/frontend
COPY ./frontend/package.json ./
COPY ./frontend/package-lock.json ./
RUN npm ci --silent
COPY ./frontend/ ./
RUN npm run build

# The second stage
# Copy React static files and start nginx
FROM nginx:stable-alpine
COPY --from=build /app/frontend/build /usr/share/nginx/html
CMD ["nginx", "-g", "daemon off;"]

【讨论】:

谢谢,这可能会有所帮助。我不太了解托管和云上可用的各种不同类型的服务器。如果您知道一个好的资源或指南,您能否指出我可以从中学习的一些资源或指南?谢谢 最简单的(对我来说)是 Digital Ocean(价格从 5 美元/月开始)。但对于需要数年的长期项目/部署,我更喜欢使用 AWS EC2 服务(比 Digital Ocean 贵一点)。 谢谢,我正在寻找一些资源来了解开发操作、云和部署的概念。

以上是关于使用 nginx 部署 django 并在云上做出反应的主要内容,如果未能解决你的问题,请参考以下文章

使用 EIP 和集成解决方案在云上分布层?

Django部署——uwsgi+Nginx

Django部署——uwsgi+Nginx(超详细)

使用Nginx+uwsgi在亚马逊云服务器上部署python+django项目完整版——部署配置及相关知识

使用nginx 做kbmmw REST 服务的负载均衡

Django+nginx+uwsgi部署教程(centos7+ubuntu16.4)