springboot项目和vue项目从零开始在服务器上打包运行，并使用nginx代理，让外网访问

1、简介

最近博主买了一个服务器，想要将毕设项目博客园系统打包并且在服务器上运行，本文就是讲述如何将项目打包并且在服务器上运行。

2、运行环境搭建

后端开发的是springboot项目，前端是vue3项目，服务器使用的是window。

需要使用到jdk8.0和node，node无版本要求，直接在官网下载即可。

jdk8.0版本下载地址：链接：https://pan.baidu.com/s/1cFZUaW8OUevcAwuibUhjWQ?pwd=xu22 

node下载地址：http://nodejs.cn/download/

简述安装流程：

• jdk8.0 

1. 首先下载jdk安装包 ，下载完成后双击打开，会有一个引导安装的过程，全程点next即可
2. 全程点next，默认安装目录是C:\Program Files\Java
3. 右键点击我的电脑，如果没有我的电脑，就安装下图方式点击

4. 之后按顺序点击，属性-->高级系统设置-->环境变量，在系统变量这一栏，点击新建，输入如下图，变量值如果在安装jdk的时候改了路径，需要改为自己的安装路径，没有修改安装路径的话，就按下图填写即可                                                                                           

5. 在系统变量中，找到path，点击编辑，在变量值的首位输入下图中蓝色标记的字段                                               

6. 到这里，jdk的环境已经搭建好了，可以打开命令行，输入java，如下显示即可            

• node

1. 进入官网，按照下图下载                           
2. 下载完成后，安装引导进行安装，可以变更安装路径，不过需要记住安装的路径，博主使用的是默认安装路径，路径为C:\Program Files\nodejs
3. 进入安装的文件夹，新建node_global文件夹和node_cache文件夹，如下图所示
4. 打开命令行，配置node第三方命令地址输入npm config set prefix "C:\Program Files\nodejs\node_global"和配置node的缓存地址输入npm config set cache "C:\Program Files\nodejs\node_cache"，若安装node的时候修改了安装路径，则需要替换C:\Program Files\nodejs
5. 打开环境变量（位置在上面的jdk安装流程里面可以找到），在系统变量这一栏，点击新建，输入如图       
6. 在用户变量中，找到path，点击编辑，找到里面的C:\Users\Admin\AppData\Roaming\npm，将其替换为下图，C:\Program Files\nodejs\node_global，若安装node的时候修改了安装路径，则需要替换为自己修改的地址                                                                                                                       
7. 到这步node的环境已经搭好了，现在使用node下载cnpm以及配置淘宝镜像，打开命令窗口，输入npm config set registry https://registry.npm.taobao.org，即可配置淘宝镜像，再输入npm i cnpm -g --registry=https://registry.npm.taobao.org，下载cnpm，node配置结束。

3、基础软件安装

• mysql

1. mysql下载链接：MySQL8.0.29下载地址 
2. 安装可以看这个人写的，挺详细的   mysql8.0.28下载和安装详细教程

• redis

1. 如果项目使用到redis的话，可以下载这个redis(window版)下载地址
2. 不需要安装，直接点击文件中的redis-server.exe，即可运行这个redis
3. 如果想要可视化的查看redis，可以下载RedisDesktopManager，下载地址redis-desktop-manager下载地址

 4、项目打包并运行

• 后端springboot项目使用idea打包并在服务器上运行

1. pom.xml文件需要配置打包后的文件，如下图标记处
2. 按顺序点击图片中的按钮
3. 点击上面的按钮后，会生成一个target文件夹，文件夹中会看到一个jar包，这个就是该项目的包了
4. 将jar放在服务器上，打开命令行，输入java -jar 自己的jar包路径  ，这样就可以将后端项目运行起来。博主的项目运行截图如下

• 前端vue项目打包运行，使用nginx代理

1. 博主是使用vscode来编写vue项目的，操作步骤，新建本项目的终端，控制台输入npm run build，会在项目中生成一个dist文件夹，这个就是我们打好的包
2. 在服务器中下载nginx，下载安装后的截图
3. 将dist文件放在html这个文件夹中，图中为了区分我将dist文件重命名为80
4. 修改conf目录下的nginx.conf配置文件
5. 重启nginx，双击nginx.exe
6. 到此即可在外网访问项目了

 5、项目运行截图

项目演示地址vue-manage-system

后台

 前台