前后端分離項目：下載、運行、配置、構建、打包、部署：全部實戰演習

 

項目部署演習

 

項目下載、運行、配置、構建、打包、部署：全部實戰演習，前后端分離項目

 

本機環境：

前端：

系統版本：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

 

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