項目回顧

書接上文，我們使用springboot+jwt+shiro+vue+elementUI+axios+redis+mysql完成一個前后端分離的博客項目
csdn鏈接：https://blog.csdn.net/weixin_45683778/article/details/139002415
github地址：https://github.com/huang-hanson/vueblog

項目展示地址：http://47.116.123.21:81/blogs

這部分介紹如何部署我們的項目

工具

• xshell 7 綠色破解版
• Navicat 11 簡體中文

上線準備

這里我們同步演示怎么部署到win環境和linux(centos7)系統中，前端服務器采用nginx部署并使用docker統一管理前后端服務器。
所以我們會用到:

• nginx
• docker compose

1、win

win環境我就用本機來演示了，我們需要分別打包前后端，前后端打包都是一條命令即可，只不過我們打包之前注意需要配置好線上的環境參數等

1.1、前端

先來配置一下后端的調用路徑，因為現在部署在本地localhost，所以在axios.js中，我們配置好鏈接，因為等下后端部要也是本機，所以我這里直接這樣配置就好了，如下:

• srclaxios.js

axios.defaults.baseURL = "http://localhost:8082"

上面配置的就是前端訪問后端接口的服務。

然后前端部署還需要考慮一個問題:打包之后項目資源引用路徑，比如我們打包后鏈接是否需要帶項目名稱等。按照Vue官方的部罷說明，我們添加一個vue.config.js文件，

• vueblog-vue/vue.config.js

module.exports = {publicPath: '/'
}

當然了，pubicPath默認其實是空的，也就是publicPath:"，兩個效果貌似其實是一樣的，哈哈哈，我只是提醒一下有這回事而已，嘿嘿。

設置完畢之后，我們執行打包命令:

#打包命令
npm run build

命令執行之后，我們在項目根目錄下就可以找到一個dist的目錄，這個就是打包之后的文件夾里面有個index.html，但是我們點擊直接打開是看不到任何內容的，這時候，我們需要部署到nginx中。

注：首次打包需要npm install一下

首先我們下載一個nginx，下載地址:http://nginx.org/en/download.html，這里我們下載nginx/Windows-1.26.0版本，下載之后解壓zip。根據我們對nginx的熟悉，靜態文件我們放在html文件夾下面，所以先把html文件夾中的index.html和50x.html刪掉，然后把打包出來的dist文件夾內的所有文件都復制到nginx的html中，如圖:

雙擊nginx.exe啟動nginx，然后瀏覽器輸入http://localhost，出現了我們熟悉的界面，雖然沒有博客數據，鏈接也自動跳轉到了http://localhost/blogs，

我們點擊任意一個鏈接或者按鈕或者劇新界面，這時候出現了404:

刷新之后nginx就找不到路由了，這是為啥，得和你們科普一下，vue項目的入口是index.html文件，nginx路由的時候都必領要先經過這個文件，所以我們得給nginx定義一下規則，讓它匹配不到資源路徑的時候，先去讀取index.html，然后再路由。所以我們配置一下nginx.conf文件。具體操作就是找到location,添加上一行代碼try_files $uri $uri/ /index.html last;如下:

• nginx-1.26.0/conf/nginx.conf

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

這一行代碼是什么意思呢?
try_files的語法規則:格式1:try_files file…uri，表示按指定的們file順序查找存在的文件，并使用第一個找到的文件進行請求處理，last表示匹配不到就內部直接匹配最后一個。

重啟nginx之后，鏈接再刷新都正常啦。但是沒有數據，所以我們去部署一下后端。windows環境nginx的重啟我一般都是打開任務管理器直接干掉nginx進程，然后再重新雙擊的~~

重啟之后，這樣就能找到我們的資源路徑了（例如：通過logs，跳轉到登錄頁）

前端已經部署完畢，但是沒有數據進來，現在部署后端。

1.2、后端

