SpringBoot+Vue項(xiàng)目部署實(shí)現(xiàn)傳統(tǒng)方式

更新時(shí)間：2024年01月19日 09:48:24 作者：斯拜的饅

我們?cè)谶M(jìn)行前后端分離開(kāi)發(fā)的時(shí)候,一般是將前端項(xiàng)目部署到nginx服務(wù)器上,與后端項(xiàng)目分開(kāi)部署,這篇文章主要給大家介紹了關(guān)于SpringBoot+Vue項(xiàng)目部署實(shí)現(xiàn)傳統(tǒng)方式的相關(guān)資料,需要的朋友可以參考下

一，后端部署

1，項(xiàng)目打包

1.1，引入插件

該插件會(huì)將SpringBoot項(xiàng)目打包成一個(gè)可以運(yùn)行的jar包，可以用 java -jar jar包名稱 啟動(dòng)。

<build>
        <!-- plugins 標(biāo)簽：定制化構(gòu)建過(guò)程中所使用到的插件 -->
        <plugins>
            <!-- plugin 標(biāo)簽：一個(gè)具體插件 -->
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
</build>

1.2，maven打包

可以通過(guò)maven命令行直接打包，也可以通過(guò)IDEA打包

# -Dmaven.test.skip=true表示打包的時(shí)候跳過(guò)測(cè)試
mvn clean install -Dmaven.test.skip=true

1.3，修改項(xiàng)目版本號(hào)

默認(rèn)創(chuàng)建的項(xiàng)目是快照版本，比如1.0.SANPSHOT，想修改的話只需要在pom.xml文件中找到項(xiàng)目的配置信息進(jìn)行修改。

1.4，驗(yàn)證

打包好的jar包是可以用java -jar 命令直接啟動(dòng)的，保險(xiǎn)起見(jiàn)可以在上傳到服務(wù)器之前先在本地啟動(dòng)測(cè)試一下。

1.5，生成配置文件

雖然項(xiàng)目打包后用jar包里的配置文件也可以啟動(dòng)，但是推薦將配置文件提取出來(lái)，一般開(kāi)發(fā)環(huán)境和生產(chǎn)環(huán)境的配置是不一樣的，通過(guò)加載外部配置文件的方式啟動(dòng)，更便于維護(hù)配置信息，這里生成一個(gè)web-server.yml的配置文件，里面是項(xiàng)目的配置信息，可以根據(jù)項(xiàng)目實(shí)際需要生成。

2，服務(wù)器環(huán)境搭建

項(xiàng)目在本地可以正常啟動(dòng)，這是因?yàn)楸镜赜邪惭bJDK，數(shù)據(jù)庫(kù)等，若想要項(xiàng)目在服務(wù)器上也能正常啟動(dòng)，則同樣需要
安裝項(xiàng)目的依賴。

2.1，安裝JDK

1）下載

地址: JDK8下載

下載需要注冊(cè)一個(gè)Oracle的地址，可以采用rpm的安裝方式，也可以采用tar.gz的安裝方式。

2）tar包安裝

將下載好的tar包上傳到服務(wù)器，可以通過(guò)Xshell+Xftp，也可以通過(guò)MobaXterm

# 1.將JDK解壓縮到指定目錄，-C參數(shù)是將JDK解壓之后文件放入usr目錄中
tar -zxvf jdk-8u171-linux-x64.tar.gz -C /usr/

# 2.進(jìn)入jdk解壓縮目錄查看
cd /usr/jdk1.8.0_171/

# 3.查看詳細(xì)信息
[root@localhost jdk1.8.0_171]# ls
bin        db       javafx-src.zip  lib      man          release THIRDPARTYLICENSEREADME-JAVAFX.txt  COPYRIGHT  include  jre             LICENSE  README.html  src.zip  THIRDPARTYLICENSEREADME.txt

# 4.配置環(huán)境變量
vi /etc/profile
	 
# 5.在文件末尾加入如下配置
export JAVA_HOME=/usr/jdk1.8.0_171
export PATH=$PATH:$JAVA_HOME/bin

# 6.加載配置生效
source /etc/profile    加載配置生效
reboot                 重啟系統(tǒng)
#注意: 以上兩個(gè)選項(xiàng)選擇任意一個(gè)即可source可以不用重啟立即生效,某些情況下source無(wú)法生效時(shí),可以使用重啟試試

# 7.測(cè)試環(huán)境變量
java
javac
java -version

3）rpm安裝

