在线表单收集系统Tduck（docker篇）

发表于 更新于 分类于 Waline： 阅读次数： 本文字数： 6.7k 阅读时长 ≈ 6 分钟
Tduck 填鸭是一款基于 B/S 架构的开源的表单在线收集系统。

不止一个人在微信公众号给我发送 tduck ，所以老苏决定再研究下 docker 版

之前老苏已写过基于 CentOS 的安装方法

  • 在线表单收集系统Tduck（上篇）
  • 在线表单收集系统Tduck（下篇）

没有找到官方的镜像，不过你可以试试👇

这是一个多合一的镜像，用于体验还是可以的，安装说明可以在参考文档部分找到，但是似乎并不支持设置自己的邮箱、微信公众号等，所以也就没办法用自己的账号登录了。

构建镜像

如果你不想自己构建，可以跳过，直接阅读下一章节

管方提供的 dockerfile 需要用户自己将后端编译的 tduck-api.jar 拷贝到 docker 目录，将前端打包后的 dist 里的文件拷贝到 docker/front 目录，这得把老苏之前写的搭建的环境操作再重做一遍，着实有点麻烦，老苏更希望实现从源代码直接编译打包镜像，总体思路继承了 YesPlayMusic，把前后端打进一个镜像，这样比较方便 nginx 做前后端分流处理

Dockerfile 分为了三个部分，其中 前端构建 和 后端构建 是可以独立使用的，前端构建 可以生成 dist，而 后端构建能生成 tduck-api.jar 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
# 前端构建
FROM node:16.5 as build-front
LABEL maintainer=laosu<wbsu2003@gmail.com>

WORKDIR /app
COPY /tduck-front/package.json ./
RUN npm install -g cnpm --registry=https://registry.npm.taobao.org
COPY /tduck-front/. ./
RUN cnpm install
RUN cnpm run build

# 后端构建
FROM maven:3.6.0-jdk-11-slim AS build_end
COPY . ./
RUN mvn -f /tduck-platform/pom.xml clean package -DskipTests

# 整体打包
FROM openjdk:11-jre-slim
RUN sed -i s@/deb.debian.org/@/mirrors.aliyun.com/@g /etc/apt/sources.list \
    && apt-get clean \
    && apt-get update \
    && apt-get install -y supervisor nginx
	
## nginx
COPY --from=build_end ./nginx.conf /etc/nginx/nginx.conf

## supervisor
COPY --from=build_end ./supervisord.conf /etc/supervisord.conf

## 前端静态文件	
COPY --from=build-front /app/dist/ /usr/share/nginx/html

## 后端jar包
COPY --from=build_end /tduck-platform/tduck-api/target/tduck-api.jar /usr/local/lib/tduck-api.jar

EXPOSE 80

ENTRYPOINT ["supervisord","-c","/etc/supervisord.conf"]

nginx 设置文件 nginx.conf 用的是官方的，只修改了 proxy_pass

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
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  form.tec-do.com;
        root /usr/share/nginx/html;

        location / {
          # 静态文件地址 root访问路径会把请求的路径带上
            root   /usr/share/nginx/html;
	        try_files $uri$args $uri$args/ /index.html;
            index  index.html index.htm;
        }

        location /tduck-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://127.0.0.1:8999/tduck-api/;
        }

        #error_page   500 502 503 504  /50x.html;
        #location = /50x.html {
        #    root   html;
        #}
    }
}

