前言：

1、vue-springboot-blog視頻教程：【一周速成】Vue+SpringBoot前后端分離個人博客搭建！！！【簡單易學】
https://www.bilibili.com/video/BV1VU4y1P7AJ?spm_id_from=333.999.0.0
2、vue-springboot-blog github代碼倉庫：
https://github.com/mao888/Personal-blog
3、博客線上網址：
http://www.huchao.vip/blogs

博客的前后端搭建已經基本完成，具體參考：
【Vue+SpringBoot】超詳細！一周開發一個SpringBoot + Vue+MybatisPlus+Shiro+JWT+Redis前后端分離個人博客專案！！！【專案完結】

本文將詳細講解分別在windows本地和阿里云 CentOs7 服務器上分別部署vue+springboot專案的詳細流程，

一、windows環境

1.1、windows環境前端部署

/**
 * 打包之后專案資源參考路徑，比如我們打包之后鏈接是否需要帶專案名稱等，
 * 安裝vue官方的部署說明，我們添加一個vue.config.js檔案   
 */
module.exports={
    publicPath:''
}

打包

npm run build 

nginx.config 配置

location / {
    root   html;
    try_files $uri $uri/ /index.html last;
    index  index.html index.htm;
}

重啟nginx

前端部署成功

1.2、windows環境后端部署

# 跳過測驗打包
mvn clean package -Dmaven.test.skip=true 

如果報如下錯

命令改為

mvn clean install package '-Dmaven.test.skip=true'

ctrl+shift+右鍵打開 powershell

得到target下的 vue-springboot-blog-0.0.1-SNAPSHOT.jar ，然后再執行命令

java -jar vue-springboot-blog-0.0.1-SNAPSHOT.jar --
spring.profiles.active=default

后端上線后，我們再訪問下前端，發現已經可以正常瀏覽網頁啦！spring.profiles.active 表示指定環境組態檔，

二、linux環境

linux環境部署相對復雜一點，因為我們還要部署redis，mysql等，

這次使用docker compose進行編排，一次性搞定部署，

Compose 是一個用于定義和運行多容器 Docker 應用程式的工具，借助 Compose，您可以使用 YAML 檔案來配置應用程式的服務，然后，使用單個命令，從配置中創建并啟動所有服務，要了解有關 Compose 的所有功能的更多資訊，請參閱功能串列，

Compose 適用于所有環境：生產、登臺、開發、測驗以及 CI 作業流，您可以在Common Use Cases 中了解有關每個案例的更多資訊，

使用 Compose 基本上是一個三步程序：

1. 使用 定義您的應用程式的環境，Dockerfile以便它可以在任何地方復制，
2. 定義組成您的應用程式的服務，docker-compose.yml 以便它們可以在隔離的環境中一起運行，
3. 運行docker compose up和碼頭工人組成命令啟動并運行你的整個應用程式，您也可以docker-compose up使用 docker-compose 二進制檔案運行，

Adocker-compose.yml看起來像這樣：

version: "3.9"  # optional since v1.27.0
services:
  web:
    build: .
    ports:
      - "5000:5000"
    volumes:
      - .:/code
      - logvolume01:/var/log
    links:
      - redis
  redis:
    image: redis
volumes:
  logvolume01: {}

docker-compose編排原理圖解

首先安裝docker和docker compose，對于docker知識還不是特別懂的同學，建議自行去補習一下，

2.1、安裝docker

# 安裝
yum install docker 

# 檢驗安裝是否成功
[root@huchao /]# docker --version
Docker version 20.10.8, build 3967b7d

# 啟動
systemctl start docker

2.2、安裝docker compose

可以參考：

# 安裝docker compose
1.從github上下載docker-compose二進制檔案安裝
sudo curl -L "https://github.com/docker/compose/releases/download/1.29.2/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose

2.若是github訪問太慢，可以用daocloud下載
sudo curl -L https://get.daocloud.io/docker/compose/releases/download/1.29.2/docker-compose-`uname -s`-`uname -m` -o /usr/local/bin/docker-compose

# 賦予權限
sudo chmod +x /usr/local/bin/docker-compose

# 檢查是否安裝成功
docker-compose --version

2.3、撰寫Dockerfile檔案

因為我們的專案需要成為docker的鏡像，所以我們必須先撰寫Dockerfile檔案構建我們的專案鏡像然后進行編排，Dockerfile檔案可以幫助我們進行構建

• Dockerfile

