DataEase-V1.18版本源码通过Docker镜像部署与静态资源通过阿里云OSS存储实现看这一篇就够了

爱被打了一巴掌 2024-04-29 01:42 6阅读 0赞

### 修改DataEase实现静态资源阿里云OSS存储 ###

#### 后端源码文件读取配置类配置 ####

##### 1.阿里云OSS配置类 #####

/**
     * ClassName AliyunConfig.java
     * author shuyixiao
     * version 1.0.0
     * Description 阿里云OSS配置
     * createTime 2024年04月03日 10:03:00
     */
    @Data
    @Configuration
    public class AliyunConfig {
        
    
        // 地域节点
        @Value("${aliyun.oss.endpoint}")
        private String endpoint;
        @Value("${aliyun.accessKeyId}")
        private String accessKeyId;
        @Value("${aliyun.accessKeySecret}")
        private String accessKeySecret;
    
        @Value("${aliyun.oss.bucketName}")
        private String bucketName;
        @Value("${aliyun.oss.urlPrefix}")
        private String urlPrefix;
    
    }

##### 2.图片文件上传base64转MultipartFile工具类 #####

public class Base64DecodedMultipartFile implements MultipartFile {
        
        private final byte[] imgContent;
        private final String header;
    
        public Base64DecodedMultipartFile(byte[] imgContent, String header) {
        
            this.imgContent = imgContent;
            this.header = header;
        }
        @Override
        public String getName() {
        
            return System.currentTimeMillis() + Math.random() + "." + header.split("/")[1].split(";")[0];
        }
    
        @Override
        public String getOriginalFilename() {
        
            return getName();
        }
    
        @Override
        public String getContentType() {
        
            return header.split(":")[1].split(";")[0];
        }
    
        @Override
        public boolean isEmpty() {
        
            return imgContent == null || imgContent.length == 0;
        }
    
        @Override
        public long getSize() {
        
            return imgContent.length;
        }
    
        @Override
        public byte[] getBytes() {
        
            return imgContent;
        }
    
        @Override
        public InputStream getInputStream() {
        
            return new ByteArrayInputStream(imgContent);
        }
    
        @Override
        public void transferTo(File dest) throws IOException, IllegalStateException {
        
            try (FileOutputStream fos = new FileOutputStream(dest)) {
        
                fos.write(imgContent);
            }
        }
    
    }

##### 3.图片静态文件解析工具类 #####

public class Base64DecodedStaticFile implements MultipartFile {
        
        private byte[] imgContent;
    
        public Base64DecodedStaticFile(byte[] imgContent) {
        
            this.imgContent = imgContent;
        }
    
        @Override
        public String getName() {
        
            return "filename";
        }
    
        @Override
        public String getOriginalFilename() {
        
            return "originalFilename.jpg";
        }
    
        @Override
        public String getContentType() {
        
            return "image/jpeg";
        }
    
        @Override
        public boolean isEmpty() {
        
            return imgContent == null || imgContent.length == 0;
        }
    
        @Override
        public long getSize() {
        
            return imgContent.length;
        }
    
        @Override
        public byte[] getBytes() throws IOException {
        
            return imgContent;
        }
    
        @Override
        public InputStream getInputStream() throws IOException {
        
            return new ByteArrayInputStream(imgContent);
        }
    
        @Override
        public void transferTo(java.io.File dest) throws IOException, IllegalStateException {
        
            // 这里根据你的需求实现文件传输的逻辑
        }
    
    }

##### 4.阿里云oos响应配置类 #####

@Getter
    @Setter
    public class PicUploadResult {
        
        private String uid;
    
        private String name;
    
        private String status;
    
        private String response;
    
        private String linkProps;
    
    }

##### 5.文件上传工具类 #####