supervisord.conf 文件是新增用来控制进程的，前端 app 是运行在 nginx 上的静态页面，后端 tduck_api 基于 jar 包

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
[include]
files = /etc/supervisor/conf.d/*.conf

[program:app]
command=nginx -g "daemon off;"

[program:api]
command=java -Dfile.encoding=UTF-8 -jar /usr/local/lib/tduck-api.jar

#directory will be any folder where you wnat supervisor to cd before executing.
#directory=/project 
autostart=true
autorestart=false
startretries=3

#user will be anyone you want but make sure that user will have the enough privilage.
user=root

[supervisord]
nodaemon=true
logfile=/tmp/supervisord.log
pidfile=/tmp/supervisord.pid
loglevel=debug
logfile_maxbytes=10MB

[supervisorctl]

docker-compose.yaml 基于官方的修改而成，因为做了前后端二合一，所以去掉了 tduck-front，但是新增了邮件环境变量，只是默认并没有启用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
version: '3.6'
services:
  tduck-app:
    environment:
      #      - SPRING_DATASOURCE_DRIVER-CLASS-NAME=com.mysql.cj.jdbc.driver
      - SPRING_DATASOURCE_URL=$SPRING_DATASOURCE_URL
      - SPRING_DATASOURCE_USERNAME=$SPRING_DATASOURCE_NAME
      - SPRING_DATASOURCE_PASSWORD=$MYSQL_ROOT_PASSWORD
      - SPRING_REDIS_DATABASE=0
      - SPRING_REDIS_HOST=$REDIS_HOST
      - SPRING_REDIS_PORT=$REDIS_PORT
      - AJ_CAPTCHA_ENABLE=false
	# 老苏新增邮件设置
    #  - SPRING_MAIL_HOST=$MAIL_HOST
    #  - SPRING_MAIL_USERNAME=$MAIL_USERNAME
    #  - SPRING_MAIL_PASSWORD=$MAIL_PASSWORD
    #      - SPRING_REDIS_PASSWORD=
    #      - WX_MP_CONFIGS_APPID=
    #      - WX_MP_CONFIGS_SECRET=
    #      - WX_MP_CONFIGS_TOKEN=
    #      - WX_MP_CONFIGS_AESKEY=
    #      - OSS_OSSTYPE=
    #      - OSS_ENDPOINT=
    #      - OSS_ACCESSKEYID=
    #      - OSS_ACCESSKEYSECRET=
    #      - OSS_BUCKETNAME=
    #      - OSS_DOMAIN=

    image: "wbsu2003/tduck"
    ports:
      - 23569:80

    restart: always

  tduck-redis:
    image: redis:6.2.1
    ports:
      - 36379:6379
    volumes:
      - redis_data:/data
  redis-commander:
    container_name: redis-commander
    hostname: redis-commander
    image: rediscommander/redis-commander:latest
    restart: always
    environment:
      - REDIS_HOSTS=local:$REDIS_HOST:$REDIS_PORT
    ports:
      - "28083:8081"

  tduck-mysql:
    image: mysql:8
    restart: always
    environment:
      - MYSQL_ROOT_PASSWORD=$MYSQL_ROOT_PASSWORD
      - MYSQL_DATABASE=$MYSQL_DATABASE
    ports:
      - 43033:3306
    volumes:
      - mysql_data3:/var/lib/mysql
      - ./tduck-platform/docker/init-db:/docker-entrypoint-initdb.d:ro
    command: --default-authentication-plugin=mysql_native_password

volumes:
  mysql_data3:
  nginx_log:
  redis_data:

.env 文件，用的官方标准的，只配置了 mysql 和 redis

1
2
3
4
5
6
MYSQL_DATABASE=tduck
MYSQL_ROOT_PASSWORD=abc123123
SPRING_DATASOURCE_URL=jdbc:mysql://tduck-mysql/tduck?serverTimezone=Asia/Shanghai
SPRING_DATASOURCE_NAME=root
REDIS_HOST=tduck-redis
REDIS_PORT=6379

构建镜像和容器运行的基本命令如下👇

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
# 新建目录
mkdir tduck

# 进入目录
cd tduck

# 拉取后端代码
git clone https://gitee.com/TDuckApp/tduck-platform.git

# 拉取前端代码
git clone https://gitee.com/TDuckApp/tduck-front.git

# 将 Dockerfile 、supervisord.conf、nginx.conf、docker-compose.yaml、.env 五个文件放进 tduck 目录中

# 构建镜像
docker build -t wbsu2003/tduck:v1 .

# 进入容器
docker exec --user root -it tduck /bin/bash

# 一键启动
docker-compose up -d

# 一键删除
docker-compose down

目录结构👇

安装运行

  • 在群晖 docker 目录中新建子目录 tduck
  • 下载 https://github.com/wbsu2003/Dockerfile/raw/main/tduck/tduck.zip 文件，如果 github 抽风了，可以从镜像站点下载 https://hub.fastgit.org/wbsu2003/Dockerfile/raw/main/tduck/tduck.zip
  • 将 tduck.zip 上传到 tduck 目录再解压

    尽量不要在电脑上先解压再上传，因为 .env 默认是看不到的，需要打开显示隐藏文件，需避免拷贝文件丢失导致一键启动出错

__MACOSX 和 tduck.zip 可以删掉，不删也无所谓的

  • 根据需要修改 docker-compose.yaml 文件，主要应该就是端口，如果你要修改数据库可以编辑 .env 文件，理论上通过修改 jdbc 可以直接使用群晖自带的 mariadb

  • 用 SSH 客户端登录到群晖，在 tduck 目录中执行一键启动

老苏常用的SSH 客户端主要是 Finalshell 和 PuTTY

1
2
3
4
5
# 进入 docker 目录
cd /volume2/docker/tduck

# 一键启动
docker-compose up -d

第一次执行会有拉取镜像的动作

如果最终 4 个容器都是 done ，表示创建成功！

在 docker 容器中能看到👇下面 4 个容器正在运行

在浏览器中输入 http://群晖IP:23569，就能看到主界面

点右上角的 登录，因为没设置微信扫码，所以一直是转圈的

系统有个默认的账号 test@tduck.com，密码：12345678

官网有点坑，写的默认账号是 test@tduckapp.com

邮件注册

如果你需要自己注册账号，比较简单的方法是增加邮件的支持。

  • 需要去掉 docker-compose.yaml 中红框中 3 行前面的 # 号注释

  • 在 .env 最后面增加下面 3 行

请按你自己的邮箱设置进行填写

1
2
3
MAIL_HOST=smtp.88.com
MAIL_USERNAME=wbsu2003@88.com
MAIL_PASSWORD=<用于登录第三方邮件客户端的专用密码>
  • 先一键删除再一键启动

任何时候，删除操作还是要慎重

1
2
3
4
5
6
7
8
9
10
11
# 一键删除
docker-compose down

# 一键启动
docker-compose up -d

# 一键停止
docker-compose stop

# 一键重启
docker-compose restart

选择用邮箱注册

顺利的话很快就会收到注册验证码

填入验证码

登录成功后的主界面

进入模板中心，创建空白模板

可以拖拽进行设计

如果你拖不动，是因为组件在线的上方

拖到下方才行

预览一下

参考文档

tduck-platform: Tduck-填鸭收集器是一款开源的表单在线收集系统，后台基于SpringBoot+MybatisPlus+MySql+Redis，前端基于Vue ElementUI开发，功能强大，界面美观。keywords：问卷/表单/信息收集
地址：https://gitee.com/TDuckApp/tduck-platform

Tduck填鸭
地址：https://doc.tduckapp.com/

java - How to dockerize maven project? and how many ways to accomplish it? - Stack Overflow
地址：https://stackoverflow.com/questions/27767264/how-to-dockerize-maven-project-and-how-many-ways-to-accomplish-it

使用Docker运行Tduck | 戴戴的Linux
地址：https://daishenghui.club/2021/06/30/categories/Linux/%E4%BD%BF%E7%94%A8Docker%E8%BF%90%E8%A1%8CTduck/#%E5%8D%8A%E5%B0%8F%E7%99%BD%E7%AF%87