前後端分離專案：下載、執行、配置、構建、打包、部署：全部實戰演習

 

專案部署演習

 

專案下載、執行、配置、構建、打包、部署：全部實戰演習，前後端分離專案

 

本機環境：

前端：

系統版本：Centos 8

部署軟體：Nginx，Mysql、Redis

IP地址：192.168.152.53

 

後端：

系統版本：Centos 7

部署軟體：Tomcat

IP地址：192.168.152.253

 

一、gitee中下載開源專案RuoYi-Vue前後端分離版

### 因為是採用SpringBoot編寫，所以必定先安裝java環境
wget https://repo.huaweicloud.com/java/jdk/11.0.2+7/jdk-11.0.2_linux-x64_bin.rpm
rpm -ivh jdk-11.0.2_linux-x64_bin.rpm

### 安裝git命令
yum -y install git-all

## 下載專案到本地，所有的主機均要下載
git clone https://gitee.com/vfancloud/RuoYi-Vue.git

## 克隆完畢後，會在當前你資料夾出現此目錄
[root@TestCentos7 ruoyi]# ls
RuoYi-Vue

### RuoYi資料夾下有以下檔案，ruoyi-ui為專案的前端，ruoyi為專案的後端
[root@TestCentos7 RuoYi-Vue]# ls
LICENSE  README.md  ruoyi  ruoyi-ui

### 整體的目錄結構，可以使用tree命令檢視
tree ruoyi

 

二、修改後端配置檔案(僅修改後端伺服器即可)

### 後端應用需要配置mysql、redis等服務資訊,配置為真實地址
## 配置mysql
vim ruoyi/src/main/resources/application-druid.yml
...
druid:
     # 主庫資料來源
     master:
        url: jdbc:mysql://192.168.152.53:3306/ry-vue?useUnicode=true&characterEncoding=utf8&zeroDateTimeBehavior=convertToNull&useSSL=true&serverTimezone=GMT%2B8
        username: root
        password: root1
...

### 以上原始碼中表示，要讀取資料庫ry-vue,所以建立資料庫ry-vue
mysql> create database `ry-vue` character set utf8mb4;

### 將資料表資料匯入資料庫,資料表結構在ruoyi/sql/下
mysql> use ry-vue;
mysql> source /var/ruoyi/RuoYi-Vue/ruoyi/sql/quartz.sql;
mysql> show tables;  # 檢視會發現新增了許多表

### 資料匯入後，如果後端伺服器於mysql所在伺服器不是在同一個主機下，記得建立使用者並賦予許可權
mysql> CREATE USER 'root'@'192.168.152.253' IDENTIFIED BY 'root1';
mysql> GRANT ALL PRIVILEGES ON *.* TO root@192.168.152.253;

## 配置Redis
vim ruoyi/src/main/resources/application.yml
...
  redis:
    # 地址
    host: 192.168.152.53
    # 埠，預設為6379
    port: 6379
    # 密碼
    password: redis
    # 連線超時時間
    timeout: 10s
...

## 配置日誌路徑
vim ruoyi/src/main/resources/logback.xml
...
        <!-- 日誌存放路徑 -->
  <property name="log.path" value="/var/ruoyi/logs" />

## 將所有的<encoder></encoder>中新增<charset>UTF-8</charset>，以防日誌亂碼
## 一共有四處
        <encoder>
      <pattern>${log.pattern}</pattern>
      <charset>UTF-8</charset>
    </encoder>
...

 

三、前端專案安裝依賴、打包

## 檢視當前目錄檔案
[root@Centos8 ruoyi-ui]# ll -h 
總用量 20K
-rw-r--r--  1 root root   58 6月  12 13:45 babel.config.js
drwxr-xr-x  2 root root   61 6月  12 13:45 bin
drwxr-xr-x  2 root root   22 6月  12 13:45 build
drwxr-xr-x  3 root root   22 6月  14 12:20 node_modules
-rw-r--r--  1 root root 2.9K 6月  12 13:45 package.json
drwxr-xr-x  2 root root   61 6月  12 13:45 public
-rw-r--r--  1 root root  460 6月  12 13:45 README.md
drwxr-xr-x 11 root root  203 6月  12 13:45 src
-rw-r--r--  1 root root 4.5K 6月  12 13:45 vue.config.js

### 前端伺服器需要安裝以下依賴
cd RuoYi-Vue/ruoyi-ui/
npm install --unsafe-perm --registry=https://registry.npm.taobao.org