# 1.安裝jdk
[root@localhost ~]# rpm -ivh jdk-8u171-linux-x64.rpm 
		準(zhǔn)備中...                          ################################# [100%]
		正在升級(jí)/安裝...
   		1:jdk1.8-2000:1.8.0_171-fcs        ################################# [100%]
			Unpacking JAR files...
        tools.jar...
        plugin.jar...
        javaws.jar...
        deploy.jar...
        rt.jar...
        jsse.jar...
        charsets.jar...
        localedata.jar...

# 2.搜索默認(rèn)安裝位置
[root@localhost ~]# find / -name "java"
/usr/java/jdk1.8.0_171-amd64/bin/java
/usr/java/jdk1.8.0_171-amd64/jre/bin/java

# 3.配置環(huán)境變量
vi /etc/profile

# 4.在文件末尾加入如下配置
export JAVA_HOME=/usr/java/jdk1.8.0_171-amd64/
export PATH=$PATH:$JAVA_HOME/bin

# 5.加載配置生效
source /etc/profile    加載配置生效
reboot                 重啟系統(tǒng)
#注意: 以上兩個(gè)選項(xiàng)選擇任意一個(gè)即可source可以不用重啟立即生效,某些情況下source無(wú)法生效時(shí),可以使用重啟試試

# 6.測(cè)試環(huán)境變量
java
javac
java -version

能顯示JDK的版本號(hào)，就算安裝成功了。

2.2，MySQL安裝

MySQL既可以采用傳統(tǒng)方式，也可以采用docker鏡像安裝，傳統(tǒng)方式這里就不再贅述了，下面是docker的安裝方式：

# 1.拉取mysql鏡像到本地
docker pull mysql:tag (tag不加默認(rèn)最新版本)

# 2.使用自定義配置參數(shù)
#-e: 代表environment，給容器中的某個(gè)環(huán)境設(shè)置值
#--restart=always：docker重啟后，該容器也會(huì)重啟，不加得話docker重啟，這個(gè)容器就沒(méi)了
docker run --name mysql -v /root/mysql/conf.d:/etc/mysql/conf.d -e MYSQL_ROOT_PASSWORD=root -d mysql:tag

2.3，Windows開(kāi)放MySQL遠(yuǎn)程連接

為了方便，有時(shí)候我們會(huì)連接本地的MySQL數(shù)據(jù)庫(kù)，數(shù)據(jù)庫(kù)安裝成功后默認(rèn)遠(yuǎn)程連接是關(guān)閉的，3306端口也是不對(duì)外開(kāi)發(fā)的，需要做如下配置。

1）開(kāi)放遠(yuǎn)程連接

①，命令行中輸入如下命令，進(jìn)入到MySQL

②，執(zhí)行如下命令，開(kāi)放遠(yuǎn)程連接

use mysql;
GRANT ALL PRIVILEGES ON . TO ‘root'@'%' IDENTIFIED BY ‘root' WITH GRANT OPTION;

③，權(quán)限刷新

flush privileges;

④，查看權(quán)限

select host,user from user;

root的權(quán)限是%，遠(yuǎn)程連接權(quán)限已開(kāi)放

2）開(kāi)放3306端口

如果開(kāi)放了遠(yuǎn)程連接發(fā)現(xiàn)還是連接不上，那可能是防火墻的端口還未開(kāi)放

創(chuàng)建入站規(guī)則

新建入站規(guī)則：

類型選端口：

只開(kāi)放一個(gè)端口3306

選擇允許連接：

默認(rèn)下一步：

填寫(xiě)名稱，以便和其它規(guī)則區(qū)分，最后點(diǎn)擊完成即可

可以看到，入站規(guī)則新建成功

3，上傳jar包，編寫(xiě)shell腳本

jar包上傳后可以通過(guò)java -jar來(lái)啟動(dòng)，不過(guò)那樣每次都要輸入命令，我們編寫(xiě)一個(gè)簡(jiǎn)單的腳本來(lái)啟動(dòng)項(xiàng)目

#!/bin/sh
# jar包名稱
 JAR_NAME="web-server-1.0-20230323.jar"
 JAR_CONFIG_FILE_PATH="web-server.yml"
#日志文件的位置
 LOG_DIR=logs
 LOG_FILE=$LOG_DIR/web-server.log
