Vue前端项目-上线部署-nginx代理解决跨域问题

目录

1、后端项目

1.1、已完成内容

1.2、把后台若依SpringBoot 项目打成 jar

1.3、上传 ruoyi 的jar包到远程服务器

1.4、运行 jar包

1.5、关闭防火墙

2、前端项目

2.1、打包前端项目

2.2、本地安装 nginx

2.3、配置首页和代理

2.4、nginx 命令

---

1、后端项目

1.1、已完成内容

• redis安装
• mysql安装

之前写项目的时候，虽然SpringBoot项目一直都是在本地跑，但是 redis 和 mysql 一直都是连接远程服务器的

在SpringBoot项目中配置 redis 连接信息，如图：

设置连接 mysql 信息，如图：

1.2、把后台若依SpringBoot 项目打成 jar

打包出来的位置:

1.3、上传 ruoyi 的jar包到远程服务器

1.4、运行 jar包

java -jar ruoyi-0.0.1-SNAPSHOT.jar

1.5、关闭防火墙

为了排除防火墙的网络连接的影响，先关闭防火墙进行测试，等到调试好后再将需要开放的端口写入 iptables

service iptables stop

 

2、前端项目

2.1、打包前端项目

npm run build

打包完成后， 在项目根目录下，将生成 dist 的静态资源文件夹

2.2、本地安装 nginx

为了方便就不再搞一台单独机器来做前端服务器，直接使用本机作为前端服务器

nginx 解压即可使用，需要注意的是 不要将 nginx 解压到含有中文的路径中， 否则启动时会报错误！！

错误：

No mapping for the Unicode character exists in the target multi-byte code page

2.3、配置首页和代理

编辑 nginx 的配置文件 nginx.conf

注意: 文件路径分隔符为: '/', 如果写成:'\'，会有问题

/prod-api :这里是个代理, 将以 /prod-api 开头的请求代理到 proxy_pass指定的路径上

2.4、nginx 命令

进入到 nginx 解压目录

启动： start nginx

重写加载配置文件： nginx.exe -s reload