@Component
    public class FileUtil {
        
        @Autowired
        private AliyunConfig aliyunConfig;
    
    
        // 允许上传的格式
        private static final String[] IMAGE_TYPE = new String[]{
        ".bmp", ".jpg", ".jpeg", ".gif", ".png"};
        public PicUploadResult upload(MultipartFile multipartFile) {
        
            // 1. 对上传的图片进行校验: 这里简单校验后缀名
            // 另外可通过ImageIO读取图片的长宽来判断是否是图片,校验图片的大小等。
            // TODO 图片校验
            boolean isLegal = false;
            for (String type : IMAGE_TYPE) {
        
                if (StringUtils.endsWithIgnoreCase(multipartFile.getOriginalFilename(), type)) {
        
                    isLegal = true;
                    break;  // 只要与允许上传格式其中一个匹配就可以
                }
            }
            PicUploadResult picUploadResult = new PicUploadResult();
            // 格式错误, 返回与前端约定的error
            if (!isLegal) {
        
                picUploadResult.setStatus("error");
                return picUploadResult;
            }
    
            // 生成唯一的文件名
            String originalFileName = multipartFile.getOriginalFilename();
            String fileExtension = originalFileName.substring(originalFileName.lastIndexOf("."));
            String uniqueFileName = UUID.randomUUID().toString() + fileExtension; // 包含UUID的文件名
    
    
            // 3. 上传至阿里OSS
            try {
        
                // 初始化OSSClient
                OSS ossClient = new OSSClientBuilder().build(aliyunConfig.getEndpoint(), aliyunConfig.getAccessKeyId(), aliyunConfig.getAccessKeySecret());
    
                ossClient.putObject(aliyunConfig.getBucketName(), uniqueFileName, new ByteArrayInputStream(multipartFile.getBytes()));
            } catch (IOException e) {
        
                e.printStackTrace();
                // 上传失败
                picUploadResult.setStatus("error");
                return picUploadResult;
            }
    
            // 上传成功
            picUploadResult.setStatus("done");
            // 文件名(即直接访问的完整路径)
            picUploadResult.setName(aliyunConfig.getUrlPrefix() + uniqueFileName);
            // uid
            picUploadResult.setUid(String.valueOf(System.currentTimeMillis()));
            return picUploadResult;
        }
    
    }

##### 6.DataEase源码部分适配OSS修改 #####

###### 1.修改应用管理功能逻辑（PanelAppTemplateService类） ######

*  注入文件上传工具类

@Autowired
    private FileUtil fileUtil;

*  修改原有代码逻辑

