Windows部署前后端分离项目

@[TOC]

此项目的基础版本为若依的前后端分离版本，不一定适合所有情况，仅供参考，用于备忘

后端

修改数据库连接

根据需要修改ruoyi-admin中resources目录的application-druid.yml

# 数据源配置
spring:
    datasource:
        type: com.alibaba.druid.pool.DruidDataSource
        driverClassName: com.mysql.cj.jdbc.Driver
        druid:
            # 主库数据源
            master:
                url: 数据库地址
                username: 数据库账号
                password: 数据库密码

修改服务器配置

编辑resources目录下的application.yml

# 项目相关配置
ruoyi:
  # 文件路径 示例（ Windows配置D:/ruoyi/uploadPath，Linux配置 /home/ruoyi/uploadPath）
  profile: 上传文件路径
  # 验证码类型 math 数组计算 char 字符验证
  captchaType: math
# 开发环境配置
server:
  # 服务器的HTTP端口，默认为80
  port: 端口
  servlet:
    # 应用的访问路径
    context-path: /应用路径

根据需要修改resources目录下的logback.xml

<configuration>
    <!-- 日志存放路径 -->
	<property name="log.path" value="日志路径"/>
    <!-- 日志输出格式 -->
	<property name="log.pattern" value="%d{HH:mm:ss.SSS} [%thread] %-5level %logger{20} - [%method,%line] - %msg%n" />
</configuration>

打包后端

在ruoyi项目的bin目录下执行package.bat打包Web工程，生成war/jar包文件。

然后会在项目下生成target文件夹包含war或jar

提示

由于是前后端分离版，所以会生成在ruoyi/ruoyi-admin模块下target文件夹

部署后端

1. jar部署方式 使用命令行执行：java –jar ruoyi-admin.jar 或者执行脚本：ruoyi/bin/run.bat 可以根据需要使用javaw –jar ruoyi-admin.jar来隐藏黑窗口

如果需要开机自启可以将bat放到C:\ProgramData\Microsoft\Windows\Start Menu\Programs\StartUp中

注意将运行路径修改，如我的jar包在D盘下，则需要将原本的java –jar ruoyi-admin.jar修改为java –jar D:/ruoyi-admin.jar

2. war部署方式 ruoyi/ruoyi-admin/pom.xml中的packaging修改为war，放入tomcat服务器的webapps中

<packaging>war</packaging>

部署完成后可以根据端口访问检查是否成功

前端

修改后端连接地址

根据自身情况修改vue.config.js中的请求路径(此处只展示常用的几个，详细的可以直接去看)

const port = process.env.port || process.env.npm_config_port || 访问的端口号

module.exports = {
  devServer: {
    host: '0.0.0.0',
    port: port,
    open: true,
    proxy: {
      // detail: https://cli.vuejs.org/config/#devserver-proxy
      [process.env.VUE_APP_BASE_API]: {
        target: `http://127.0.0.1:8081`,//后端的ip+端口，根据自身情况选择局域网或者广域网
        changeOrigin: true,
        pathRewrite: {
          ['^' + process.env.VUE_APP_BASE_API]: ''
        }
      }
    },
    disableHostCheck: true
  }
}

打包部署

根据情况选择对应的命令

# 打包正式环境
npm run build:prod

# 打包预发布环境
npm run build:stage

构建打包成功之后，会在根目录生成 dist 文件夹，里面就是构建打包好的文件，通常是 ***.js 、***.css、index.html 等静态文件。

额外提示 如果需要自定义构建，比如指定 dist 目录等，则需要通过 vue.config.js 的 outputDir 进行配置。

publicPath 提示 部署时改变页面js 和 css 静态引入路径 ,只需修改 vue.config.js 文件资源路径即可。

publicPath: './' //请根据自己路径来配置更改 export default new Router({ mode: 'hash', // hash模式 })

环境变量

所有测试环境或者正式环境变量的配置都在 .env.development 等 .env.xxxx文件中。

它们都会通过 webpack.DefinePlugin 插件注入到全局。

环境变量必须以VUE_APP_为开头。如:VUE_APP_API、VUE_APP_TITLE

你在代码中可以通过如下方式获取:

console.log(process.env.VUE_APP_xxxx)

配置Nginx

因为是前后端分离，自然需要使用Nginx来代理

#user  nobody;
worker_processes  1;

#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;

#pid        logs/nginx.pid;


events {
    worker_connections  1024;
}


http {
    include       mime.types;
    default_type  application/octet-stream;

    #access_log  logs/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;

    #gzip  on;

    server {
        # listen下的端口就是代理前的接口，要与前面前端项目的vue.config.js中的端口一致
        listen       前端端口号; 
        # server_name是部署项目的服务器ip,即使是使用的本地也建议不要用localhost，避免修改hosts文件导致的问题
        server_name  前端ip;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        # location /下面配置的就是代理前前端静态资源的路径等
        location / {
            # root 对应的就是在服务器上前端资源的dist目录的全路径，即代表根路径
            root   D:/nginx-1.24.0/html(静态文件位置，根据自身情况修改，推荐放到Nginx的html下);
            # 保持默认不要更改，防止404和入口页面
            try_files $uri $uri/ /index.html;
            index  index.html index.htm;
        }

        # location /prod-api/ 是配置的代理后的地址
		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就是设置的代理后的地址，即自己服务器后台接口的url
		   proxy_pass http://后端ip:后端端口/;
		}

}

修改完Nginx配置后根据情况选择开启/重启，这里给出命令

1. 在Nginx的目录路径上输出cmd并回车，会在对应路径中打开命令行窗口
2. 根据情况自己选择

#启动Nginx
start nginx
#如果需要特殊设置nginx的配置文件路径，可以这样执行
start nginx -c conf/nginx.conf
#快速停止
nginx.exe -s stop
#安全退出
nginx.exe -s quit
#stop是快速停止nginx，可能并不保存相关信息；quit是完整有序的停止nginx，并保存相关信息。
#当配置信息修改，需要重新载入这些配置时使用此命令。
nginx.exe -s reload

到这里基本就已经可以访问了

Nginx开机自启

下载相关程序包

在github上下载相关的软件

由于我是64位电脑，所以下载x64版本

配置相关信息

将下载后的Winws文件放置nginx文件夹中，并将winws.exe文件修改文件名为nginx-service.exe

添加一个叫ngingx-service.xml的文件

<service>
    <id>nginx</id>
    <name>nginx</name>
    <description>nginx</description>
    <logpath>nginx文件路径</logpath>
    <logmode>roll</logmode>
    <depend></depend>
    <executable>nginx文件路径\nginx.exe</executable>
    <stopexecutable>nginx文件路径\nginx.exe -s stop</stopexecutable>
</service>

服务注册

cmd(管理员身份)进入nginx的安装目录,执行:nginx-service.exe install命令,然后进入系统服务,看是否注册nginx服务成功并且检查是否设置为自动启动