后端的打包就簡單多了，應該大家都挺熟悉的，注意配置redis、mysql的鏈接密碼啥的，然后執行命令，本機測試，redis和mysql我都已經提前安裝好的了，sql文件也在vueblog-java的resources日錄下

對了，pom.xml文件里面，spring-boot-maven-plugin之前注釋掉了，現在一定要打開。不然執行jar會找不到主類。

• pom.xml

    <build><plugins><plugin><groupId>org.springframework.boot</groupId><artifactId>spring-boot-maven-plugin</artifactId></plugin></plugins></build>

執行打包命令:

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

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

或者直接通過maven工具

在idea右側直接運行clean–>test–>package，左邊會出現target文件和jar包

java jar vueblog-0.0.1-SNAPSHOT.jar --spring.profiles.active=default

后端上線之后，我們再訪問下前端，發現已經可以正常瀏覽網頁啦!spring.profiles.active表示指定環境配置文件。

圖中后端啟動完成，端口為8082，刷新前端頁面

到此，win部署完成。

2、linux環境

linux環境部署相對復雜一點，因為我們還要部署redis、mysql等。我們使用docker compose來編排我們的服務，一起性搞定部罷。
二話不說，我們先來安裝一下docker和docker compose，對于docker知識還不是特別懂的同學，建議自行去補習補習哈。

2.1、安裝docker

#安裝
yum install docker#檢驗安裝是否成功
[rootalocalhost opt]# docker--version
Docker version 26.0.0, build 2ae903e#啟動
systemctl start docker

2.2、安裝docker compose

可以參考:https://docs.docker.com/compose/install/

sudo curl -L "https://github.com/docker/compose/releases/download/1.27.4/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose或者sudo wget "https://github.com/docker/compose/releases/download/v2.16.0/docker-compose-linux-x86_64" -O /usr/local/bin/docker-composesudo chmod +x /usr/local/bin/docker-compose#檢查是否安裝成功
docker-compose --version

2.3、編寫Dockerfile文件

因為我們的項目需要成為docker的鏡像，所以我們必須先編寫Dockerfile文件構建我們的項目鏡像然后進行編排，Dockerfile文件可以幫我們進行構建。

• Dockerfile

FROM openjdk:8EXPOSE 8080ADD vueblog-0.0.1-SNAPSHOT.jar app.jar
RUN bash -c 'touch /app.jar'ENTRYPOINT ["java","-jar","/app.jar","--spring.profiles.active=pro"]

2.4、編寫docker-compose.yml文件

我們需要用到的軟件與服務分別有nginx、mysq、redis、還有我們的springboot項目，所以編寫如下:

• docker-compose.yml

version: '3'services:nginx: # 服務名稱image: nginx:latest # 最新版本的nginxports:#- 80:80 # 把docker容器的80端口映射到宿主機的80端口- 81:81volumes:- /root/nginx/html:/usr/share/nginx/html  # 將docker中額html文件夾映射到宿主機的/root/nginx/html目錄下- /root/nginx/nginx.conf:/etc/nginx/nginx.conf  # 將docker中額nginx.conf配置文件映射到宿主機的/root/nginx/nginx.conf目錄下privileged: true # 這個必須要加，解決nginx的文件調用權限問題mysql:image: mysql:5.7.27ports:#- 3306:3306- 8081:3306environment:- MYSQL_ROOT_PASSWORD=adminredis:image: redis:latestcommand: redis-server /etc/redis/redis.confvolumes:- ./redis/data:/data- /root/redis/redis.conf:/etc/redis/redis.conf  # 將docker中額nginx.conf配置文件映射到宿主機的/root/nginx/nginx.conf目錄下ports:- 6379:6379vueblog:image: vueblog:latestbuild: .   # 這個不能從docker hub中去拉取，需要自己構建，會去尋找同級下的Dockerfile文件（文件中的jar包）進行構建ports:- 8082:8082depends_on:- mysql- redis

