Linux云服务器实现若依前后端部署最终实现外网访问（全流程详细教程）
文章目录
- 一、服务器购买
- 二、服务器环境安装
- 三、项目打包
- 1.后端打包
- 2.前端打包
- 四、服务器部署
- 1.后端部署
- 上传jar包
- 启动jar包
- 2.前端部署
- 上传到nginx
- 修改nginx配置文件
- 配置的解释：
- 1. `server` 块
- 2. `location /` 块
- 3. `location /prod-api/` 块
- 问题
- 1.前端打包并配置nignx后，一直转圈，访问不到静态资源
- 2.验证码图片不显示
- 3.无限弹窗
部署听起来简单，但是要实现部署这个动作，需要很多前置工作，比如有一台服务器，服务器上需要安装系统需要的环境还有中间件等，然后是打包项目，最后将项目放到服务器上。
下面我们依次来说这个教程，中间涉及到的安装也都有对应的文章进行参考，可以直接点链接去查看，里面有对应的步骤及命令，安装不分前后顺序，最终只需要把所有必要安装的都安装完成即可。
一、服务器购买
使用虚拟机或云服务器
虚拟机就使用VMWare，安装一个CentOS7镜像
云服务器我这里用的是阿里云的，操作系统都是 CentOS7
【阿里云服务器入门使用教程——购买及操作系统选择并进行远程连接】
二、服务器环境安装
需要安装jdk,mysql,redis,nginx
- jdk安装【Linux安装jdk】
- mysql安装【Linux使用Docker部署mysql5.7】
- redis安装【Linux安装redis】
- nginx安装【Linux实现Nginx的安装与部署并实现html静态资源访问】
三、项目打包
1.后端打包
在idea中maven工具栏中依次点击下面三个命令进行项目打包
打包成功
打包成功后找到ruoyi-admin下的这个jar包，这个就是我们要的
2.前端打包
前端打包直接使用readme.md文档中的这两个命令
都可以使用，一个是构建测试环境，一个是构建生产环境
npm run build:prod
构建成功后目录中就多了一个dist包，这里面的东西就是打包好的前端项目
四、服务器部署
1.后端部署
后端部署就是将jar包传到服务器上，然后运行jar包
上传jar包
自己创建一个目录来存放jar包，使用finalshell工具将jar包上传到对应目录
jar包启动命令：
java -jar -Xmx1024M -Xms256M /www/wwwroot/default/infoProject/ruoyi-admin.jar
启动jar包
直接访问后端地址，成功
2.前端部署
前端部署就是将前端打包好的dist包放到nginx服务器指定目录下面
上传到nginx
找到nginx安装目录下的html文件夹，将dist文件夹上传到该目录下
修改nginx配置文件
将下面这段配置加到http块下
主要有两个地方，
一个是root，这里的路径是刚刚上传dist的路径
一个是proxy_pass，这里是后端jar包的访问路径
server
{
listen 80;
server_name infoproject;
location / {
root /www/server/nginx/html/project/infoproject/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://11.11.78.99:9205/;
}
}
配置的解释：
1. server 块
server {
listen 80;
server_name infoproject;
server块定义了一个虚拟服务器。listen 80;表示该服务器监听80端口（HTTP默认端口）。server_name infoproject;表示该服务器块将处理主机名为infoproject的请求。
2. location / 块
location / {
root /www/server/nginx/html/project/infoproject/dist;
try_files $uri $uri/ /index.html;
index index.html index.htm;
}
location /块定义了如何处理根路径/的请求。root /www/server/nginx/html/project/infoproject/dist;指定了该位置的根目录，即请求的文件将从该目录中查找。try_files $uri $uri/ /index.html;表示Nginx会尝试按顺序查找文件：- 首先查找请求的URI对应的文件（
$uri）。 - 如果找不到，尝试查找URI对应的目录（
$uri/）。 - 如果仍然找不到，则返回
/index.html文件。
- 首先查找请求的URI对应的文件（
index index.html index.htm;指定了默认的索引文件，即当请求的URI是一个目录时，Nginx会尝试返回index.html或index.htm文件。
3. 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://11.11.78.99:9205/;
}
location /prod-api/块定义了如何处理以/prod-api/开头的请求。proxy_set_header指令用于设置传递给后端服务器的HTTP头信息：Host $http_host;将原始请求的Host头传递给后端服务器。X-Real-IP $remote_addr;将客户端的真实IP地址传递给后端服务器。REMOTE-HOST $remote_addr;将客户端的真实IP地址传递给后端服务器（与X-Real-IP类似）。X-Forwarded-For $proxy_add_x_forwarded_for;将客户端的原始IP地址添加到X-Forwarded-For头中，通常用于记录请求的原始来源。
proxy_pass http://11.11.78.99:9205/;表示将所有匹配/prod-api/的请求转发到http://11.11.78.99:9205/这个后端服务器。
到这里就能够访问到登录界面了，验证码也能够出来，就算是部署成功了
问题
1.前端打包并配置nignx后，一直转圈，访问不到静态资源
原因：nginx配置问题
解决：检查nginx配置
2.验证码图片不显示
解决：前端重新打包部署
3.无限弹窗
解决：后端路径问题，url后少加一个/
