使用 Nginx 部署 Vue + SpringBoot 项目_怎么把写好的vue项目和springboot项目部署到nginx

一. Vue 项目的打包

在 Vue 项目路径下打开 cmd，输入以下命令：

npm run build
1

出现如下提示说明打包成功：

成功后会在项目目录下生成 dist 目录，将该目录下的 index.html 和 static 文件夹压缩后上传到 linux 下的 nginx 的 html 目录下：

解压缩生成 index.html 和 static 文件：

unzip dist.zip
1

二. SpringBoot 项目的打包

使用 IDEA 打开项目，使用 maven 将程序打成 jar 包：

打包命令：

mvn clean
mvn install
1
2

打包成功后，在 target 目录下会生成可运行 jar 包：

将 jar 包上传到 linux 服务器上并运行：

nohup java -jar warm_apis-0.0.1-SNAPSHOT.jar > system.log 2>&1 &
1

三. nginx 的配置与运行

打开配置文件 nginx.conf，修改前端需要监听的端口，以及下面对应路径需要转发的端口：

进入nginx的命令目录，运行服务：

cd /usr/local/nginx/sbin/
./nginx
1
2

打开浏览器，输入服务器的ip:8080，即可访问：