环境部署

准备工作

JDK >= 1.8 (推荐1.8版本)
Mysql >= 8.0.24 (推荐8.0.24版本)
Maven >= 3.2.3
Redis >= 3.0
Node >= 16

💡 提示： 前端安装完node后，最好设置下淘宝的镜像源，不建议使用cnpm（可能会出现奇怪的问题）

运行系统

前往Gitee下载页面https://gitee.com/jishenghua/gyj-iot下载解压到工作目录

1、导入到IDEA，菜单 File -> New -> Project from Existing Sources...，选择后端的工作目录gyj-iot-boot，然后选择 Maven ，点击 Finish 按钮，即可成功导入。 IDEA会自动加载Maven依赖包，初次加载会比较慢（根据自身网络情况而定）
2、创建数据库gyj_iot并导入数据脚本gyj_iot.sql
3、打开项目运行com.gyjiot.GyjiotApplication.java，出现如下图表示启动成功。

 * * * * * * * * * * * * 管伊佳物联平台[✔启动成功] * * * * * * * * * * * *

💡 提示： 后端运行成功可以通过http://localhost:8080访问，但是不会出现静态页面，可以继续参考下面步骤部署gyj-iot-web前端，然后通过前端地址来访问。

前端运行

# 进入项目目录
cd gyj-iot-web

# 安装依赖
npm install

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

# 本地开发 启动项目（vue3版本）
vite

打开浏览器，输入：http://localhost:8081 默认账户/密码 admin/admin123 若能正确展示登录页面，并能成功登录，菜单及页面展示正常，则表明环境搭建成功

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

git clone https://gitee.com/jishenghua/gyj-iot.git

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

必要配置

修改数据库连接，编辑resources目录下的application-dev.yml和application-prod.yml

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

修改服务器配置，编辑resources目录下的application.yml

# 开发环境配置
server:
  # 服务器的HTTP端口，默认为8080
  port: 端口
  servlet:
    # 应用的访问路径
    context-path: /应用路径

部署系统

💡 提示： 因为本项目是前后端完全分离的，所以需要前后端都单独部署好，才能进行访问。

后端部署

打包工程文件在gyj-iot-boot项目的bin目录下执行package.bat打包后端工程，生成war/jar包文件。
然后会在项目gyj-iot-boot/gyjiot-admin目录下生成target文件夹包含war或jar
部署工程文件
1、jar部署方式使用命令行执行：java –jar gyjiot-admin.jar 或者执行脚本：gyj-iot-boot/bin/run.bat
2、war部署方式 gyj-iot-boot/pom.xml中的packaging修改为war，放入tomcat服务器webapps

<packaging>war</packaging>

前端部署

当项目开发完毕，只需要运行一行命令就可以打包你的应用

# 打包正式环境
vite build

构建打包成功之后，会在根目录生成 dist 文件夹，里面就是构建打包好的文件，通常是 ***.js 、***.css、index.html 等静态文件。
通常情况下 dist 文件夹的静态文件发布到你的 nginx 或者静态服务器即可，其中的 index.html 是后台服务的入口页面。

环境变量

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

环境变量必须以VITE_APP_为开头。如:VITE_APP_BASE_API、VITE_APP_TITLE

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

console.log(process.env.VITE_APP_xxxx)

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

Tomcat配置

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

<Context docBase="" path="/" reloadable="true" source=""/>

dist目录的文件夹下新建WEB-INF文件夹，并在里面添加web.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/gyj-iot/gyj-iot-web;
            index  index.html index.htm;
			try_files $uri $uri/ /index.html;
        }
		
        # 后端
		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/;
		}
    
        # wss连接代理到ws
        location /mqtt {
            proxy_pass http://localhost:8083/mqtt;
            proxy_read_timeout 60s;
            proxy_set_header Host $host;
            proxy_set_header X-Real_IP $remote_addr;
            proxy_set_header X-Forwarded-for $remote_addr;
            proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection 'Upgrade';
        }
    }
}

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

# 开启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路径是否有可读可写操作权限
如遇到无法解决的问题请到https://gitee.com/jishenghua/gyj-iot/issues反馈，会不定时进行解答。