当前位置: 首页 > article >正文

Django_Vue3_ElementUI_Release_004_使用nginx部署

1. nginx安装配置

1.1 下载nginx

Download nginx

1.2 测试一下

在这里插入图片描述

1.3 进入nginx用命令操作

在这里插入图片描述

2. 部署

2.1 前端部署

2.1.1 修改nginx监听配置

…conf/nginx.conf

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

2.1.2 修改vue axios监听配置

和nginx的保持一致,因为之前是vue直接访问后端的,现在改成了nginx转发
在这里插入图片描述

2.1.3 修改完成后打包

npm run build
在这里插入图片描述

2.1.4 将dist文件夹中的内容拷贝到nginx的html目录中

在这里插入图片描述

2.1.5 浏览器访问测试在这里插入图片描述

以上前端配置好了,但是不能访问后端

2.2 后端部署

2.2.1 nginx需要如下配置

		location /api/ {
			add_header Access-Control-Allow-Origin *;
			proxy_set_header Host $http_host;
			proxy_set_header X-Real-IP $remote_addr;
			proxy_set_header REMOTE-HOST $remote_addr;
			proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
			# Nginx 监听到请求 api后,将请求转发给 localhost的8000端口,
			# 因为 Django后端也要部署到这台服务器上,所以是 localhost,
			# 这样可以减少用户请求次数,加快网站访问速度。(我实测速度是有一定提升)
			proxy_pass http://127.0.0.1:8000;  
		  }

以上配置文件中的ip地址和端口需要和django中保持一致
在这里插入图片描述

2.2.2 如果有静态文件,需要如下配置

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

2.2.3 settings.py中做如下配置

在这里插入图片描述

3. 测试

启动nginx并访问
在这里插入图片描述

4. 修复django admin

在 服务器的 Django 的 settings.py 中,新增以下配置

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

随后在终端中执行

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

将 html/static/static 文件夹的 admin 文件夹复制到 html/static 文件夹中。

随后在 Nginx 的 conf/nginx.conf 文件中进行如下配置。

location /api/ {
  ... # 以上配置内容
}
location /admin/ {
  add_header Access-Control-Allow-Origin *;
  proxy_set_header Host $http_host;
  proxy_set_header X-Real-IP $remote_addr;
  proxy_set_header REMOTE-HOST $remote_addr;
  proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
  proxy_pass http://localhost:8000;
}
location /static/admin/ {
  alias D:/Web/nginx-1.24.0/html/static/admin/;  # 这里为 admin文件夹所在位置
  try_files $uri $uri/;
}
location /static/ {
  ... # 以上配置内容
}

以上内容参考

https://www.cnblogs.com/kyguo1997/p/17884479.html


http://www.kler.cn/a/308348.html

相关文章:

  • 【R78/G15 开发板测评】串口打印 DHT11 温湿度传感器、DS18B20 温度传感器数据,LabVIEW 上位机绘制演化曲线
  • 软件工程概论项目(二),node.js的配置,npm的使用与vue的安装
  • TCP/IP协议,TCP和UDP区别
  • Springboot 日志处理(非常详细)
  • 【Vue】Vue3.0(十九)Vue 3.0 中一种组件间通信方式-自定义事件
  • ima.copilot-腾讯智能工作台
  • idea插件开发的第四天-完善JSON工具
  • 算法:76.最小覆盖子串
  • 文章-深入GPU硬件架构及运行机制 学习后记
  • 撤回仓库的提交
  • 基于SpringBoot实现SpringMvc上传下载功能实现
  • uniapp 如何自定义导航栏并自适应机型
  • 【ESP32】ESP-IDF开发 | 中断矩阵+按键输入中断例程
  • 发送成绩的app或小程序推荐
  • PTrade量化服务器连接openapi的地址、key等配置涉及哪些文件?
  • 【学习笔记】SSL密码套件之哈希
  • 【目标检测】labelimg图像标注软件的使用流程
  • 清华镜像源的使用说明
  • 文心一言 VS 讯飞星火 VS chatgpt (349)-- 算法导论23.2 8题
  • AI教你学Python :详解Python元组与集合、字典基础和字符串操作(补充)
  • JavaSE:8、包装类
  • seafaring寻找漏洞
  • 算法入门-贪心1
  • 【React】MobX
  • CI/CD持续集成和持续交付(git工具、gitlab代码仓库、jenkins)
  • DL/T645-2007 通信库(C#版本)