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

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

文章目录

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

一. 问题背景

前面玩过了本地电脑启动若依前后分离的项目,今天将他部署到生产环境上(Linux服务器上面)

二. 前期准备

可以先简单看看本地电脑启动若依前后分离的项目,有一个认知

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导入数据,具体操作可参考本地电脑启动若依前后分离的项目

三. 修改配置

3.1 修改数据库配置

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

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

注意:

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

3.2 修改后端端口号

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

在RuoYi-Vue项目中的ruoyi-admin模块,在application.yml中修改端口信息,如下:

  1. # 开发环境配置
  2. server:
  3. # 服务器的HTTP端口,默认为8080
  4. port: 19393

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

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

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

在这里插入图片描述
注意: 此端口号必须与application.yml中的一致

3.3 修改前端端口号

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

在这里插入图片描述
注意: 此端口号可自定义,但必须要与nginx中配置的一致

3.4 开启端口号

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

四. 打包

4.1 打包后端

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

4.2 打包前端

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

注意: 选择打包的命令,必须是生产环境的打包,如下:

在这里插入图片描述

五. 上传包

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

在这里插入图片描述

六. 配置nginx

用nginx来做前端转发,nginx配置如下:

  1. server {
  2. listen 9393; # 前端的端口
  3. server_name Linuxip地址; # 不建议用localhost
  4. location / {
  5. root /usr/local/project/RuoYi-Vue/dist; # 前端的包所在路径
  6. try_files $uri $uri/ /index.html; # 按此顺序查找请求的文件
  7. index index.html index.htm;
  8. }
  9. # 生产环境的请求都是以/prod-api,可以按F12随便找一个请求看看它的路径
  10. location /prod-api/{
  11. proxy_set_header Host $http_host;
  12. proxy_set_header X-Real-IP $remote_addr;
  13. proxy_set_header REMOTE-HOST $remote_addr;
  14. proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
  15. proxy_pass http://localhost:19393/; # 转发到后端
  16. }
  17. location /boom {
  18. proxy_redirect off;
  19. proxy_pass http://localhost:8080/;
  20. proxy_set_header Host $http_host;
  21. proxy_set_header X-Real-IP $remote_addr;
  22. proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
  23. }
  24. error_page 500 502 503 504 /50x.html;
  25. location = /50x.html {
  26. root html;
  27. }
  28. }

七. 启动后端

后端jar包在此路径,如下:

在这里插入图片描述

我编写了一个startup.sh脚本来启动后端,如下:

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

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

  1. (♥◠‿◠)ノ゙ 若依启动成功 ლ(´ڡ`ლ)゙
  2. .-------. ____ __
  3. | _ _ \ \ \ / /
  4. | ( ' ) | \ _. / '
  5. |(_ o _) / _( )_ .'
  6. | (_,_).' __ ___(_ o _)'
  7. | |\ \ | || |(_,_)'
  8. | | \ `' /| `-' /
  9. | | \ / \ /
  10. ''-' `'-' `-..-'

在这里插入图片描述

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

八. 访问页面

在浏览器访问:http://Linux的ip地址:9393/即可,如下:

在这里插入图片描述

发表评论

表情:
评论列表 (有 0 条评论,386人围观)

还没有评论,来说两句吧...

相关阅读