## 此處用的npm工具，如沒有，先行安裝
yum install -y npm 
或 
wget https://npm.taobao.org/mirrors/node/v10.14.1/node-v10.14.1-linux-x64.tar.gz
tar zxvf node-v10.14.1-linux-x64.tar.gz -C /usr/local
ln -s /usr/local/node-v10.14.1-linux-x64/bin/* /usr/bin/

## 開始打包
npm run build:prod

## 打包完成後，會在當前目錄下產生dist目錄
[root@Centos8 ruoyi-ui]# ll -d dist/
drwxr-xr-x 3 root root 75 6月  14 16:34 dist/

## 裡邊的內容
[root@Centos8 ruoyi-ui]# ls dist/
favicon.ico  index.html  robots.txt  static

## 將前端打包好的檔案放置nginx的html目錄
[root@Centos8 ruoyi-ui]# cp -r dist/* /usr/share/nginx/html

## 啟動nginx，測試訪問
systemctl start nginx

 

測試訪問

瀏覽器中輸入http://192.168.152.53/

 

前端介面已經可以顯示，但是驗證碼登入等後端功能還不能實現

下邊開始配置後端伺服器

 

四、後端打包，分別打jar包和war包

jar包：程式內嵌tomcat，直接執行即可

war包：需要放入伺服器中tomcat的webapp目錄下

## 檢視當前目錄檔案
[root@TestCentos7 RuoYi-Vue]# cd ruoyi
[root@TestCentos7 ruoyi]# ll -h 
總用量 12K
drwxr-xr-x 2 root root   84 6月  14 11:09 bin
-rw-r--r-- 1 root root 7.8K 6月  14 11:09 pom.xml
-rwxr-xr-x 1 root root 1.6K 6月  14 11:09 ry.sh
drwxr-xr-x 2 root root   29 6月  14 11:09 sql
drwxr-xr-x 3 root root   18 6月  14 11:09 src

## 開始打jar包
[root@TestCentos7 ruoyi]# mvn package

## 需要先行安裝mvn
wget https://mirrors.bfsu.edu.cn/apache/maven/maven-3/3.6.3/binaries/apache-maven-3.6.3-bin.tar.gz
tar zxvf apache-maven-3.6.3-bin.tar.gz -C /usr/local/
ln -s /usr/local/apache-maven-3.6.3/bin/mvn /usr/bin/

## 打包完成後，會在當前目錄生成target目錄
[root@TestCentos7 ruoyi]# ll -h 
drwxr-xr-x 2 root root   84 6月  14 11:09 bin
-rw-r--r-- 1 root root 7.8K 6月  14 11:09 pom.xml
-rwxr-xr-x 1 root root 1.6K 6月  14 11:09 ry.sh
drwxr-xr-x 2 root root   29 6月  14 11:09 sql
drwxr-xr-x 3 root root   18 6月  14 11:09 src
drwxr-xr-x 6 root root  131 6月  14 12:49 target

## 進入target目錄，檢視裡面的jar包
[root@TestCentos7 ruoyi]# cd target/
[root@TestCentos7 target]# ls
ruoyi.jar  ruoyi.jar.original classes  generated-sources  maven-archiver  maven-status

## 將jar包進行備份
[root@TestCentos7 target]# cp -a ruoyi.jar ../

## 執行jar包
nohup java -jar ruoyi.jar &

------------- 以上jar包打包完成，下邊分享war包的打包方法 --------------
----------- 特別注意一下 後端的Mysql和Redis 不要忘記啟動啊 ------------

## 因為此程式碼預設是打jar包，所以如果想打war包，還需修改一些配置
vim ruoyi/pom.xml
...
        <groupId>com.ruoyi</groupId>
        <artifactId>ruoyi</artifactId>
        <version>1.0</version>
        <packaging>war</packaging>  # 主要是這條
...

## 修改完war包的配置後，還要將jar包自己內嵌的tomcat移除掉
## 同樣是pom.xml，修改<!-- SpringBoot Web容器 -->這一段
vim ruoyi/pom.xml
...
                <!-- SpringBoot Web容器 -->
                <dependency>
                        <groupId>org.springframework.boot</groupId>
                        <artifactId>spring-boot-starter-web</artifactId>
                </dependency>

                <dependency>
                        <groupId>org.springframework.boot</groupId>
                        <artifactId>spring-boot-starter-tomcat</artifactId>
                        <scope>provided</scope>
                </dependency>
...

## 修改完以上配置之後，還要修改一個主函式的啟動類
cd RuoYi-Vue/ruoyi/src/main/java/com/ruoyi
vim SpringBootStartApplication.java
...
package com.ruoyi;

import org.springframework.boot.builder.SpringApplicationBuilder;
import org.springframework.boot.web.servlet.support.SpringBootServletInitializer;

public class SpringBootStartApplication extends RuoYiServletInitializer{
        @Override
        protected SpringApplicationBuilder configure(SpringApplicationBuilder builder){
                return builder.sources( RuoYiApplication.class );
        }
}
...

### 下邊開始打war包
## 首先先將之前的打jar包清理一下，清理之後target目錄會消失
[root@TestCentos7 ruoyi]# mvn clean

## 開始打war包，依舊執行
[root@TestCentos7 ruoyi]# mvn package

## 打包完成後，同樣生成target目錄
root@TestCentos7 ruoyi]# ls
bin  pom.xml  ruoyi.jar  ry.sh  sql  src  target

## 進入target將war包備份
[root@TestCentos7 target]# cp -a ruoyi.war ../

## 將生成的war包直接放置tomcat的webapp目錄下
[root@TestCentos7 ruoyi]# cp ruoyi.war /usr/local/apache-tomcat-9.0.36/webapps/

## 啟動tomcat
cd /usr/local/apache-tomcat-9.0.36/bin
./startup.sh

以上jar包和war包兩種方法均可實現功能

在jar或war都配置完畢並且啟動後，還要去nginx做一個流量轉發代理

才能實現後端流量的自動接入

 

可以看到，在登入時請求的是prod-api目錄下的某個檔案，所以要基於這個目錄進行一個流量轉發

## 在nginx.conf檔案下的http模組中新增以下配置
vim /etc/nginx/nginx.conf
...
        location /prod-api/ {
          proxy_set_header Host $http_host;
          proxy_set_header X-Real-IP $remote_addr;
          proxy_set_header REMOTE-HOST $remote_addr;
          proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
          proxy_pass http://192.168.152.253:8080/;
      }
...

## 隨後儲存退出，重新載入nginx
nginx -s reload

 

再次嘗試開啟網頁，驗證碼等已經出現~  已經可以登入進行配置~