上面注釋寫的很明白

2.5、修改application-pro.yml

然后我們再回頭看看applicaiion-pro.yml文件，mysql和redls的鏈接之前還是localhost，現在我們需要修改成容器之間的調用，如何知道mysql和redis的鏈接地址呢?docker compose就幫我們解決了這個問題，我們可以使用鏡像容器的服務名稱來表示鏈接。比如docker-compose.yml中mysql的服務名稱就叫mysql、redis就叫redis。

# DataSource Config
spring:datasource:driver-class-name: com.mysql.cj.jdbc.Driverurl: jdbc:mysql://mysql:8081/vueblog?useUnicode=true&useSSL=false&characterEncoding=utf8&serverTimezone=Asia/Shanghaiusername: rootpassword: admin
shiro-redis:enabled: trueredis-manager:host: redis:6379

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

docker-compose.yml中已經提到

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

所以我們在root目錄下新建nginx目錄，并進入nginx目錄下新建html目錄和一個nginx.conf配置文件。

axios.js文件中url需要改成你的linux機器ip

重新前端代碼打包，壓縮后托到html文件夾下面

將dist文件下面的文件全部轉移到html下

編寫nginx.config配置文件，其中可以參考win下的配置文件

將location 的html地址改成掛載的目錄

# 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;listen       81;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、部署后端服務

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

首先本地打包vueblog項目，vueblog-0.0.1-SNAPSHOT.jar，并上傳到linux中，同時docker-compose.yml、Dockerfile也上傳到同一目錄下。如圖所示:

然后我們執行一下編排命令:

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

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

然后我們稍等片刻，特別是開始Building vueblog的時候可能時間有點長，耐心等待即可!最后提示如下·

訪問連接：http://47.116.123.21:81/blogs（你自己的ip+port）我這里為了避免沖突，我將80改成了81端口

發現沒有數據，需要導入sql表

DROP TABLE IF EXISTS `m_blog`;
/*!40101 SET @saved_cs_client     = @@character_set_client */;
SET character_set_client = utf8mb4 ;
CREATE TABLE `m_blog` (`id` bigint(20) NOT NULL AUTO_INCREMENT,`user_id` bigint(20) NOT NULL,`title` varchar(255) NOT NULL,`description` varchar(255) NOT NULL,`content` longtext,`created` datetime NOT NULL ON UPDATE CURRENT_TIMESTAMP,`status` tinyint(4) DEFAULT NULL,PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=21 DEFAULT CHARSET=utf8mb4;
/*!40101 SET character_set_client = @saved_cs_client */;DROP TABLE IF EXISTS `m_user`;
/*!40101 SET @saved_cs_client     = @@character_set_client */;
SET character_set_client = utf8mb4 ;
CREATE TABLE `m_user` (`id` bigint(20) NOT NULL AUTO_INCREMENT,`username` varchar(64) DEFAULT NULL,`avatar` varchar(255) DEFAULT NULL,`email` varchar(64) DEFAULT NULL,`password` varchar(64) DEFAULT NULL,`status` int(5) NOT NULL,`created` datetime DEFAULT NULL,`last_login` datetime DEFAULT NULL,PRIMARY KEY (`id`),KEY `UK_USERNAME` (`username`) USING BTREE
) ENGINE=InnoDB AUTO_INCREMENT=2 DEFAULT CHARSET=utf8;
/*!40101 SET character_set_client = @saved_cs_client */;INSERT INTO `vueblog`.`m_user` (`id`, `username`, `avatar`, `email`, `password`, `status`, `created`, `last_login`) VALUES ('1', 'hanson', 'https://image-1300566513.cos.ap-guangzhou.myqcloud.com/upload/images/5a9f48118166308daba8b6da7e466aab.jpg', NULL, '96e79218965eb72c92a549dd5a330112', '0', '2020-04-20 10:44:01', NULL);

再次刷新項目就部署成功了；