Windows服务器，通过Nginx部署VUE+Django前后端分离项目

容朕想想

目录

• 基本说明
  
• 安装 Nginx
  
• 部署 VUE 前端
  
• 部署 Django 后端
  
• Django admin 静态文件（CSS，JS等）丢失的问题
  
• 总结
  

1. 基本说明

本文介绍了在 windows 服务器下，通过 Nginx 部署 VUE + Django 前后端分离项目。本项目前端运行在 80 端口，服务器端运行在 8000 端口。因此本项目使用 Django 的 runserver 命令进行部署，基本能满足小型使用需求。
由于 Nginx 多在 Linux 服务器下使用，少有博客介绍其 windows 下使用规则。此外，Django 部署多用 uWSGI，但经过实测 windows 下先无法正常使用。并且经过本人实测目前几乎没有可以满足本人需求的博文。基于以上考虑，因此写下此博客，方便大家进行基本部署。
2. 安装 Nginx

2.1 下载

Nginx 是一个 Web 服务器和方向代理服务器，简而言之，Nginx监听请求，然后根据配置中的规则（2.2中讲）执行不同的操作。
进入 Nginx 官网 https://nginx.org/en/index.html
点击右侧 download 链接

随后选择版本，我选择了图中红框中版本

下载后将其放入服务器中想要的文件夹并解压即可，文件夹中内容如图所示

点击执行 Nginx.exe，随后在浏览器中访问 localhost，页面展示如下则表示安装成功。

下面为 Nginx 操作命令，在 终端 中，进入 Nginx 文件夹路径

1.   # 启动 Nginx
2.   nginx
3.   start nginx
4.   # 结束 Nginx
5.   nginx -s stop
6.   # 或在任务管理器中结束 Nginx 任务

复制代码

2.2 配置

当前，我的程序在本机运行时，访问前端地址为 localhost:3000 , 后端地址为 localhost:8000。我想将前后端分别在服务器中部署，前端运行在 80 端口，后端运行在 8000 端口。目前有了 Nginx 这个服务器，因此我们在访问网站时要通过Nginx监听所有请求，然后根据规则分别进行转发。因此，我通过 Nginx 监听 80 端口，如果有人访问服务器的 80 端口，那么 Nginx 将让其访问我的前端程序。
打开文件夹中 conf/nginx.conf 文件，通过记事本等工具打开，在 http 的 server 下进行如下配置。

1. http {
2.   ... # 这里不进行修改
3.   server {
4.     listen 80; # 监听 80 端口
5.     server_name 192.168.50.10; # 输入服务器 ip，我这里为内网 ip
6.    
7.     location / {
8.       root html;
9.       index index.html index.htm; # 这里默认为此配置，表示当有人访问 服务器 80 端口的 / 根目录，那么 Nginx 将在 html 文件夹中寻找 index.html, index.htm 文件进行展示，也可以根据自己实际情况进行修改
10.       # 如果 vue 的路由模式是 history，一定要加上下面这句话
11.       try_files $uri $uri/ /index.html;
12.     }
13.   }
14. }

复制代码

3. 配置 VUE 前端

我使用了 axios 发起请求，请求地址为 http://localhost:8000/api/，现在部署到服务器后，所有请求通过 Nginx进行转发，因此前端并不直接访问 8000 端口，而是通过 Nginx 进行转发，因此将 axios 请求地址改为 http://192.168.50.10/api/。这里修改为你的服务器地址，去掉端口号。
随后在 终端 中执行一下命令打包前端文件

1. npm run build

复制代码

执行结束后，在前端项目根目录自动生成 dist 文件夹，将里面内容全部复制到 服务器 Nginx 文件夹的 html 文件夹中。确保 Nginx 处于启动状态，浏览器访问 192.168.50.10 （这里为你服务器ip），如正确出现 前端项目 则表示 vue 前端配置成功。（但是目前还不能进行前后端通信，因为我们把前端的请求8000端口改成了80端口，但是目前我们还没有配置，因此要进行如下配置才可以，在将Django后端配置结束以后，再进行如下配置也可以）
在 conf/nginx.conf 文件中进行如下配置。