BIN_DIR=`dirname $0`
SHELL_NAME=`basename $0`
cd $BIN_DIR/..
#`pwd`是得到你當(dāng)前執(zhí)行腳本的位置，而不是腳本存放的位置(需要注意，很容易出現(xiàn)路徑不對(duì)，建議echo輸出看一下)
WORK_DIR=`pwd`/project/
#java程序啟動(dòng)命令
JAVA_CMD_FILE="java"
JAVA_OPT=""
# 定義一個(gè)函數(shù)，如果傳入的參數(shù)既不是start，也不是stop，就調(diào)用該函數(shù)
function usage()
{
   echo -e "usage:$SHELL_NAME start|stop"
}
function pre_do()
{
   sleep 0.1
}
if [ -z $1 ]; then
    usage
    exit 1
fi
#日志目錄若不存在，則創(chuàng)建
if [ ! -d "$WORK_DIR/$LOG_DIR" ]; then
     mkdir -p "$WORK_DIR/$LOG_DIR"
fi
#日志文件若不存在，則創(chuàng)建
if [ ! -f "$WORK_DIR/$LOG_FILE" ]; then
     touch "$WORK_DIR/$LOG_FILE"
fi
#$0:是指你所寫(xiě)的shell腳本本身的名字；
#$1:是指你寫(xiě)的shell腳本所傳入的第一個(gè)參數(shù) ；
#$2:是指你寫(xiě)的shell腳本所傳入的第二個(gè)參數(shù)；
#這里是啟動(dòng)程序的方法
if [ "$1" == "start" ];then
     # 進(jìn)程號(hào)不為空，說(shuō)明程序已啟動(dòng)，無(wú)法重復(fù)啟動(dòng)
     ulimit -HSn 5120
     PIDS=`ps --no-heading -C java -f --width 1000 | grep $JAR_NAME | awk '{print $2}'`
     if [ -n "$PIDS" ]; then
         echo -e "ERROR: the $JAR_NAME already started and the PID is ${PIDS}."
	 exit 1
     fi
     echo "starting the $JAR_NAME..."
     pre_do
     # $? 是一個(gè)特殊的 shell 變量，用于存儲(chǔ)上一個(gè)命令的執(zhí)行狀態(tài)。
     if [ "$?" != "0" ]; then
        exit 1
     fi
     cd $WORK_DIR
     # 日志位置就用程序里配置的日志位置，這里不再額外生成日志
     nohup $JAVA_CMD_FILE $JAVA_OPT -jar $JAR_NAME --spring.config.location=$JAR_CONFIG_FILE_PATH >/dev/null 2>&1 &
     # 這段腳本的意思是等待程序啟動(dòng)完成
     # -eq ：equal（相等）-ne ：not equal（不等）-gt ：greater than（大于）-ge ：greater than or equal（大于或等于）
     # -lt ：less than（小于）-le ：less than or equal（小于或等于）
     # 注意：在shell中進(jìn)行比較時(shí)，結(jié)果為0代表真，為1代表假。-eq，-ne等比較符只能用于數(shù)字比較，有字符也會(huì)先轉(zhuǎn)換成數(shù)字然后進(jìn)行比較。
     COUNT=0
     while [[ $COUNT -lt 1 ]]; do
         sleep 1
	 COUNT=`ps --no-heading -C java -f --width 1000 | grep $JAR_NAME | awk '{print $2}' | wc -l`
	 if [[ $COUNT -gt 0 ]]; then
	     break
	 fi
     done
     # 上面的循環(huán)跳出，說(shuō)明程序已經(jīng)啟動(dòng)好了，在屏幕上輸出程序的進(jìn)程號(hào)和日志文件的位置
     PIDS=`ps  --no-heading -C java -f --width 1000 | grep "$JAR_NAME --spring.config.location=$JAR_CONFIG_FILE_PATH" | awk '{print $2}'`
     echo "${JAR_NAME} started and the PID is ${PIDS}."
     echo "logging file: $WORK_DIR/$LOG_FILE"
# 這里是停止程序的方法
elif [ "$1" == "stop" ];then
     PIDS=`ps --no-heading -C java -f --width 1000 | grep $JAR_NAME | awk '{print $2}'`
     # -z字符串：表示如果字符串為空
     if [ -z "$PIDS" ]; then
	 echo "ERROR: the $JAR_NAME does not started!"
         exit 1
     fi
    echo -e "stopping the $JAR_NAME..."
    for PID in $PIDS; do
        PIDSONS=`pstree -n -p $PID |  awk 'BEGIN{ FS="(" ; RS=")" } NF>1 { print $NF }' | sort -r`
	for PSON in $PIDSONS; do
	    kill -9 $PSON > /dev/null 2>&1
	done
    done
    COUNT=0
    while [ $COUNT -lt 1 ]; do
	sleep 1
	COUNT=1
	for PID in $PIDS ; do
	    PID_EXIST=`ps --no-heading -p $PID`
	    if [ -n "$PID_EXIST" ]; then
		COUNT=0
		break
            fi
	 done
    done
    echo -e "${JAR_NAME} stopped and the PID is ${PIDS}."