//Store static resource into the server
                // 缩略图处理
                String snapshotName = "app-template-" + request.getId() + ".jpeg";
                String base64Image = request.getSnapshot().split(",")[1];
                String imageType = request.getSnapshot().split(";")[0].split(":")[1];
                byte[] imageBytes = javax.xml.bind.DatatypeConverter.parseBase64Binary(base64Image);
                MultipartFile multipartFile = new Base64DecodedMultipartFile(imageBytes, imageType);
                // 调用上传方法
                PicUploadResult uploadResult = fileUtil.upload(multipartFile);
                staticResourceService.saveSingleFileToServe(snapshotName, request.getSnapshot().replace("data:image/jpeg;base64,", "").replace("data:image/png;base64,", ""));
                requestTemplate.setSnapshot("/" + UPLOAD_URL_PREFIX + '/' + snapshotName);
    //            requestTemplate.setSnapshot("/" + UPLOAD_URL_PREFIX + '/' + snapshotName);
                requestTemplate.setSnapshot(uploadResult.getName());
                // 静态资源小图处理
                Gson gson = new Gson();
                PanelGroupRequest panelGroupRequest = gson.fromJson(request.getPanelInfo(), PanelGroupRequest.class);
    //            panelGroupRequest.setPanelData(JSON.toJSONString(jsonArray));
                Map<String, String> resource = gson.fromJson(panelGroupRequest.getStaticResource(), Map.class);
                Map<String, String> imageUrl = new HashMap<>();
                for (String s : resource.keySet()) {
        
                    String imageCode = resource.get(s);
                    byte[] bytes = DatatypeConverter.parseBase64Binary(imageCode);
                    PicUploadResult picUploadResult = fileUtil.upload(new Base64DecodedStaticFile(bytes));
                    imageUrl.put(s, picUploadResult.getName());
                }
                // 数据库缩略图存储处理
                String staticResource = panelGroupRequest.getStaticResource();
                Map<String,String> staticResourceMap= gson.fromJson(staticResource, Map.class);
                for (String s : staticResourceMap.keySet()) {
        
                    String s1 = staticResourceMap.get(s);
                    if (s.contains("static-resource")) {
        
                        // 找到匹配项，修改为阿里云oos存储地址
                        for (String string : imageUrl.keySet()) {
        
                            if (string.equals(s)){
        
                                staticResourceMap.remove(s);
                                staticResourceMap.put(imageUrl.get(s), s1);
                            }
                        }
                    }
                }
                String panelData = panelGroupRequest.getPanelData();
                JSONArray jsonArray = JSON.parseArray(panelData);
                // 遍历数组，寻找特定的 propValue 值
                for (int i = 0; i < jsonArray.size(); i++) {
        
                    JSONObject obj = jsonArray.getJSONObject(i);
                    if (obj.containsKey("propValue") && obj.getString("propValue").contains("/static-resource/")) {
        
                        // 找到匹配项，添加前缀
                        obj.put("propValue", imageUrl.get(obj.get("propValue")));
                    }
                }
                panelGroupRequest.setPanelData(JSON.toJSONString(jsonArray));
                panelGroupRequest.setStaticResource(gson.toJson(staticResourceMap));
                requestTemplate.setPanelInfo(gson.toJson(panelGroupRequest));

###### 2.修改模板管理功能逻辑（PanelTemplateService类） ######

*  注入文件上传工具类

@Autowired
    private FileUtil fileUtil;

*  修改原有逻辑代码

//Store static resource into the server
                    staticResourceService.saveFilesToServe(request.getStaticResource());
                    // 缩略大图处理
                    String snapshotName = "template-" + request.getId() + ".jpeg";
                    String base64Image = request.getSnapshot().split(",")[1];
                    String imageType = request.getSnapshot().split(";")[0].split(":")[1];
                    byte[] imageBytes = javax.xml.bind.DatatypeConverter.parseBase64Binary(base64Image);
                    MultipartFile multipartFile = new Base64DecodedMultipartFile(imageBytes, imageType);
                    // 调用上传方法
                    PicUploadResult uploadResult = fileUtil.upload(multipartFile);
                    staticResourceService.saveSingleFileToServe(snapshotName, request.getSnapshot().replace("data:image/jpeg;base64,", "").replace("data:image/png;base64,", ""));
                    request.setSnapshot("/" + UPLOAD_URL_PREFIX + '/' + snapshotName);
                    // 文件中静态资源小图处理
                    String staticResource = request.getStaticResource();
                    Gson gson = new Gson();
                    Map<String, String> resource = gson.fromJson(staticResource, Map.class);
                    Map<String, String> imageCode = new HashMap<>();
                    for (String s : resource.keySet()) {
        
                        String base64Picture = resource.get(s);
                        byte[] bytes = DatatypeConverter.parseBase64Binary(base64Picture);
                        PicUploadResult picUploadResult = fileUtil.upload(new Base64DecodedStaticFile(bytes));
                        imageCode.put(s, picUploadResult.getName());
                    }
                    String templateData = request.getTemplateData();
                    JSONArray jsonArray = JSON.parseArray(templateData);
                    for (int i = 0; i < jsonArray.size(); i++) {
        
                        JSONObject obj = jsonArray.getJSONObject(i);
                        if (obj.containsKey("propValue") && obj.getString("propValue").contains("/static-resource/")) {
        
                            // 找到匹配项，添加前缀
                            obj.put("propValue", imageCode.get(obj.get("propValue")));
                        }
                    }
                    request.setTemplateData(JSON.toJSONString(jsonArray));
    //                request.setSnapshot("/" + UPLOAD_URL_PREFIX + '/' + snapshotName);
                    request.setSnapshot(uploadResult.getName());

