环境部署
::: hljs-center
# 环境部署
:::
## 准备工作
```
JDK >= 1.8 (推荐1.8版本)
Mysql >= 5.7.0 (推荐5.7版本)
Redis >= 3.0
Maven >= 3.0
Node >= 10
```
> **提示**
前端安装完node后，最好设置下淘宝的镜像源，不建议使用cnpm（可能会出现奇怪的问题）
## 运行系统
前往git远程仓库下载解压到工作目录
### 后端运行
1、导入到开发法工具。
2、创建数据库`ry-vue`并导入数据脚本`ry_2021xxxx.sql`，`quartz.sql`
3、打开项目运行`com.ruoyi.RuoYiApplication.java`。
> **提示**
后端运行成功可以通过(http://localhost:8080 (opens new window))访问，但是不会出现静态页面，可以继续参考下面步骤部署ruoyi-ui前端，然后通过前端地址来访问。
### 前端运行
```
# 进入项目目录
cd ruoyi-ui
# 安装依赖
npm install
# 强烈建议不要用直接使用 cnpm 安装，会有各种诡异的 bug，可以通过重新指定 registry 来解决 npm 安装速度慢的问题。
npm install --registry=https://registry.npm.taobao.org
# 本地开发 启动项目
npm run dev
```
4、打开浏览器，输入：(http://localhost:80 (opens new window)) 默认账户/密码 admin/admin123）
若能正确展示登录页面，并能成功登录，菜单及页面展示正常，则表明环境搭建成功
> **提示**
因为本项目是前后端完全分离的，所以需要前后端都单独启动好，才能进行访问。
前端安装完node后，最好设置下淘宝的镜像源，不建议使用cnpm（可能会出现奇怪的问题）
## 部署系统
> **提示**
因为本项目是前后端完全分离的，所以需要前后端都单独部署好，才能进行访问。
### 后端部署
- 打包工程文件
在使用mvn命令或者开发工具可视化界面提供的打包功能，生成`war/jar`包文件。
然后会在项目下生成`target`文件夹包含`war`或`jar`
> **提示**
> 多模块版本会生成在ruoyi/ruoyi-admin模块下target文件夹
- 部署工程文件
1、jar部署方式
使用命令行执行：`java –jar ruoyi.jar`
2、war部署方式
`ruoyi/pom.xml`中的`packaging`修改为`war`，放入`tomcat`服务器`webapps`
```shell
<packaging>war</packaging>
```
> **提示**
> 多模块版本在ruoyi/ruoyi-admin模块下修改pom.xml
- SpringBoot去除内嵌Tomcat（PS：此步骤不重要，因为不排除也能在容器中部署war）
```language
<!-- 多模块排除内置tomcat -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
<exclusions>
<exclusion>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-tomcat</artifactId>
</exclusion>
</exclusions>
</dependency>
<!-- 单应用排除内置tomcat -->
<exclusions>
<exclusion>
<artifactId>spring-boot-starter-tomcat</artifactId>
<groupId>org.springframework.boot</groupId>
</exclusion>
</exclusions>
```
## 前端部署
当项目开发完毕，只需要运行一行命令就可以打包你的应用
```sh
# 打包正式环境
npm run build:prod
# 打包预发布环境
npm run build:stage
```
构建打包成功之后，会在根目录生成 `dist `文件夹，里面就是构建打包好的文件，通常是 `***.js 、***.css、index.html `等静态文件。
通常情况下 dist 文件夹的静态文件发布到你的` nginx `或者静态服务器即可，其中的 `index.html `是后台服务的入口页面。
> **outputDir 提示**
> 如果需要自定义构建，比如指定 dist 目录等，则需要通过 config (opens new window)的 outputDir 进行配置。
> **publicPath 提示**
> 部署时改变页面js 和 css 静态引入路径 ,只需修改 `vue.config.j`s 文件资源路径即可。
```js
publicPath: './' //请根据自己路径来配置更改
```
```js
export default new Router({
mode: 'hash', // hash模式
})
```
## 环境变量
所有测试环境或者正式环境变量的配置都在 .env.development (opens new window)等 `.env.xxxx`文件中。
它们都会通过 `webpack.DefinePlugin` 插件注入到全局。
环境变量必须以`VUE_APP_`为开头。如:`VUE_APP_API`、```VUE_APP_TITLE```
你在代码中可以通过如下方式获取:
```js
console.log(process.env.VUE_APP_xxxx)
```
扩展阅读：[《Vue CLI - 环境变量和模式》](https://cli.vuejs.org/zh/guide/mode-and-env.html)
> **注意**
> 环境配置修改后，需要重新运行才会生效
## Tomcat配置
修改`server.xml`，Host节点下添加
```
<Context docBase="" path="/" reloadable="true" source=""/>
```
dist目录的文件夹下新建`WEB-INF`文件夹，并在里面添加`web.xml`文件
```xml
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee
http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
version="3.1" metadata-complete="true">
<display-name>Router for Tomcat</display-name>
<error-page>
<error-code>404</error-code>
<location>/index.html</location>
</error-page>
</web-app>
```
## Nginx配置
```
worker_processes 1;
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 /home/ruoyi/projects/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;
}
}
}
```
**建议开启Gzip压缩**
在http配置中加入如下代码对全局的资源进行压缩，可以减少文件体积和加快网页访问速度。
```sh
# 开启gzip压缩
gzip on;
# 不压缩临界值，大于1K的才压缩，一般不用改
gzip_min_length 1k;
# 压缩缓冲区
gzip_buffers 16 64K;
# 压缩版本（默认1.1，前端如果是squid2.5请使用1.0）
gzip_http_version 1.1;
# 压缩级别，1-10，数字越大压缩的越好，时间也越长
gzip_comp_level 5;
# 进行压缩的文件类型
gzip_types text/plain application/x-javascript text/css application/xml application/javascript;
# 跟Squid等缓存服务有关，on的话会在Header里增加"Vary: Accept-Encoding"
gzip_vary on;
# IE6对Gzip不怎么友好，不给它Gzip了
gzip_disable "MSIE [1-6]\.";
```
## 常见问题
1. 如果使用`Mac`需要修改`application.yml`文件路径profile
2. 如果使用`Linux `提示表不存在，设置大小写敏感配置在`/etc/my.cnf`添加`lower_case_table_names=1`，重启MYSQL服务
3. 如果提示当前权限不足，无法写入文件请检查`application.yml`中的`profile`路径或`logback.xml`中的`log.path`路径是否有可读可写操作权限