部署若依前后端分离系统到生产环境

爱被打了一巴掌 2023-01-05 01:24 315阅读 0赞

### 文章目录 ###

*  一. 问题背景
 *  二. 前期准备
 *  三. 导入数据
 *  三. 修改配置
 *   *  3.1 修改数据库配置
     *  3.2 修改后端端口号
     *   *  3.2.1 修改后端工程中的后端端口号
         *  3.2.1 修改前端工程中的后端端口号
     *  3.3 修改前端端口号
     *  3.4 开启端口号
 *  四. 打包
 *   *  4.1 打包后端
     *  4.2 打包前端
 *  五. 上传包
 *  六. 配置nginx
 *  七. 启动后端
 *  八. 访问页面

# 一. 问题背景 #

> 前面玩过了[本地电脑启动若依前后分离的项目][Link 1]，今天将他部署到生产环境上（Linux服务器上面）

# 二. 前期准备 #

> 可以先简单看看[本地电脑启动若依前后分离的项目][Link 1]，有一个认知

**Linux上：**

1.  安装jdk1.8
2.  安装MySQL（推荐8.0版本），并创建一个可远程登录的账号，
3.  安装redis，我使用5.0.4版本
4.  安装nginx（推荐安装LTS版本）

**本地电脑上：**

1.  在idea中安装Vue.js插件
2.  安装node.js

# 三. 导入数据 #

> 在Linux上的MySQL导入数据，具体操作可参考[本地电脑启动若依前后分离的项目][Link 1]

# 三. 修改配置 #

## 3.1 修改数据库配置 ##

> 在RuoYi-Vue项目中的ruoyi-admin模块，在`application-druid.yml`中修改数据库信息，如下：

url: jdbc:mysql://Linux的ip地址:3306/ry-vue?useUnicode=true&characterEncoding=utf8&zeroDateTimeBehavior=convertToNull&useSSL=false&serverTimezone=Asia/Shanghai
    username: Linux的数据库用户
    password: Linux的数据库密码

**注意：**

1.  若MySQL版本是8.0，在url中必须加上`serverTimezone=Asia/Shanghai`
2.  数据库用户必须有远程登录的权限，可以去百度查看MySQL授权教程

## 3.2 修改后端端口号 ##

### 3.2.1 修改后端工程中的后端端口号 ###

> 在RuoYi-Vue项目中的ruoyi-admin模块，在`application.yml`中修改端口信息，如下：

# 开发环境配置
    server:
      # 服务器的HTTP端口，默认为8080
      port: 19393

解释：由于我的Linux服务器上面开了很多端口号，避免端口占用，我自定义端口号19393

### 3.2.1 修改前端工程中的后端端口号 ###

> 在RuoYi-Vue项目中的ruoyi-ui文件夹，在`vue.config.js`中修改端口信息，如下：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjM0ODQ2_size_16_color_FFFFFF_t_70_pic_center]  
**注意：** 此端口号必须与`application.yml`中的一致

## 3.3 修改前端端口号 ##

> 在RuoYi-Vue项目中的ruoyi-ui文件夹，在vue.config.js中修改端口信息，如下：

![在这里插入图片描述][20210111132903557.jpg_pic_center]  
**注意：** 此端口号可自定义，但必须要与nginx中配置的一致

## 3.4 开启端口号 ##

> 如果Linux采用的是阿里云服务器，必须去安全组配置规则去开启上面的端口号。如果有开启防火墙，也必须要在防火墙开启端口号。

# 四. 打包 #

## 4.1 打包后端 ##

> 详细操作可参考[本地电脑启动若依前后分离的项目][Link 1]

## 4.2 打包前端 ##

> 详细操作可参考[本地电脑启动若依前后分离的项目][Link 1]

> **注意：** 选择打包的命令，必须是生产环境的打包，如下：

![在这里插入图片描述][20210111133313246.jpg_pic_center]

# 五. 上传包 #

> 我将包放到Linux上面的如下路径：

![在这里插入图片描述][20210111133638127.jpg_pic_center]

# 六. 配置nginx #

> 用nginx来做前端转发，nginx配置如下：

server {
    	listen       9393;  # 前端的端口
        server_name  Linux的ip地址; # 不建议用localhost
     
    	location / {
    	        root   /usr/local/project/RuoYi-Vue/dist; # 前端的包所在路径
    		try_files $uri $uri/ /index.html; # 按此顺序查找请求的文件
                index  index.html index.htm;
            }
    		
    	# 生产环境的请求都是以/prod-api，可以按F12随便找一个请求看看它的路径
    	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://localhost:19393/; # 转发到后端
    	}
    	
    	location /boom {
    		proxy_redirect off;
    		proxy_pass http://localhost:8080/;
    		proxy_set_header Host $http_host;
    		proxy_set_header X-Real-IP $remote_addr;
    		proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    	}
     
            error_page   500 502 503 504  /50x.html;
            location = /50x.html {
                root   html;
            }
        }

# 七. 启动后端 #

> 后端jar包在此路径，如下：

![在这里插入图片描述][20210111134543959.jpg_pic_center]

> 我编写了一个`startup.sh`脚本来启动后端，如下：

# /bin/bash 
    
    # 后台运行jar包，并将日志写到nohup.out文件
    nohup java -jar ruoyi-admin.jar > nohup.out &
    
    echo 'starting...'
    
    # 动态查看日志文件
    tail -300f nohup.out

> （建议修改后端的ruoyi-admin中的yml文件，修改日志级别都为debug，这样启动完成的时候，就会有一个log标志出现，方便检测是否启动成功），如下所示：

(♥◠‿◠)ﾉﾞ  若依启动成功   ლ(´ڡ`ლ)ﾞ  
     .-------.       ____     __        
     |  _ _   \      \   \   /  /    
     | ( ' )  |       \  _. /  '       
     |(_ o _) /        _( )_ .'         
     | (_,_).' __  ___(_ o _)'          
     |  |\ \  |  ||   |(_,_)'         
     |  | \ `'   /|   `-'  /           
     |  |  \    /  \      /           
     ''-'   `'-'    `-..-'

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjM0ODQ2_size_16_color_FFFFFF_t_70_pic_center 1]

> **注意：** 如果启动失败，那么99%都是数据库信息配置错误、端口号没有开启

# 八. 访问页面 #

> 在浏览器访问：`http://Linux的ip地址:9393/`即可，如下：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjM0ODQ2_size_16_color_FFFFFF_t_70_pic_center 2]

[Link 1]: https://blog.csdn.net/qq_40634846/article/details/112444576
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjM0ODQ2_size_16_color_FFFFFF_t_70_pic_center]: /images/20221119/e3e45fea0a5e4ae6b90e14e07afb4dcd.png
[20210111132903557.jpg_pic_center]: /images/20221119/89f0de30c51e4db2b5e64e189ff49482.png
[20210111133313246.jpg_pic_center]: https://img-blog.csdnimg.cn/20210111133313246.jpg#pic_center
[20210111133638127.jpg_pic_center]: https://img-blog.csdnimg.cn/20210111133638127.jpg#pic_center
[20210111134543959.jpg_pic_center]: https://img-blog.csdnimg.cn/20210111134543959.jpg#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjM0ODQ2_size_16_color_FFFFFF_t_70_pic_center 1]: https://img-blog.csdnimg.cn/20210111135543311.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjM0ODQ2,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjM0ODQ2_size_16_color_FFFFFF_t_70_pic_center 2]: https://img-blog.csdnimg.cn/2021011113503521.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjM0ODQ2,size_16,color_FFFFFF,t_70#pic_center