springboot+vue项目部署到外网服务器的完整步骤（前后端分离 分别部署）

前言：

我使用的是腾讯云服务器
需要安装如下：
jdk1.8
mysql5.5
Nginx
           

mysql5.5在linux终端安是真的麻烦 后来是用小伙伴提前在宝塔安好的mysql，记得版本是5.5

关于jdk和Nginx的步骤可见下面的有道云笔记，比较容易 出现报错不要慌 搜搜csdn 很好解决

https://blog.csdn.net/weixin_45678130/article/details/119891339

https://blog.csdn.net/weixin_45678130/article/details/119890985

正文：

接下来假设大家是都安好环境的，mysql安好记得可以用本地navcation连接一下远程服务器的mysql，步骤我之前记下了如下的博客：

https://blog.csdn.net/weixin_45678130/article/details/119879924

第一步：vue项目的打包

首先在项目终端下 运行命令打包：

npm run build
           

最后会生成一个dist文件夹·，利用xftp将dist文件夹传到服务器上

例如我传到了/home/ubuntu/serve（自己建一个文件夹）

cd /home/ubuntu/serve
           

然后修改一下配置文件，将localhost修改为外网ip：

vim dist/static/config.js
           

把locaohsot改成自己的外网ip

第二步：springboot项目的打包

1、首先在目录下 新建一个application-prod-properties文件 （作为连接远程数据库的配置文件）

application-prod-properties：

spring.datasource.url=jdbc:mysql://外网ip:3306/springboot-vue?useUnicode=true&characterEncoding=utf-8&allowMultiQueries=true&useSSL=false&serverTimezone=GMT%2b8
spring.datasource.username=root
spring.datasource.password=填自己的

file.ip=外网ip

#spring.jackson.date-format=yyyy-MM-dd

           

2、然后进行项目的打包：

最后生成了如下这个jar包，把他复制到桌面上先

然后用xftp传输到服务器上（我自己又建了一个springboot目录，然后放了进去）：

3、终端执行运行命令：

(后面这句很关键 代表要运行prod那个数据库配置文件）

正常就是下面这个输出 25728pid 每个人都不一样

第三步：Nginx的配置

先进入Nginx，找到配置文件，进行修改

cd /usr/local/Nginx/
vim conf/Nginx.conf
           

location    / {
            root   /home/ubuntu/server/dist;
            index  index.html index.htm;
        }
        location /api {
                proxy_pass http://localhost:9090/;
        }

           

1、80代表默认Nginx接口 可以修改 也就是项目接口

2、/home/user/server/dist是项目的文件存储位置 这里要修改成你自己的

我的是这个

最后重启一下Nginx服务器

nginx -s reload
           

3、加一下那个后端接口 9090是我的springboot项目接口

记得在远程服务器上在安全组把9090端口放开

结尾

最后打开外网ip+80端口就可以了！！！ 当然因为80端口是默认的 所以不加80也可以

但还有一个很重要的地方没配置，所以肯定登陆不进去

远程数据库没有把表导进去

建个库把你本地的表复制过去就可以了