Springboot+Vue網頁部署上線全教程
文章目錄
- Springboot+Vue網頁部署上線全教程
- 1.環境說明
- 2.Mysql安裝部署
- 2.1 安裝并修改密碼
- 2.2 防火墻開放
- 3.Spring Boot項目打包
- 3.1 配置公網ip
- 3.2 安裝 Maven
- 3.3 使用 Maven 打包 Spring Boot 項目
- 3.4 Centos運行Jar包
- 3.4.1 安裝 Java 1.8 環境
- 3.4.2 上傳 Spring Boot .jar 包到服務器
- 3.4.3 后臺運行 .jar 包
- 3.4.4 查看運行情況
- 3.4.5 設置開機啟動(可選)
- 4.Vue項目打包
- 4.1安裝 Node.js
- 4.2配置國內鏡像源
- 4.3 修改 API 路徑為部署的 Spring Boot 公網地址
- 4.4 打包并運行 Vue 項目
- 5.Nginx部署Vue
- 5.1 Nginx安裝
- 5.2 修改Nginx配置
- 5.3 將打包文件放到對應位置
- 6.總結
1.環境說明
組件/技術 | 版本號 | 說明 |
---|---|---|
操作系統 | CentOS 7.6 64bit | Linux 服務器操作系統 |
JDK | 1.8 | Java 8 運行環境 |
Spring Boot | 2.5.9 | 后端框架,構建 REST 接口 |
Vue.js | 2.6.14 | 前端框架,構建用戶界面 |
MySQL | 8.0 | 關系型數據庫管理系統 |
Nginx | 1.24.0 | Web 服務器,前后端反向代理 |
服務器 | 騰訊云 | 安裝操作系統 |
需要幫助部署,可以私信本人
需要幫助部署,可以私信本人
需要幫助部署,可以私信本人
需要幫助部署,可以私信本人
2.Mysql安裝部署
2.1 安裝并修改密碼
1. 進入安裝目錄并創建 MySQL 文件夾
cd /usr/local
mkdir -p mysql
cd mysql
2. 下載 MySQL 安裝源
wget https://repo.mysql.com//mysql80-community-release-el7-3.noarch.rpm
或從官網下載安裝包后上傳服務器:https://dev.mysql.com/downloads/
3. 添加 YUM 源依賴
yum -y localinstall mysql80-community-release-el7-3.noarch.rpm
4. 安裝 RPM 包(如未自動完成)
rpm -ivh mysql80-community-release-el7-3.noarch.rpm
5. 安裝 MySQL Server
yum install mysql-server
如果遇到 GPG 驗證錯誤:
yum install mysql-community-server --nogpgcheck
6. 啟動并設置開機啟動
systemctl start mysqld
systemctl enable mysqld
systemctl daemon-reexec
7. 驗證服務狀態
service mysqld status
netstat -anp | grep 3306
8. 查看 root 臨時密碼
grep "A temporary password" /var/log/mysqld.log
9. 使用初始密碼登錄 MySQL
mysql -u root -p
10. 修改 root 密碼(強密碼)
ALTER USER 'root'@'localhost' IDENTIFIED BY 'MyDifficultPass4@';
11. 修改為簡單密碼(開發測試用)
SHOW VARIABLES LIKE 'validate_password%';-- 修改策略
SET GLOBAL validate_password.length = 6;
SET GLOBAL validate_password.policy = 0;
SET GLOBAL validate_password.check_user_name = OFF;-- 設置簡單密碼
ALTER USER 'root'@'localhost' IDENTIFIED BY '123456';
12. 開啟遠程連接權限
ALTER USER 'root'@'%' IDENTIFIED BY '123456';
GRANT ALL PRIVILEGES ON *.* TO 'root'@'%' WITH GRANT OPTION;
FLUSH PRIVILEGES;
2.2 防火墻開放
-- 啟動防火墻(如果關閉)
systemctl start firewalld-- 開放端口
firewall-cmd --zone=public --add-port=3306/tcp --permanent
firewall-cmd --reload-- 重啟防火墻
systemctl restart firewalld
云服務器(如阿里云)還需在控制臺開放安全組端口 3306。
3.Spring Boot項目打包
3.1 配置公網ip
在 application.properties
或 application.yml
文件中,修改數據庫連接配置,使用云服務器的公網 IP 地址:
spring:datasource:driver-class-name: com.mysql.cj.jdbc.Driverusername: root #你本地的數據庫用戶名password: studyManager1! #你本地的數據庫密碼url: jdbc:mysql://<云服務器公網IP>:3306/study_manager?useUnicode=true&characterEncoding=utf-8&allowMultiQueries=true&useSSL=false&serverTimezone=GMT%2b8&allowPublicKeyRetrieval=true
確保 MySQL 服務器允許遠程連接,并在防火墻中開放 3306 端口。
3.2 安裝 Maven
1. 下載 Apache Maven
- 訪問 Maven 官方下載頁面:
Apache Maven,選擇適合 Windows 的二進制壓縮包(.zip
格式)。
2. 解壓 Maven 壓縮包
- 將下載的
apache-maven-3.x.x-bin.zip
文件解壓到你希望安裝 Maven 的目錄,例如:
C:\Program Files\Apache\apache-maven-3.x.x
。Reddit+3phoenixNAP | Global IT Services+3GeeksforGeeks+3
3. 設置環境變量
- 配置
MAVEN_HOME
環境變量:- 右鍵點擊“此電腦”或“計算機”,選擇“屬性”。
- 點擊“高級系統設置”,然后點擊“環境變量”。
- 在“系統變量”部分,點擊“新建”,輸入:
- 變量名:
MAVEN_HOME
- 變量值:
C:\Program Files\Apache\apache-maven-3.x.x
- 變量名:
- 點擊“確定”。
- 將 Maven 的
bin
目錄添加到Path
環境變量:- 在“系統變量”部分,找到并選擇
Path
,點擊“編輯”。 - 點擊“新建”,輸入:
%MAVEN_HOME%\bin
- 點擊“確定”。Stack Overflow
- 在“系統變量”部分,找到并選擇
4. 配置 JAVA_HOME
環境變量
- 確保已安裝 Java JDK,并設置
JAVA_HOME
環境變量:- 在“系統變量”部分,點擊“新建”,輸入:
- 變量名:
JAVA_HOME
- 變量值:
C:\Program Files\Java\jdk1.8.0_xx
(根據實際安裝路徑調整)
- 變量名:
- 點擊“確定”。
- 在“系統變量”部分,點擊“新建”,輸入:
5. 驗證 Maven 安裝
- 打開命令提示符(CMD),輸入以下命令:
mvn -version
- 如果安裝成功,將顯示 Maven 的版本信息。
3.3 使用 Maven 打包 Spring Boot 項目
在項目根目錄下執行:
mvn clean package
生成的 JAR 文件位于 target/
目錄下。
3.4 Centos運行Jar包
3.4.1 安裝 Java 1.8 環境
1.執行以下命令安裝 Java 1.8:
sudo yum install -y java-1.8.0-openjdk java-1.8.0-openjdk-devel
2.安裝完成后驗證版本:
java -version
3.確保輸出包含:
openjdk version "1.8.0_xxx"
3.4.2 上傳 Spring Boot .jar 包到服務器
1.使用 scp 上傳 jar 包:
scp yourapp.jar root@your_server_ip:/home/youruser/yourapp/
2.或使用 XFTP、寶塔等工具上傳到指定目錄(如 /home/youruser/yourapp/
)。
3.4.3 后臺運行 .jar 包
1.進入 jar 包所在目錄:
cd /home/youruser/yourapp
2.使用 nohup 后臺運行并輸出日志到 app.log
:
nohup java -jar yourapp.jar > app.log 2>&1 &
3.4.4 查看運行情況
1.查看 Java 進程是否在運行:
ps -ef | grep java
2.實時查看日志內容:
tail -f app.log
3.4.5 設置開機啟動(可選)
1.創建 systemd 服務文件:
sudo vi /etc/systemd/system/yourapp.service
2.填寫以下內容(根據實際路徑修改):
[Unit]
Description=Spring Boot App
After=network.target[Service]
User=root
ExecStart=/usr/bin/java -jar /home/youruser/yourapp/yourapp.jar
SuccessExitStatus=143
Restart=always
RestartSec=10[Install]
WantedBy=multi-user.target
3.保存后重新加載 systemd 并啟用服務:
sudo systemctl daemon-reload
sudo systemctl enable yourapp.service
sudo systemctl start yourapp.service
4.Vue項目打包
4.1安裝 Node.js
- 下載
- 訪問 Node.js官網,選擇與系統匹配的版本下載(如 Windows 64 位)。
- 安裝
- 雙擊安裝包,按照提示依次點擊 Next,接受協議,選擇安裝目錄(如:
E:\devTools\nodejs
),完成安裝。
- 添加環境變量
- 打開「系統屬性 → 環境變量 → 系統變量 → Path」,添加 Node.js 安裝路徑(如:
E:\devTools\nodejs\
)。
4.1.1 驗證安裝是否成功
在命令行中輸入以下命令:
node -v
npm -v
能正確輸出版本號即表示安裝成功。
4.1.2修改全局模塊存儲路徑
- 查看默認路徑
npm get prefix
npm get cache
- 創建新目錄
在 Node.js 安裝目錄下新建:
node_global
(用于存放全局模塊)node_cache
(用于存放緩存)
- 修改路徑配置
npm config set prefix "E:\devTools\nodejs\node_global"
npm config set cache "E:\devTools\nodejs\node_cache"
并將 E:\devTools\nodejs\node_global
添加到環境變量 Path 中。
- 測試
npm install express -g
檢查是否安裝成功,并驗證模塊是否出現在 node_global\node_modules
中。
若安裝失敗,多為權限問題,請確保
nodejs
及其子目錄權限已全部勾選“完全控制”。
4.2配置國內鏡像源
- 更改 npm 鏡像源為淘寶鏡像
npm config set registry https://registry.npmmirror.com
npm config get registry
- 安裝 cnpm(可選)
npm install -g cnpm --registry=https://registry.npmmirror.com
驗證是否安裝成功:
cnpm -v
若命令無效,確認是否添加 node_global
到環境變量并重啟命令行。
4.3 修改 API 路徑為部署的 Spring Boot 公網地址
1. 找到 Axios 請求封裝文件(如 src/utils/request.js
)
打開 Vue 項目目錄,找到你封裝請求的文件,一般是 request.js
,內容可能如下:
import axios from 'axios'const request = axios.create({baseURL: process.env.VUE_APP_BASEURL, // 請求地址timeout: 30000
})export default request
2. 在項目根目錄創建或編輯 .env.production
文件
添加以下內容,將 http://你的公網IP:端口號
替換成你部署的 Spring Boot 地址:
VUE_APP_BASEURL=http://123.123.123.123:8080
這個變量會在打包生產環境時替換 process.env.VUE_APP_BASEURL
。
3. 確保 request.js
中引用的是環境變量而不是寫死的地址
你已經使用了 process.env.VUE_APP_BASEURL
,只要打包時選擇生產環境就會讀取 .env.production
文件中的值。
4. 可選:在控制臺打印確認變量是否生效
你可以在 request.js
中加一句:
console.log("當前后端API地址:", process.env.VUE_APP_BASEURL)
打包后打開瀏覽器控制臺確認地址是否正確。
當然上面這個步驟不是一定這樣,可以根據不同項目尋找即可
4.4 打包并運行 Vue 項目
1. 確保 package.json
中包含 build 命令
打開 package.json
文件,確認有如下內容:
"scripts": {"serve": "vue-cli-service serve","build": "vue-cli-service build"
}
2. 使用 build 命令進行打包
在終端中進入項目目錄,執行以下命令:
npm run build
Vue 會讀取 .env.production
,并將打包好的靜態資源輸出到 dist/
文件夾。
2. 一般打包后的目錄
dist/
├── index.html
├── favicon.ico(如果有設置)
├── css/
│ └── xxx.[hash].css
├── js/
│ ├── chunk-vendors.[hash].js
│ ├── app.[hash].js
│ └── xxx.[hash].js
├── img/
│ └── 圖片資源(如果有)
└── static/(某些配置下可能會有)├── css/├── js/└── img/
5.Nginx部署Vue
5.1 Nginx安裝
1.下載
Nginx官網下載地址
2.將.tar.gz文件放到/opt
目錄下(其他目錄也行),解壓文件
tar -zxvf nginx-1.24.0.tar.gz
3.cd進入解壓目錄,執行安裝命令(安裝到了 usr/local/nginx)
./configure --prefix=/usr/local/nginx
4.再執行
make
make insatll
5.查看/usr/local
是否有nginx目錄
6.防火墻開放端口(如果是云服務器,還需要手動添加端口)
firewall-cmd --zone=public --add-port=80/tcp --permanent # 開放80端口
firewall-cmd --reload # 重啟
7.為了方便全局操作nginx,添加服務腳本
vi /usr/lib/systemd/system/nginx.service
[Unit]
Description=nginx - web server
After=network.target remote-fs.target nss-lookup.target
[Service]
Type=forking
PIDFile=/usr/local/nginx/logs/nginx.pid
ExecStartPre=/usr/local/nginx/sbin/nginx -t -c /usr/local/nginx/conf/nginx.conf
ExecStart=/usr/local/nginx/sbin/nginx -c /usr/local/nginx/conf/nginx.conf
ExecReload=/usr/local/nginx/sbin/nginx -s reload
ExecStop=/usr/local/nginx/sbin/nginx -s stop
ExecQuit=/usr/local/nginx/sbin/nginx -s quit
PrivateTmp=true
[Install]
WantedBy=multi-user.target
systemctl daemon-reload # 重新加載服務
systemctl start nginx.service # 重啟服務
8.重啟nginx服務
systemctl reload nginx
systemctl enable nginx.service # 開機啟動
5.2 修改Nginx配置
在usr/local目錄下:
頁面默認目錄是html
,配置文件在conf
中的nginx.conf
原本一臺服務器只能對應一個站點,通過虛擬主機技術可以虛擬化成多個站點同時對外提供服務。
虛擬主機域名配置
-
在nginx目錄下創建兩臺主機文件夾并且分別在里面編寫內容不同index.html,用來測試訪問
-
修改nginx配置文件
server {listen 80;server_name 110.110.110.100;location / {root /usr/local/nginx/html/front;index index.html;}error_page 500 502 503 504 /50x.html;location = /50x.html {root /usr/local/nginx/html;}}server {listen 8081;server_name 110.110.110.100;root /usr/local/nginx/html/backend;index index.html;location / {try_files $uri $uri/ /index.html;}error_page 500 502 503 504 /50x.html;location = /50x.html {root /usr/local/nginx/html;}}
第一個 server
塊(監聽 80 端口)
server {listen 80;server_name http://110.110.110.100;
作用:
監聽 80 端口(HTTP 默認端口),域名或 IP 為 http://110.110.110.100
。
location / {root /usr/local/nginx/html/front;index index.html;}
作用:
當用戶訪問根路徑 /
(如 http://110.110.110.100)時,從 /usr/local/nginx/html/front/
目錄中查找 index.html
作為首頁進行展示。也就是說,這是你 Vue 前端打包后放置的位置。
error_page 500 502 503 504 /50x.html;location = /50x.html {root /usr/local/nginx/html;}
}
作用:
當出現 500/502/503/504 錯誤時,返回 50x.html
頁面,文件存放在 /usr/local/nginx/html/
目錄下。
第二個 server
塊(監聽 8081 端口)
server {listen 8081;server_name 110.110.110.100;
作用:
監聽 8081 端口(自定義端口),通常用于部署后臺管理界面、二級項目、前端測試項目等。
root /usr/local/nginx/html/backend;index index.html;
作用:
默認的根路徑指向 /usr/local/nginx/html/backend/
,用于加載后臺前端資源。
location / {try_files $uri $uri/ /index.html;}
5.3 將打包文件放到對應位置
由5.2配置可知,我用了兩個頁面,一個后臺管理系統,一個前臺頁面,只需要將打包的文件放到對應的目錄下即可
前臺打包代碼
后臺打包代碼
將5.2和5.3都完成之后,就可以重啟Nginx服務了
# 有時不成功
systemctl reload nginx
# 保險起見,停止讓后在啟動
systemctl stop nginx
systemctl start nginx
自此就完成了整個項目的部署,可以輸出一下網址來訪問網頁了
http://110.110.110.100:8081 # 后臺
http://110.110.110.100/ # 前臺
6.總結
1. 環境說明
首先確定服務器操作系統為 CentOS,確保具備基本的網絡連接和 root 或 sudo 權限,為后續安裝與配置打下基礎。
2. MySQL 安裝部署
通過 Yum 安裝 MySQL,并完成初始化設置,包括修改 root 密碼和開放防火墻端口,使數據庫可以遠程訪問并為 Spring Boot 提供持久化支持。
3. Spring Boot 項目打包與部署
配置后端項目使用公網 IP,使其接口可被前端訪問。然后安裝 Maven 工具,通過 mvn package
命令打包生成 .jar
文件。在服務器上安裝 Java 1.8,并通過 nohup java -jar
命令在后臺運行后端服務,附帶日志輸出。為提升可靠性,還提供 systemd 服務方式實現開機自啟動。
4. Vue 項目打包
安裝 Node.js 和 npm,并配置國內鏡像源以加快依賴安裝。將前端請求地址替換為實際部署的 Spring Boot 公網地址,再使用 npm run build
命令打包生成靜態資源。
5. Nginx 部署 Vue 前端
在服務器中安裝并配置 Nginx,分別配置 server
塊監聽 80 或其他端口,設置靜態資源路徑,并適配 Vue Router 的 history 模式。最后將 Vue 打包后的 dist
文件夾內容拷貝到 Nginx 指定目錄,實現前端頁面的訪問上線。