##### 7.配置文件中添加阿里云OSS配置 #####

#### 阿里云oss配置 ####

# 阿里云oss配置
    # Aliyun OSS 配置
    # 访问密钥ID，用于标识用户
    aliyun.accessKeyId=xxxxxxxxxxxxxx
    # 访问密钥密文，用于验证用户的身份
    aliyun.accessKeySecret=xxxxxxxxxxxxxx
    # OSS服务的访问域名
    aliyun.oss.endpoint=xxxxxxxxxxxxxx
    # OSS中的存储桶名称
    aliyun.oss.bucketName=xxxxxxxxxxxxxx
    #访问OSS服务的URL前缀
    aliyun.oss.urlPrefix=xxxxxxxxxxxxxx

> 前端源码样式修改为自己喜欢的即可

#### 前后端不分离单体部署 ####

##### 1.源码获取 #####

[GitHub地址][GitHub]  
![在这里插入图片描述][a4422989d4fb439498168a3a688608b1.png]  
[Gitee地址][Gitee]

![在这里插入图片描述][070ac3994b594113b1989d5e0f545c6c.png]

##### 2.配置源码信息 #####

###### 后端代码 ######

> 注意事项：

注意V1.18代码的配置方式为JDK11版本  
需要后端POM文件中有的资源依赖拉取不下来，可以链接：https://pan.baidu.com/s/1UYKk9R96B6dBUEqsRgjJhA 提取码：x8wr 这里获取然后直接替换即可  
![在这里插入图片描述][d6515fbd21084b5cb0f06a97f5b82b5a.png]  
配置启动类配置处的配置文件信息，由于是在windows的环境中，下图是Linux中的文件写法，因此偷懒一些可以直接就是在windows的项目的根路径下建立相似的路径文件信息即可，详情见下图  
![在这里插入图片描述][b012810017904896a0557bae281a56a0.png]  
![在这里插入图片描述][b6486d2b5e1d475686c1eb3ac0c92761.png]  
配置配置文件中的数据库信息，数据库信息比较私密因此直接打马赛克了~  
![在这里插入图片描述][ad31c226b554455484753c7af6caef7c.png]

###### 前端代码 ######

> 注意事项：由于使用的是V1.18版本左右的前端代码，因此node版本不宜太高16.0.0左右即可。

查看前端项目的打包配置信息可以得到，运行需要的指令信息  
![在这里插入图片描述][f3ef584b51134ddd8a7c9ff4a5d68892.png]

##### 3.Docker打包部署 #####

###### 首先在项目根文件夹下面添加数据库信息的配置文件 ######

![在这里插入图片描述][ffdc9b1aa75a4201a06ce1e0d2816c74.png]

###### 去除后端POM文件中移动端部分资源 ######

![在这里插入图片描述][380a86d555274969b68aa5d01d7bd40d.png]\#\#\#\#\# 修改前端POM文件中node和npm版本  
![在这里插入图片描述][6f2d2d6cbe6349ee8583957fa2a9e6ce.png]

###### 分别打包前后端文件资源 ######

![在这里插入图片描述][fe7ed51bb2db494a934a8f7adef01b05.png]

###### 执行Docker打包指令得到镜像文件 ######

# 这里我需要说明一下就是版本号随着DataEase官方版本给就可以，这里我写的时候使用1.18.15就写这个了
     docker build --build-arg IMAGE_TAG=1.18.15 -t your-image-name:tag .

![在这里插入图片描述][5d30cbdbb5ac4b40842de0d812643533.png]  
![在这里插入图片描述][1480761154e94f73b87f95ec6e146832.png]

###### 运行镜像文件得到前端展示页面 ######

