雲伺服器部署前後端分離專案(若依)詳細教程

哈哈哈hh發表於2022-05-11

映象下載、域名解析、時間同步請點選  阿里雲開源映象站

第一次在Linux雲伺服器上部署前後端分離專案,查了很多資料和視訊,踩了許多坑。成功實現部署若依的前後端分離專案後,想記錄一下前後端部署的過程,供學習的小夥伴參考。

1.環境準備

一定要在開始前先準備好以下工具和環境(可以上網查詢安裝的方法),後續還會對其進行修改:

  • 購買一個雲伺服器,例如阿里雲等等,作業系統為Linux centos7.x
  • 在雲伺服器上安裝Nodejs(之前的部落格有安裝方法)
  • 在雲伺服器上安裝Nginx
  • 在雲伺服器上安裝jdk1.8+(推薦1.8)
  • 在雲伺服器上安裝mysqk5.7+(推薦5.7)
  • 在雲伺服器上安裝redis
  • 遠端連線工具xshell或者finalshell

2.下載前後端專案

若依前後端專案地址:

若依前後端專案使用手冊地址:

進入網址將專案下載或者git clone到本地並解壓:

file

在這個專案中,ruoyi-ui資料夾是前端專案,其餘為後端專案,我們接下來需要分開打包部署。

file

3.遠端連線伺服器

通過xshell或者FinalShell遠端連線伺服器,連線指令:

ssh user@ip

user為伺服器的使用者名稱,一般為root,ip是伺服器的ip
,預設埠號為22,例如:

ssh root@172.12.134.12

如果連線失敗可能是伺服器沒有開啟遠端連線許可或者埠等等,可以搜尋相關方法解決。

4.前端部署

(1)首先將專案中ruoyi-ui這個資料夾上傳至伺服器,可以用FinalShell的檔案管理功能,也可以用伺服器管理的上傳檔案功能,例如寶塔介面裡的檔案管理:

file

可以專門建一個目錄儲存它們,例如在根目錄下建立了一個project資料夾

cd /
mkdir project

file

(2)依次輸入如下命令,進入ruoyi-ui資料夾,並對前端程式碼進行打包,生成一個dist資料夾,這就是前端程式碼打包後的檔案:

cd ruoyi-ui
npm install --unsafe-perm --registry=
npm run build:prod

file

(3)修改nginx的配置檔案(也就是nginx.conf),使其前端專案能夠被訪問,一般nginx會被安裝在/usr/local目錄下,因此配置檔案路徑為/usr/local/nginx/conf/nginx.conf 。如果忘記nginx安裝在哪裡了,可以用如下命令找到它:

find / -name 'nginx.conf'

file

用vim編輯器開啟nginx.conf,修改配置。修改的幾個地方,最好圖中的資訊都一樣,紅色框框圈出來的是容易忽略的地方如下:

file

1、 修改為root使用者

2、修改監聽listen的埠號為9000,這個埠號取決於自己想從幾號埠訪問前端頁面,後續也別忘了在防火牆中開啟這個埠,不然無法訪問;server_name為你的伺服器ip,如果你有域名且配置解析好了,也可以再在此添域名

file

3、找到這些內容並將root 後跟的路徑修改為剛才前端程式碼打包的dist資料夾的路徑,儲存後退出。如果仍不清楚改哪裡,可以翻倒部落格最後面的部分,有兩張nginx.conf的整體示意圖。

file

4、由於上述前端使用的是9000埠(也可以換為你自己想要的埠,例如80埠),因此要在防火牆中也開啟這個埠,外界才可以訪問。於此同時,後端也需要一個8080埠,因此也要將其開啟,後續部署後端服務要用到。注意有時候可能你想用的埠已經被其他程式佔用,可以嘗試找到該程式並將其kill掉或者重新開另一個埠號,具體方法不在此贅述,可上網查詢。

firewall-cmd --zone=public --add-port=9000/tcp --permanent
firewall-cmd --zone=public --add-port=8080/tcp --permanent

我用的是阿里雲的輕量應用型伺服器,因此還需要檢查以下寶塔介面的“安全”裡面是否開啟該埠,以及阿里雲伺服器工作臺裡的“安全”->“防火牆”中的埠,如果沒有開啟,則需要在這裡手動開啟。此外阿里雲的ECS雲伺服器需要為該埠號新增安全組規則。

file

file

5、埠配置好了後,每次修改了nginx的配置檔案後一定要重新啟動nginx,使新配置生效。如果重啟失敗,則先找到nginx的程式,然後將其kill掉,再重啟nginx:

如果已經將nginx配置到全域性的環境變數中,就可以直接執行這個命令重啟nginx
nginx -s reload
如果沒有將其配置到全域性的環境變數中,則需要進入安裝的nginx/sbin/目錄中,用如下命令:
./nginx -s reload
檢視程式號: ps -ef|grep nginx
殺死程式:kill -term xxxx/ kill -int xxxx

