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也可以

但還有一個很重要的地方沒配置，是以肯定登陸不進去

遠端資料庫沒有把表導進去

建個庫把你本地的表複制過去就可以了