else
      usage
      exit 1
fi

上面的腳本經(jīng)過(guò)本地測(cè)試是可以啟動(dòng)項(xiàng)目的，如果項(xiàng)目啟動(dòng)失敗，可以著重檢查一下路徑是否正確。另外腳本提供了項(xiàng)目啟動(dòng)和停止兩個(gè)方法，在執(zhí)行腳本之前可以先給腳本加上可執(zhí)行的權(quán)限，假設(shè)腳本名為web-server.sh

chmod +7 web-server.sh

之后就可以通過(guò)腳本來(lái)啟動(dòng)項(xiàng)目了：

# 啟動(dòng)項(xiàng)目
./web-server.sh start

#停止項(xiàng)目
./web-server.sh stop

4，驗(yàn)證

項(xiàng)目有集成swagger，該功能不需要前端項(xiàng)目的支持，我們通過(guò)它來(lái)驗(yàn)證后端項(xiàng)目是否部署成功。
swagger地址：http://192.168.1.9:7080/tick_tack/swagger-ui/index.html

說(shuō)明： 剛開(kāi)始測(cè)試的時(shí)候swagger頁(yè)面一直進(jìn)不去，最后發(fā)現(xiàn)是防火墻的原因，我們可以關(guān)閉防火墻，如果覺(jué)得不安全，也開(kāi)放防火墻的端口，具體操作如下：

# 方法一：關(guān)閉防火墻（不推薦）
systemctl stop firewalld;
# 方法二：開(kāi)放端口
firewall-cmd --add-port=7080/tcp --permanent
# 重啟防火墻，使端口設(shè)置生效
systemctl restart firewalld

二，前端部署

1，Vue項(xiàng)目打包

前端項(xiàng)目打包只需要在命令行中輸入：

npm run build

打包完成后的文件會(huì)生成到dist文件夾下，我們先將整個(gè)dist文件夾上傳到服務(wù)器。本次采用前后端分別打包部署的方式，所以還需要Nginx來(lái)做一個(gè)代理。

2，Nginx的安裝與配置

2.1，Nginx安裝

1，安裝依賴和相關(guān)庫(kù)

[root@desktop-7q3ot0s project]# yum -y install gcc-c++ zlib-devel openssl-devel libtool

2，下載Nginx安裝包并解壓

Nginx安裝包
可以先將安裝包下載好再上傳到Linux服務(wù)器，也可以直接通過(guò)wget方式安裝
如果wget方式安裝提示：wget: command not found
則需要先安裝wget，執(zhí)行：yum -y install wget 即可

[root@desktop-7q3ot0s project]# cd /usr/local
[root@desktop-7q3ot0s local]# wget http://nginx.org/download/nginx-1.22.1.tar.gz
[root@desktop-7q3ot0s local]# tar -zxvf nginx-1.22.1.tar.gz

3，配置和安裝

[root@desktop-7q3ot0s local]# cd nginx-1.22.1
[root@desktop-7q3ot0s nginx-1.22.1]# ./configure --prefix=/usr/local/nginx
[root@desktop-7q3ot0s nginx-1.22.1]# make && make install

安裝完成后會(huì)多出一個(gè)Nginx的文件夾，此時(shí)nginx-1.22.1文件夾和nginx-1.22.1.tar.gz壓縮包都可以刪掉了。

4，啟動(dòng)Nginx

[root@desktop-7q3ot0s local]# cd ../nginx/sbin
[root@desktop-7q3ot0s sbin]# ./nginx

5，查看Nginx

[root@desktop-7q3ot0s sbin]# ps -ef|grep nginx

能出現(xiàn)上述的頁(yè)面，則表明Nginx已經(jīng)安裝成功了。（如果無(wú)法訪問(wèn)，試試開(kāi)放防火墻的80端口）

6，停止和重啟Nginx

[root@desktop-7q3ot0s sbin]# ./nginx -s reload  #重啟

7，編寫(xiě)配置文件

[root@desktop-7q3ot0s sbin]# cd ../conf/
[root@desktop-7q3ot0s sbin]# vim nginx.conf

2.2，編寫(xiě)配置文件

Nginx.conf文件：

location / {
	  # 打包后上傳到服務(wù)器中的index.html的位置
      root /home/project/dist;
      index index.html index.htm;
      try_files $uri $uri/ /index.html;
    }