file

6、瀏覽器輸入“ip:9000“,例如:198.172.1.1:9000,如果出現出現如下畫面,則表示前端啟動成功。否則則需要仔細檢查兩個地方,一個是nginx的配置資訊,一個是埠是否真的被完全開啟:

file

5.後端準備

(1)配置伺服器上的mysql資料庫,使mysql資料庫可以被遠端訪問。具體教程可以看https://blog.csdn.net/VariatioZbw/article/details/105823337
開啟後可以在伺服器上遠端連線一下看是否成功:

mysql -h 198.172.1.1 -P 3306 -u root -p123
h表示host,伺服器ip地址
P表示埠號,一般mysql埠號為3306
u表示使用者名稱,建議設為root使用者
p表示密碼,123為root這個使用者的密碼,p後面要緊跟密碼,不要空格

(2)redis資料庫也要配置好,例如它的埠要被開啟,設定密碼,具體方法可以參考網上的方法。

(3)進入mysql資料庫,建一個名為ry-vue的資料庫

資料庫名稱中有‘-’符號,需要用反引號`,是鍵盤上tab鍵上面一個鍵的符號
create database `ry-vue`;

file

file

將之前下載好的專案資料夾中的sql資料夾裡的兩個資料表上傳到伺服器中,我們可以繼續將這兩個檔案放在之前在伺服器根目錄下建立好的project目錄裡面

file

file

然後登入進入mysql資料庫,使用剛才建立ry-vue資料庫,匯入兩個資料表進入ry-vue資料庫中:

use ry-vue;
source /project/quartz.sql;
source /project/ry_20210908.sql;

(4) 修改專案中ruoyi-admin中的三個檔案,如下:

file

在application.yml中,修改redis的資訊,分別為host地址(你的伺服器ip),port埠號(你的redis開放的埠號,一般為6379),password密碼(你的redis的密碼)。

file

在application-druid.yml中,修改mysql的資訊,url的中間填寫訪問mysql的 ip:埠號,例如:198.172.1.1:3306;username填你的mysql使用者名稱;password填你的mysql密碼。

file

在logback.xml中,找到日誌存放路徑,value修改為你存放日誌的目錄,可以在之前建立的project資料夾中建一個logs資料夾,則填為value=”/project/logs“

file

自此,該修改的已經修改完了。

(5)嘗試執行後端專案

可以通過InteliJ IDEA或者eclipse軟體來執行這個java後端專案,前提是你執行的本機上應該也具備一定的環境,jdk>=1.8,以及本地8080埠(用於後端)已開啟且未被佔用。其他的例如mysql,redis可以直接通過伺服器ip+埠號遠端訪問,不需要在本機上配置。

出現如下表示啟動成功,可以開始打包後端程式碼。如果未成功也不用灰心,檢查報錯,是否關於mysql,redis的(如果是,則可能是這兩個沒有在你的伺服器上配置好或者剛才修改的資訊出錯了,例如賬號,密碼不對,或者遠端連線未成功,導致本機無法遠端訪問等等),如果是關於8080埠,可能是由於你本機有程式以及佔用了8080埠,這個基本上就不是什麼問題,部署到伺服器後只要伺服器8080埠可用就行。接下來可以直接打包程式碼。

file

(6)打包後端程式碼jar包

熟練使用java的人可以直接通過InteliJ IDEA或者eclipse軟體打jar包。不熟悉的有第二種方法,是若依提供的。進入下載的專案資料夾中的bin目錄下,直接雙擊執行package.bat,它會直接在專案中生成target資料夾,裡面包含以及打包好的jar包。我們要使用的是ruoyi-admin資料夾下的target裡的jar包。執行package.bat需要marven環境>=3.0,自行參考網上方法按照。如下圖操作順序:

file

file

file

file

file

將這個ruoyi-admin.jar包上傳至伺服器,可繼續存於剛才建的project目錄中。

6.後端部署

(1)再此修改nginx配置檔案(nginx.conf),新增後端資訊。proxy_pass中空餘的部分填伺服器ip地址,別忘了上面是location /prod-api/。修改後別忘了重啟nginx服務,用上面剛才提到的命令。

file

修改未prod-api是由於前端傳送請求的時候就是通過這個介面來傳送的

file

nginx配置檔案nginx.conf的整體示意圖(包括前端和後端配置修改的所有地方):

file

file

(2)遠端連線伺服器,進入project目錄,後臺啟動jar包:

nohup java -jar ruoyi-admin.jar &

7.成功部署效果

用瀏覽器訪問”ip:前端埠號“:

輸入驗證碼登入後成功進入後臺:

file

本文轉自:https://blog.csdn.net/weixin_44248258/article/details/124213606


來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/70003733/viewspace-2893443/,如需轉載,請註明出處,否則將追究法律責任。

相關文章