配置用于React + NGINX + uWSGI + Django的部署的设置

2 年 ago
清, 宇
1 minute

首先

当我在一台EC2上同时运行一个React前端和基于Django的后端实现的应用程序时，由于时间被设置所消耗，所以我将其记录在工作备忘录中。
顺便提一下，由于Django在开发服务器上运行，所以将其配置为使用uWSGI来运行。

将WSGI服务器安装起来是一个好的理由，具体请参考以下。
避免在生产环境中使用Django的开发服务器，这就是我们讨论的内容。

前提 tí) – assumption, precondition

    • Reactのフロントエンド、Djangoのバックエンドを実装し、EC2上に配置

 

    • npm、nginxをEC2にインストール

 

    ローカルや別々のEC2にnginx＋ReactとDjangoを単純に配置して動作する状態

参考: 用Django 3在AWS EC2上部署开发React/Next.js应用（包括Nginx, gunicorn和PostgreSQL）的详细说明，即使是在秒速下也能轻松实现。

应用程序的结构

首先，将位于不同服务器上的各个组件保持原样并排列。

Web浏览器 <–> nginx <–> React应用程序（端口：3000）<–> uWSGI <–> Django应用程序（端口：8000）

安装并验证uWSGI的运行

$ pip install uwsgi

如果在Django应用程序的配置中有(Django应用程序文件夹)/config/wsgi.py文件，那么就不需要进行特殊设置。
在进行操作验证等时，参考了翻译过的uWSGI教程的Django + uWSGI + nginx (uWSGI教程的翻译)。

文档的配置设置

回应

在Django中，访问的URL应指定为EC2的公共地址。(在本地主机localhost和127.0.0.1上无法正常连接)

    axios.get(`http://(EC2インスタンスのパブリックIP):8000/api/… `)
                   // ↑port:8000のDjangoのAPIにアクセス

nginx 可以进行语言转换。

在/etc/nginx/conf.d目录下创建一个.conf文件。
只需配置将代理发送到port:3000。即使没有配置Django作为后端，也能正常运行。

server {
    listen 80;
    listen [::]:80;

    server_name (EC2のパブリックアドレス);

    location / {
        # プロキシの設定
        proxy_set_header Host $http_host;
        # proxy_pass http://127.0.0.1:3000; ←こちらでもOK　
        proxy_pass http://(EC2のパブリックアドレス):3000; 

    }
}

请确认在/etc/nginx/nginx.conf文件中存在以下描述。这样，nginx在启动时将会加载/etc/nginx/conf.d/的配置。

http {
    …
    include /etc/nginx/conf.d/*.conf;
    include /etc/nginx/sites-enabled/*; 
}

在处理多个网站时，关于/etc/nginx/sites-enabled/*的描述在nginx中需要将每个网站的配置保存到sites-enabled/中（本次未使用）。

关于设置的更多信息，请参考以下内容。
总结关于nginx的设置部分。

只需要一种选项

请在settings.py的”CORS_ORIGIN_WHITELIST”中指定EC2的公共地址。(在localhost或127.0.0.1上无法正常工作)请同时注册具有端口:3000的地址和没有端口的地址。

CORS_ORIGIN_WHITELIST = [
    'http://(EC2のパブリックアドレス):3000',
    'http://(EC2のパブリックアドレス)',
]

打开应用程序

启动Django应用程序(uWSGI)

进入Django应用的主文件夹，指定wsgi.py文件并启动uWSGI。

$ cd (Djangoアプリフォルダ)
$ uwsgi --http :8000 --module config.wsgi　
                            　↑(Djangoアプリフォルダ)/config/wsgi.pyを指定している

启动React和Nginx。

$ cd (Reactアプリフォルダ)
$ npm start
$ sudo systemctl start nginx

最后

这次我们将前端和后端分开部署，但下一步计划是在Django端配置和运行React。

其他参考网站

用Python Django + React框架开发
使用React+Nginx+Django Rest Framework进行部署
使用uWSGI来运行Django应用程序的基础配置

bannerAds