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

若依配置教程(九)若依前后端分离版部署到服务器Nginx(Windows版)

搭建若依环境

要部署到服务器上,首先要在本地运行若依系统


文章目录

  • 搭建若依环境
  • 后端部署
    • 1.在application.yml中修改后台端口,这里默认是8080。
    • 2.在application-druid.yml中修改正式环境数据库。
    • 3.后端打包部署
  • 前端部署
  • 下载安装Nginx
    • Nginx代理配置
  • 启动Nginx


后端部署

1.在application.yml中修改后台端口,这里默认是8080。

在这里插入图片描述

2.在application-druid.yml中修改正式环境数据库。

在这里插入图片描述

3.后端打包部署

     打开右侧的Maven,点击:生命周期->package,然后点击运行,等待打包成功,包在如图所示的文件夹中。然后将打包好的jar包(ruoyi-admin.jar),传到服务器的一个文件夹中,记住地址,后期需要jar包运行后端

在这里插入图片描述
在这里插入图片描述
     首先启动redis,然后使用命令行,进入ruoyi-admin.jar文件所在的位置,输入命令行:java –jar ruoyi.jar。此时后端启动,出现如下图所示,若依后台运行成功:
在这里插入图片描述
在这里插入图片描述


前端部署

    打开前端项目的vue.config.js文件,检查devServer下的proxy代理部分,然后将下面这个端口修改为你要在打包后访问的端口,即使用nginx代理前的接口。这个端口默认是80端口,这里把其修改为不会冲突的70端口,不推荐使用80端口。
    因为80端口是默认端口在部署到服务器上和下面启动nginx可能存在占用等问题。
    除了这个70端口外,下面的target的url和端口要和你服务器上能访问到后台的接口一致。

在这里插入图片描述


    接下来将前端打包。首先打包之前确保已经安装完依赖项,即:npm install 成功且没问题。在终端中,进入到ruoyi-ui目录,输入命令行:npm run build:prod。
在这里插入图片描述

    等待一段时间打包成功,此时在ruoyi-ui文件夹下生成dist目录。此目录就是打包之后的前端的资源。然后将此dist目录放在服务器上的某个目录下,下面使用Nginx代理会用。
在这里插入图片描述
不要动dist下文件的路径
在这里插入图片描述


下载安装Nginx

Nginx下载地址:Nginx下载,选择相应版本的Windows版本
在这里插入图片描述
下载后解压压缩包到服务器的某一个目录下,
在这里插入图片描述

Nginx代理配置

进入到conf目录下,编辑配置文件nginx.conf
在这里插入图片描述
找到server节点
在这里插入图片描述
    首先这里的listen下的端口就是代理前的接口,要与前面前端项目的vue.config.js中的端口一致。

    然后下面的server_name是你服务器的ip,这里即使是使用的本地也建议不要用localhost,避免修改hosts文件导致的问题。下面的两个配置保持默认不要更改,配置的是防止404和入口页面。

server {listen       70;server_name  10.118.2.142;location / {root   C:\Users\Administrator\Desktop\dist;try_files $uri $uri/ /index.html;index  index.html index.htm;}

然后再下面的location /prod-api/ 就是配置的代理后的地址。

location /prod-api/ {
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:8080/;
}

这里的 /prod-api/就是跟前面前端项目设置代理的路径重写一致。
附上完整的代码:

worker_processes  1;events {worker_connections  1024;
}http {include       mime.types;default_type  application/octet-stream;sendfile        on;keepalive_timeout  65;server {listen       70;server_name  10.118.2.142;charset utf-8;location / {root   C:\Users\Administrator\Desktop\software\apache-tomcat-10.0.27-windows-x64\apache-tomcat-10.0.27\webapps\dist;try_files $uri $uri/ /index.html;index  index.html index.htm;}location /prod-api/ {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:8080/;}error_page   500 502 503 504  /50x.html;location = /50x.html {root   html;}}
}

启动Nginx

进入到Nginx文件夹目录下,用命令行输入:start nginx.exe,启动Nginx,窗口会一闪而过
在这里插入图片描述
如果对Nginx配置文件进行修改的话,需要重新加载:nginx -s reload
打开任务管理器,查看Nginx是否开启。
在这里插入图片描述
启动Nginx成功后打开浏览器验证,输入(服务器ip:70):例如:http://10.229.36.158:70/
启动成功!
在这里插入图片描述
参考博客

http://www.lryc.cn/news/17964.html

相关文章:

  • 【仔细理解】计算机视觉基础1——特征提取之Harris角点
  • Elasticsearch7.8.0版本进阶——近实时搜索
  • OAK相机深度流探测草莓距离
  • 文件共享服务器(CIFS)的相关知识及指令
  • springcloud-2service consumer
  • JavaScript 进阶--charater3
  • Solon2 之基础:三、启动参数说明
  • 引入防关联浏览器以防止数据盗窃
  • Spring的一些知识点
  • 使用WordPress快速搭建外贸网站教程
  • 在 vue 或 react 项目中使用 mockjs 搭建 mock server
  • 【十一届蓝桥杯】
  • vm 网络配置
  • 2023年CDGA考试-第11章-数据仓库和商务智能(含答案)
  • 从0-1搭建流媒体系统之live555 安装、运行、转发、拉流
  • 搭建个人博客保姆级教程(二)
  • 数字图像处理与Python实现-Pillow图像处理
  • HMM隐马尔可夫模型 | 关键原理+面试知识点
  • 【Leedcode】数据结构中链表必备的面试题(第三期)
  • D1.Chopping Carrots (Easy Version)【数学,二分,暴力,思维】
  • 【Maven】(二)使用 Maven 创建并运行项目、聊聊 POM 中的坐标与版本号的规则
  • (考研湖科大教书匠计算机网络)第六章应用层-第六节:电子邮件
  • 一、初识TypeScript、什么是类型系统
  • 一文了解什么是字节对齐(超详细)
  • Java无法通过形参设置为null改变实参
  • GEE:样本点选择教程
  • 3.知识图谱相关学习资料汇总,提供系统化的知识图谱学习路径。一份详细的指南,补全你知识的漏洞
  • TypeScript学习笔记(一)编译环境、数据类型、函数类型、联合类型
  • 为什么要移除数据库物理外键?
  • Linux 计划任务讲解