docker集成kkfileview实现文件在线预览（采坑记录）

SingleCase

已于 2023-06-26 18:07:06 修改

阅读量2.1k

点赞数

文章标签： docker java 容器

于 2023-03-09 10:44:38 首次发布

本文链接：https://blog.csdn.net/qq_50867577/article/details/129417127

版权

前言

本篇文章通过其他优秀博主博客，完成服务器上docker集成kkfileview，作为学习记录，并记录一下过程中的踩的坑，参考博客：
docker部署kkfileview：
https://blog.csdn.net/qq_33697094/article/details/126076565
https://blog.csdn.net/qq_48329942/article/details/121672290?spm=1001.2014.3001.5502
nginx配置文件：
https://blog.csdn.net/qq_48329942/article/details/125042947?spm=1001.2014.3001.5502

1.docker完成部署

拉取镜像: docker pull keking/kkfileview
启动容器: docker run -dit -p 8012:8012 keking/kkfileview
// 这里 -dit 是在后台使用交互式方式启动容器，-p 将容器内8012端口映射到服务器8012端口

2.前端js修改，完成在线预览

这里直接贴出kkfileview官网代码

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/js-base64@3.6.0/base64.min.js"></script>
// /file/test.txt是服务器文件存放位置
var url = 'http://127.0.0.1:8080/file/test.txt'; //要预览文件的访问地址
window.open('http://127.0.0.1:8012/onlinePreview?url='+encodeURIComponent(Base64.encode(url)));

正常情况来说，这样就能直接实现在线预览功能了

3. 问题排查

我在做完前面的步骤后，一直预览失败，于是开始了问题排查

（1）文件服务器问题

最开始点击在线预览提示连接被拒绝，直接把上面js的url复制到浏览器访问，发现也是连接被拒绝，不知道为什么，一直在纠结这个8080端口，我寻思这个端口我没用过啊，不是Tomcat的默认端口吗，后来在同事帮助下，我才回想起，刚接触java的时候，当时用Tomcat部署项目，在浏览器可以通过这种方式，直接访问到webapp下的静态资源，同事告诉我两种方式可以处理

a. 在后端服务yml中配置

# 这样配置后使用ip:port方式就能直接访问到服务器的静态资源
# 例如：ip:port/24.jpg 就能访问到E:/images/24.jpg资源
spring:
  resources:
    static-locations: file:E:/images/, file:E/images_bak/

配置完成后，通过webmvc配置做路径映射

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.EnableWebMvc;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
@EnableWebMvc
public class MvcConfig implements WebMvcConfigurer {
    
    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
    	// 做路径映射后访问E:/images/0.jpg通过浏览器url访问变成http://ip:port/file/0.jpg
        registry.addResourceHandler("/file/**")
            .addResourceLocations("file:E:/images/")
            .addResourceLocations("file:E:/images_bak/")
        ;
    }
}

b. nginx方式配置

访问ip:port/images/直接命中到服务器/data/ruoyi下的资源

location /images/ {  
	root /data/ruoyi;  
}

（2）404文件不存在问题

找了很久的问题，服务器该路径下也确实存在文件，但是就是找不到，后来发现我的后端服务和nginx都是docker方式启动的，猜测又是路径挂载问题，于是重启容器

// 将容器内路径和服务器路径挂载一下
docker run -v /data/ruoyi/images:/data/ruoyi/images

至此，问题全部解决，在线预览实现成果，附上预览效果
在这里插入图片描述在同事的帮助下，刚搞好这个，他告诉我kkfileview已经过时，现在还有更强大的onlyoffice不仅可以在线预览，还可以在线编辑…

4.kkfileview修改

用官方原版的代码或者镜像部署后，如果文件不存在会出现官方自带的找不到文件页面，但是有时候我们想要用自己的文件找不到页面，这里就需要对页面进行修改，这里我修改了图片和文件找不到的页面。

a. 拉取官方代码

gitee地址：https://gitee.com/kekingcn/file-online-preview?_from=gitee_search

b.修改对应文件

文件路径 server/web
我这修改了一下文件：
fileNotSupported.ftl：文件找不到的那个页面
picture.ftl：图片找不到的页面
注意：这里文件找不到和图片找不到不同，所以要改图片找不到的就得改这个文件，其他文件可以只改fileNotSupported这个页面
在这里插入图片描述

c.打包部署

我这里用的docker方式部署，下面是docker部署方式步骤。

# 1. 将打包的jar上传到服务器
# 2. 将最新的jar上传到kkfileview容器
# 2.1 查看运行中的容器，查看容器id
docker ps
# 2.2 复制jar包到容器内的/opt目录下
docker cp kkFileView-4.3.0-SNAPSHOT.jar 容器id:/opt
# 3. 替换容器内的jar
# 3.1 进入容器
docker exec -it 容器id bash
# 3.2 替换jar
cd /opt
# 替换并重命名（这里必须重命名为以前jar的名字，覆盖之前的jar）
cp kkFileView-4.3.0-SNAPSHOT.jar /opt/kkFileView-4.1.0/bin/kkFileView-4.1.0-SNAPSHOT.jar
exit
# 4. 重启容器
docker restart 容器id