非常详细的前端后端分离项目部署步骤_前端和后端分开写怎么部署上线

小伙伴们好，欢迎关注，一起学习、无限进步

环境准备

JDK 安装与环境变量配置

Maven 环境变量配置

Nginx 服务器安装配置

Node 环境变量配置

Git 安装环境变量配置

Docker 部署及常用命令

Redis 安装及配置

MySQL 安装及配置

注意：当前 Redis 和 MySQL 是使用 Docker 安装的，Nginx 是 tar 包解压后安装配置

克隆项目

项目用的是 RuoYi-Vue 前后端分离项目， Gitee地址

cd 进入项目所在文件夹下：cd /data/pro/

克隆拉取代码：git clone https://gitee.com/y_project/RuoYi-Vue.git

后端部署

• 使用 Navicat Premium 连接 MySql 数据库，创建名 ry-vue 的数据库，分别执行项目 sql 文件夹的 quartz.sql 和 ry_20230223.sql 文件

• 修改一些项目的配置文件

  1. MySQL 数据库，修改 MySQL 数据库密码，进入到 resources 文件夹下，/data/pro/RuoYi-Vue/ruoyi-admin/src/main/resources，编辑 application-druid.yml 文件，vim application-druid.yml ，修改密码，数据库名字一致则不用修改

     # 数据源配置
     spring:
         datasource:
             type: com.alibaba.druid.pool.DruidDataSource
             driverClassName: com.mysql.cj.jdbc.Driver
             druid:
                 # 主库数据源
                 master:
                     url: jdbc:mysql://localhost:3306/ry-vue?useUnicode=true&characterEncoding=utf8&zeroDateTimeBehavior=convertToNull&useSSL=true&serverTimezone=GMT%2B8
                     username: root
                     password: 123456
     1
     2
     3
     4
     5
     6
     7
     8
     9
     10
     11

  2. Redis 地址信息，编辑 resource 文件夹下 application.yml 文件，修改 redis 连接密码

     # redis 配置
       redis:
         # 地址
         host: localhost
         # 端口，默认为6379
         port: 6379
         # 数据库索引
         database: 0
         # 密码
         password: 123456
         # 连接超时时间
         timeout: 10s
         lettuce:
           pool:
             # 连接池中的最小空闲连接
             min-idle: 0
             # 连接池中的最大空闲连接
             max-idle: 8
             # 连接池的最大数据库连接数
             max-active: 8
             # #连接池最大阻塞等待时间（使用负值表示没有限制）
             max-wait: -1ms
     1
     2
     3
     4
     5
     6
     7
     8
     9
     10
     11
     12
     13
     14
     15
     16
     17
     18
     19
     20
     21
     22

  3. 文件存放目录，编辑 application.yml 文件，vim application.yml ,修改项目相关配置文件路径地址

     # 项目相关配置
     ruoyi:
       # 文件路径 示例（ Windows配置D:/ruoyi/uploadPath，Linux配置 /data/tmp）
       profile: /data/tmp
     1
     2
     3
     4

  4. 端口号根据自己需求修改，在 application.yml 下修改

• 打包，进入到项目文件夹目录下：cd /data/pro/RuoYi-Vue/，执行 maven 打包命令：maven clean package ，第一次需要下载 jar 包，需要等几分钟

• 移动 jar ，进入 target 文件夹下 cd ruoyi-admin/target/，移动 ruoyi-admin.jar 到 /data/pro/backend/ ，命令 mv ruoyi-admin.jar /data/pro/backend/

• 启动，进入backend 文件夹下，执行 nohup java -jar ruoyi-admin.jar > nohup.out 2>&1 &

  查看是否启动成功 tail -200f nohup.out

  访问接口文档：http://ip:8080/swagger-ui/index.html，访问成功，则说明后端接口部署成功

前端部署

• 安装依赖，进入 ui 页面文件夹下，cd /data/pro/RuoYi-Vue/ruoyi-ui/

  # 安装打包依赖
  npm install --unsafe-perm --registry=https://registry.npm.taobao.org
  1
  2

• 打包正式环境

  npm run build:prod
  1

  如果出现错误

  

  执行 export NODE_OPTIONS=--openssl-legacy-provider 命令，再次执行 npm run build:prod

• 在 /data/pro/front 目录下创建 ruoyi-ui 文件夹，mkdir -p /data/pro/front/ruoyi-ui ，把打包好的 dist 文件夹下的移动到 ruoyi-ui 文件夹下，命令为 mv dist/* /data/pro/front/ruoyi-ui

nginx 配置

在安装好的 nginx 目录下，/data/nginx2/conf ，把以下 nginx 配置替换到 nginx.conf 文件中重新启动 nginx 即可，nginx 完整配置

user  root; 
worker_processes  auto;

events {
    worker_connections  1024;
}

http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    keepalive_timeout  65;

    server {
        listen       80;
        server_name  localhost;
		charset utf-8;

		location / {
            root   /data/pro/front/ruoyi-ui;
			try_files $uri $uri/ /index.html;
            index  index.html index.htm;
        }
		
		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:8080/;
		}

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

打开浏览器，输入：http://ip 出现登录页面和验证码则说明前后端都已部署成功