java编程开发之若依vue --- 部署

部署的大致步骤

0.配置环境，jdk下载安装配置环境变量，Mysql下一步就好记住用户名和密码，Redis下载win版本运行即可，Maven 下载配置环境变量修改本地库存放位置，Node 下一步就好设置下淘宝的镜像源。

JDK >= 1.8 (推荐1.8版本)
Mysql >= 5.7.0 (推荐5.7版本)
Redis >= 3.0
Maven >= 3.0
Node >= 12

1.下载解压

https://gitee.com/y_project/RuoYi-Vue ，点击下载zip即可

也可以使用git

建议使用Git克隆，因为克隆的方式可以和RuoYi随时保持更新同步。使用Git命令克隆

git clone https://gitee.com/y_project/RuoYi-Vue.git

2.配置若依

后端，导入两个文件，配置两个文件

导入eclipse

依照maven项目导入。菜单 File -> Import，然后选择 Maven -> Existing Maven Projects，点击 Next> 按钮，选择工作目录，然后点击 Finish 按钮，即可成功导入。

软件会自动识别加载网络依赖库，可能会因为网络太慢而中断，注意配置袋里或切换maven源。

导入idea类似

创建数据库ry-vue并导入sql目录下的数据脚本ry_2021xxxx.sql，quartz.sql。

编辑resources目录下的application-druid.yml，核对数据库地址、账号、密码

编辑resources目录下的application.yml，基于情况修改端口和上下文路径，所谓上下文路径就是给所有的连接增加一个前缀目录

前端

在idea中打开控制台，

# 进入项目目录
cd ruoyi-ui

# 强烈建议不要用直接使用 cnpm 安装，会有各种诡异的 bug，可以通过重新指定 registry 来解决 npm 安装速度慢的问题。
npm install --registry=https://registry.npmmirror.com

3.编译运行

后端

编译器直接运行

打开项目运行com.ruoyi.RuoYiApplication.java，出现若依logo表示成功启动

编译

编译有两种方式，jar和war，jar有java可以直接运行，因为jar中包含了tomar，war需要tomcat服务器

jar直接打包，打包命令执行package.bat，或者idea右边maven点击package也可以打包

多模块版本会生成在ruoyi/ruoyi-admin模块下target文件夹里生成打包文件

war打包，多模块版本在ruoyi/ruoyi-admin模块下修改pom.xml中的packaging修改为war同时去除内嵌Tomcat（PS：此步骤不重要，因为不排除也能在容器中部署war）。

<!-- 多模块排除内置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>

打包命令执行package.bat，或者idea右边maven点击package也可以打包

运行

运行前后端依据代码有两种方式，单独tomcat、单独nginx、tomcat+nginx混合方式。如果后端是jar前端vue可以部署在前端单独tomcat或者前端单独nginx，如果后端war可以的部署方式前后端单独tomcat和后端tomcat+前端nginx混合方式

jar
使用命令行执行：java –jar ruoyi.jar 或者执行脚本：ruoyi/bin/run.bat

war

将打包好war文件上传到tomcat服务器下的webapps文件夹，并将名字修改为prod-api.war

注意，这里的webpps是tomcat的目录war目录，也可以自定义目录。文件命名为prod-api.war是因为tomc会自动解压war，解压后的文件夹名称就是prod-api，prod-api也是url访问路径，前端默认访问这个后端路径。

然后启动在bin/下启动tomcat，可以查看启动日志或者使用curl或者浏览器访问是否已经启动，访问地址：http://ip:port/prod-api/，如果返回欢迎使用RuoYi后台管理框架，当前版本：v3.8.4，请通过前端地址访问。，证明后端部署成功

 前端

编译器直接运行

# 本地开发 启动项目
npm rudev dev

编译

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

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

构建打包成功之后，会在根目录生成 dist 文件夹，里面就是构建打包好的文件，压缩该文件夹

运行

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; #dist目录
            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/; #后端代理目录 如果是后端是jar就可以这样配置，如果是tomcat应该配置http://localhost:8080/prod-api/
} error_page 500 502 503 504 /50x.html; location = /50x.html { root html; } } }

tomcat运行方式。将webapps下的BOOT文件下的所有文件（除WEB-INF之外）删除

修改tomcat/webapps/ROOT/WEB-INF目录下的web.xml文件如下：

<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_4_0.xsd"

  version="4.0" 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>

修改server.xml，Host节点下添加

<Context docBase="dist前端文件路径" path="/" reloadable="true" source=""/>

将打包好的dist文件下的所有文件上传到tomcat/webapps/ROOT文件夹下

启动tomcat（将路径切换到tomcat/bin下）

cd /usr/local/apache-tomcat-9.0.65/webapps/bin

执行

./startup.sh

启动成功后，浏览器访问http://ip:port

默认账户/密码 admin/admin123

若能正确展示登录页面，并能成功登录，菜单及页面展示正常，则表明环境搭建成功

提示

因为本项目是前后端完全分离的，所以需要前后端都单独启动好，才能进行访问。
前端安装完node后，最好设置下淘宝的镜像源，不建议使用cnpm（可能会出现奇怪的问题）

其他说明

vue.config.js 文件

outputDir 表示输出目录

publicPath表示根目录

环境变量

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

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

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

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

console.log(process.env.VUE_APP_xxxx)

扩展阅读：《Vue CLI - 环境变量和模式》

注意

环境配置修改后，需要重新运行才会生效

(opens new window)

这里的配置通常是在 Nginx 的配置文件（/etc/nginx/nginx.conf）中进行的，因为 Nginx 是一个高性能 Web 服务器和反向代理服务器，支持gzip压缩，并且可以有效的缓解服务器的性能瓶颈。

在 Nginx 配置文件中，gzip压缩相关的配置可以在 http、server 或 location 块中进行。例如在http块中进行的配置如下：

```nginx
http {
gzip on;
gzip_min_length 1k;
gzip_buffers 16 64K;
gzip_http_version 1.1;
gzip_comp_level 5;
gzip_types text/plain application/x-javascript text/css application/xml application/javascript;
gzip_vary on;
# 其他http相关配置
...
}
```

这样配置之后，Nginx 将启用gzip压缩，对于满足压缩条件的请求进行gzip压缩，从而减少资源文件的体积，以加快网页访问速度。需要注意的是，这个配置中的具体参数值和是否开启gzip压缩，需要根据具体的应用场景和需求进行调整。

# 开启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]\.";

建议开启Gzip压缩

在http配置中加入如下代码对全局的资源进行压缩，可以减少文件体积和加快网页访问速度。

同时建议开启解压缩静态文件 如何使用Gzip解压缩静态文件

常见问题

如果使用Mac需要修改application.yml文件路径profile
如果使用Linux 提示表不存在，设置大小写敏感配置在/etc/my.cnf添加lower_case_table_names=1，重启MYSQL服务
如果提示当前权限不足，无法写入文件请检查application.yml中的profile路径或logback.xml中的log.path路径是否有可读可写操作权限