FROM java:8

EXPOSE 8085

ADD vue-springboot-blog-0.0.1-SNAPSHOT.jar app.jar
RUN bash -c 'touch /app.jar'

ENTRYPOINT ["java","-jar","/app.jar","--spring.profiles.active=pro"]

上面的幾行命令其實很簡單，首先依賴jdk8環境，對外暴露8085，然后就是復制 vue-springboot-blog-0.0.1-SNAPSHOT.jar到docker容器中并命名為 app.jar ,最后是執行 java -jar /app.jar --spring.profiles.active=pro 使用的是我們另外撰寫的一個線上環境配置

• application-pro.yml

  # DataSource Config
  spring:
    datasource:
      driver-class-name: com.mysql.cj.jdbc.Driver
      url: jdbc:mysql://47.93.20.204:3306/vueblog?useUnicode=true&useSSL=false&characterEncoding=utf8&serverTimezone=Asia/Shanghai
      username: root
      password: 10428376
  
  shiro-redis:
    enabled: true
    redis-manager:
      host: redis:6379
  

2.4、撰寫docker-compose.yml檔案

version: '3'

services:
  nginx:    # 服務名稱  用戶自定義
    image: nginx:latest   # 鏡像版本
    ports:
      - 80:80     # 暴露埠
    volumes:      # 掛載
      - /root/nginx/html:/usr/share/nginx/html
      - /root/nginx/nginx.conf:/etc/nginx/nginx.conf
    privileged: true  # 這個必須要，解決nginx的檔案呼叫的權限問題
  mysql:
    image: mysql:latest
    ports:
      - 3306:3306
    environment:    # 指定 root 用戶的密碼
      - MYSQL_ROOT_PASSWORD=10428376
  redis:
    image: redis:latest
  vue-springboot-blog:
    image: vueblog:latest
    build: .    # 表示以當前目錄下的Dockerfile開始構建鏡像
    ports:
      - 8085:8085
    depends_on:   # 依賴于mysql、redis，其實可以不填，默認已經表示可以
      - mysql
      - redis

2.5、修改application-pro.yml

2.6、準備好nginx的掛載目錄和配置

docker-compose.yml中已經提到，

• 宿主機的掛載目錄： /root/nginx/html
• 掛載配置：/root/nginx/nginx.conf

所以我們在root目錄下新建nginx目錄，并進入nginx目錄下新建html目錄和一個nginx.conf組態檔，

然后讀nginx.conf進行撰寫，具體配置如下：

• nginx.conf

#user root；
worker_processes  1;

events {
    worker_connections  1024;
}


http {
    include       mime.types;
    default_type  application/octet-stream;

    sendfile        on;

    keepalive_timeout  65;

    server {
        listen       80;
        server_name  localhost;

        location / {
            root   /usr/share/nginx/html;
            try_files $uri $uri/ /index.html last;
            index  index.html index.htm;
        }
        
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }
}

2.7、上傳前端

前端打包之后先修改前端呼叫后端的介面，因為我是虛擬機，所以配置如下：

• axios.js

  axios.defaults.baseURL='http://47.93.20.204:8085'
  

  然后npm run build 打包得到dist檔案夾，并上傳到linux的 root/nginx/html目錄下，
  

2.8、部署后端

一切準備就緒之后，我們就開始編排部署了，

首先本地打包vue-springboot-java專案，vue-springboot-blog-0.0.1-SNAPSHOT.jar ，并上傳到linux中，同時docker-compose.yml、Dockerfile也上傳到同一目錄下，

然后執行一下編排命令

# 開始編排
cd ~
docker-compose up -d

其中-d表示后臺服務形式啟動

然后稍等片刻，特別是Building vue-springboot-blog 的時候可能時間有點長，耐心等待即可！

最后提示如下：

# 輸出日志
docker logs -f cfa513d52b85

三、域名

建議買一個屬于自己的域名，這既是一種投資，也是一種學習，當然了，如果對域名一無所知的同學，建議先自行補充一下相關知識，

最終效果，域名與服務器IP成功決議，

至此，Vue+Springboot 前后端分離個人博客網站搭建（從零到最終的服務器部署上線全部完成）！！！

更多相關文章點這里

【Java全堆疊】Java全堆疊學習路線及專案全資料總結【JavaSE+Web基礎+大前端進階+SSM+微服務+Linux+JavaEE】

https://blog.csdn.net/qq_45696377/article/details/110575362