寫(xiě)配置文件時(shí)注意 root后的路徑是打包上傳到服務(wù)器的index.html所在的路徑。如果項(xiàng)目在本地能正常啟動(dòng)，打包過(guò)程中未出現(xiàn)錯(cuò)誤，一般就能夠正常訪問(wèn)了。

三，說(shuō)明：

針對(duì)本次部署過(guò)程中出現(xiàn)的問(wèn)題，在此做一下記錄：

1，項(xiàng)目運(yùn)行成功，但是瀏覽器無(wú)法訪問(wèn)，先考慮防火墻端口是否未開(kāi)放。

2，項(xiàng)目部署到服務(wù)器后，前端訪問(wèn)后端的IP和端口會(huì)發(fā)生改變，記得將本地ip和端口修改為服務(wù)器的。

3，如果是在內(nèi)網(wǎng)環(huán)境部署，那安裝Nginx可以選擇離線安裝，步驟都是一樣的，先上傳C++需要的各項(xiàng)依賴，再將Nginx安裝包上傳。

4，除了用Nginx這種方式外，還可以選擇將前后端打包到一起的方式部署，可以省去安裝Nginx。

5，后端打好的jar包因?yàn)榘芏嘁蕾嚨膉ar包，它的體積會(huì)很大，隨便一下就在百兆左右，每次更新會(huì)比較麻煩，可以對(duì)項(xiàng)目進(jìn)行瘦身，將各個(gè)依賴分別打包，這樣每次更新時(shí)只用更新編寫(xiě)得業(yè)務(wù)代碼（瘦身后就幾十K左右）即可。

6，這種方式的部署相對(duì)還是比較麻煩，要先安裝JDK，還要一步步安裝Nginx，如果只是測(cè)試，推薦用docker容器化部署，會(huì)方便很多。

總結(jié)

到此這篇關(guān)于SpringBoot+Vue項(xiàng)目部署實(shí)現(xiàn)傳統(tǒng)方式的文章就介紹到這了,更多相關(guān)SpringBoot+Vue項(xiàng)目部署內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

SpringBoot+Vue項(xiàng)目部署實(shí)現(xiàn)傳統(tǒng)方式

目錄

一，后端部署

1，項(xiàng)目打包

1.1，引入插件

1.2，maven打包

1.3，修改項(xiàng)目版本號(hào)

1.4，驗(yàn)證

1.5，生成配置文件

2，服務(wù)器環(huán)境搭建

2.1，安裝JDK

2.2，MySQL安裝

2.3，Windows開(kāi)放MySQL遠(yuǎn)程連接

3，上傳jar包，編寫(xiě)shell腳本

4，驗(yàn)證

二，前端部署

1，Vue項(xiàng)目打包

2，Nginx的安裝與配置

2.1，Nginx安裝

3，配置和安裝

4，啟動(dòng)Nginx

5，查看Nginx

6，停止和重啟Nginx

7，編寫(xiě)配置文件

三，說(shuō)明：

總結(jié)

相關(guān)文章

最新評(píng)論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具

最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

SpringBoot+Vue項(xiàng)目部署實(shí)現(xiàn)傳統(tǒng)方式

目錄

一，后端部署

1，項(xiàng)目打包

1.1，引入插件

1.2，maven打包

1.3，修改項(xiàng)目版本號(hào)

1.4，驗(yàn)證

1.5，生成配置文件

2，服務(wù)器環(huán)境搭建

2.1，安裝JDK

2.2，MySQL安裝

2.3，Windows開(kāi)放MySQL遠(yuǎn)程連接

3，上傳jar包，編寫(xiě)shell腳本

4，驗(yàn)證

二，前端部署

1，Vue項(xiàng)目打包

2，Nginx的安裝與配置

2.1，Nginx安裝

3，配置和安裝

4，啟動(dòng)Nginx

5，查看Nginx

6，停止和重啟Nginx

7，編寫(xiě)配置文件

三，說(shuō)明：

總結(jié)

相關(guān)文章

最新評(píng)論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具

一，后端部署

1.1，引入插件

1.2，maven打包

1.3，修改項(xiàng)目版本號(hào)

1.4，驗(yàn)證

1.5，生成配置文件

2，服務(wù)器環(huán)境搭建

2.1，安裝JDK

2.2，MySQL安裝

2.3，Windows開(kāi)放MySQL遠(yuǎn)程連接

3，上傳jar包，編寫(xiě)shell腳本

4，驗(yàn)證

1，Vue項(xiàng)目打包

2.1，Nginx安裝

3，配置和安裝

5，查看Nginx

6，停止和重啟Nginx