1.   location / {
2.     ... # 上面配置的内容
3.   }
4.   
5.   location /api/ {
6.     add_header Access-Control-Allow-Origin *;
7.     proxy_set_header Host $http_host;
8.     proxy_set_header X-Real-IP $remote_addr;
9.     proxy_set_header REMOTE-HOST $remote_addr;
10.     proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
11.     proxy_pass http://localhost:8000;  # Nginx 监听到请求 api后，将请求转发给 localhost的8000端口，因为 Django后端也要部署到这台服务器上，所以是 localhost，这样可以减少用户请求次数，加快网站访问速度。（我实测速度是有一定提升）
12.   }

复制代码

此外，如果前端程序中存在一些需要访问的文件（我的程序为论文检索系统，在前端保留了论文pdf文件，存储在static文件夹中），那么在 conf/nginx.conf 文件中进行如下配置。

1.   location / {
2.     ... #上面配置内容
3.   }
5.   location /static/ {  # 这里为你的需要访问文件的访问路径，我的文件访问路径是 http://192.168.50.10/static/papers/XXX.pdf，我的文件存储在了 static/papers/XXX.pdf，并且一同复制到了 html 文件夹中。
6.     alias D:/Web/nginx-1.24.0/html/static/;  # 这里为服务器中 html 内，你的文件的存储路径。
7.     try_files $uri $uri/;
8.   }

复制代码

4. 配置 Django 后端

4.1 安装依赖

在开发电脑上，终端 进入 Django 后端程序路径，执行pip freeze > requirements.txt，生成所需的依赖文件。
随后将 Django 后端程序复制到服务器中合适路径，在终端中执行 pip3 install -r requirements.txt，在服务器中安装依赖。
4.2 部署

进入 Django 后台程序中的 settings.py
进行如下修改

1. DEBUG = False
3. ALLOWEDD_HOST = ['*']
5. DATABASES = {
6.     "default": {
7.         'ENGINE': 'django.db.backends.mysql',
8.         'NAME': 'paper_web', # 服务器数据库名
9.         'USER': 'root', # 服务器数据库用户名
10.         'PASSWORD': 'root', # 服务器数据库密码
11.         'HOST': '127.0.0.1',
12.         'PORT': '3306'
13.     }
14. }

复制代码

随后在 终端 中执行（进入Django 后台程序目录）

1. python manage.py runserver 0.0.0.0:8000

复制代码

至此，配置基本结束，通过浏览器访问 服务器ip，即可进行正常操作。
5. Django admin 静态文件（CSS，JS等）丢失的问题

Django 自带一个 admin 管理后台，直接通过浏览器访问 192.168.50.10:8000/admin/: 时，会出现样式丢失的问题，如图所示

因此要执行以下配置。
在 服务器的 Django 的 settings.py 中，新增以下配置

1. STATIC_ROOT = "D:/Web/nginx-1.24.0/html/static/static/" # 这里为你的服务器中 Nginx 的路径，应在 html 文件夹下的 static 文件夹，但是我的static 文件夹存了论文不为空，因此我在 static 文件夹中新建了文件夹 static

复制代码

随后在终端中执行

1. python manage.py collectstatic  # 将 admin 样式复制到指定目录

复制代码

将 html/static/static 文件夹的 admin 文件夹复制到 html/static 文件夹中。
随后在 Nginx 的 conf/nginx.conf 文件中进行如下配置。

1. location /api/ {
2.   ... # 以上配置内容
3. }
4. location /admin/ {
5.   add_header Access-Control-Allow-Origin *;
6.   proxy_set_header Host $http_host;
7.   proxy_set_header X-Real-IP $remote_addr;
8.   proxy_set_header REMOTE-HOST $remote_addr;
9.   proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
10.   proxy_pass http://localhost:8000;
11. }
12. location /static/admin/ {
13.   alias D:/Web/nginx-1.24.0/html/static/admin/;  # 这里为 admin文件夹所在位置
14.   try_files $uri $uri/;
15. }
16. location /static/ {
17.   ... # 以上配置内容
18. }

复制代码

配置结束后，重启 Nginx 服务，在浏览器中访问 192.168.50.10/admin/，可以发现 Django admin 样式又回来了。
6. 总结

因为 网上几乎没有这种部署情况，而且对于Django admin 样式丢失的方法，我尝试过均没有什么效果，因此我写下这篇文章，希望对有相似情况的朋友有一定帮助。
以上就为我的简单部署情况，因为是单位内部使用，并且仅有 windows 服务器，所以只能进行以上操作。
如果大家遇到什么我未提到的问题，可以与我联系，我们共同解决。
如有未尽之处，还请见谅。

来源:https://www.cnblogs.com/kyguo1997/p/17884479.html
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！