![在这里插入图片描述][06d092f3ab7143a0af7c8882069a2bab.png]

###### 附录一下打包和启动命令 ######

docker build --build-arg IMAGE_TAG=1.18.15 -t core-backend-image-v1.18.15:1.18.15 .
    docker run -d -p 8181:8181 core-backend-image-v1.18.15:1.18.15

#### 前后端分离单体部署 ####

##### 后端代码 #####

###### 1.修改后端代码添加对应上下文 ######

![在这里插入图片描述][4497c01978d24505950de28b09f94e79.png]\#\#\#\#\# 2.修改后端短链共享代码部分  
![在这里插入图片描述][213cf46fc6054f4f80334066e17d4d9e.png]

###### 3.pom文件中去除掉前端资源打包内容 ######

![在这里插入图片描述][b800cc7b22504f50a3ac48242d3ac891.png]

###### 4.执行Docker打包，步骤和上述前端后不分离单体部署命令一致不赘述了 ######

#### 前端代码修改 ####

##### 前端代码修改下面两处配置信息完成接口路径上下文配置 #####

![在这里插入图片描述][3fe5b10426464d05b0be500b54f7bfc6.png]  
![在这里插入图片描述][02d6fbe351054b508b84ab81e5f1285d.png]

##### 执行前端打包后放置与nginx服务器 #####

# 打包命令：
    npm run build

[GitHub]: https://github.com/dataease/dataease/tree/v1.18
[a4422989d4fb439498168a3a688608b1.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/29/8371b37545924e66b5685a0cd4509eb5.png
[Gitee]: https://gitee.com/fit2cloud-feizhiyun/DataEase/tree/v1.18.18
[070ac3994b594113b1989d5e0f545c6c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/29/0db1edbf874841e792019646e916ae6d.png
[d6515fbd21084b5cb0f06a97f5b82b5a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/29/aaffa8c54b554aa7ad572202a1cee12e.png
[b012810017904896a0557bae281a56a0.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/29/4e4353a2a46b42b49d54e2aab38d6eb8.png
[b6486d2b5e1d475686c1eb3ac0c92761.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/29/11f8198f69c94108a470b9cf25edfb06.png
[ad31c226b554455484753c7af6caef7c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/29/e7fd1bfe84684396bfd8de66a63fe0f6.png
[f3ef584b51134ddd8a7c9ff4a5d68892.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/29/494e7da310fe4bc49fae459948f60638.png
[ffdc9b1aa75a4201a06ce1e0d2816c74.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/29/d7c6df95c47041d79f56936a47017332.png
[380a86d555274969b68aa5d01d7bd40d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/29/407b105681524a558447cd243e549bf7.png
[6f2d2d6cbe6349ee8583957fa2a9e6ce.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/29/3fc4f0a1284a488488c0d9ff2bef4333.png
[fe7ed51bb2db494a934a8f7adef01b05.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/29/1eb69fab966e44d59997dbd752eabb0f.png
[5d30cbdbb5ac4b40842de0d812643533.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/29/6883b6621976411e9abbda6de75cbaf4.png
[1480761154e94f73b87f95ec6e146832.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/29/26082e55801e4c59963acd6a817cc294.png
[06d092f3ab7143a0af7c8882069a2bab.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/29/dddb99000c2a4f259d3e3a7c9807330d.png
[4497c01978d24505950de28b09f94e79.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/29/73b4dd37634c4e7c9f739af9c9980314.png
[213cf46fc6054f4f80334066e17d4d9e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/29/b31430222e36432984d4efdbbcfac644.png
[b800cc7b22504f50a3ac48242d3ac891.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/29/f76477a3ff46461fb722f85d773b9622.png
[3fe5b10426464d05b0be500b54f7bfc6.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/29/6d9756d1125840f88086764e567e26f6.png
[02d6fbe351054b508b84ab81e5f1285d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/29/7bec19167948473b97625e036f8578ba.png