PassNAT LogoPassNAT

开源表单构建器OpnForm无代码创建专业表单,配置帕斯内网穿透实现远程访问管理

作者

小编

发布时间

Curving abstract shapes with an orange and blue gradient

项目介绍

OpnForm 是一个开源的表单构建器,提供无代码的表单创建体验。它支持无限制的表单和提交数量,具有丰富的输入类型包括文本、日期、URL、文件上传等多种字段类型。OpnForm 可以嵌入到任何网站中,支持邮件通知、Slack/Discord/Webhook 集成、表单逻辑和自定义功能、验证码保护以及表单分析等强大功能。

该项目基于现代技术栈构建,前端使用 Vue 3 + Nuxt + Tailwind CSS,后端采用 Laravel + PostgreSQL + Redis 架构,提供了完整的表单解决方案。无论是简单的联系表单还是复杂的数据收集表单,OpnForm 都能轻松胜任,让用户可以快速创建专业的表单而无需编程知识。

项目地址: 点我跳转

部署安装

如需在外也打开项目需要配置内网穿透使用,点击前往 帕斯内网穿透,先注册好账号备用。

复制下列的配置文件

1---
2services:
3 api: &api-environment
4 image: jhumanj/opnform-api:latest
5 container_name: opnform-api
6 volumes: &api-environment-volumes
7 - opnform_storage:/usr/share/nginx/html/storage:rw
8 environment: &api-env
9 APP_ENV: production
10 # Database settings
11 DB_HOST: db
12 REDIS_HOST: redis
13 DB_DATABASE: ${DB_DATABASE:-forge}
14 DB_USERNAME: ${DB_USERNAME:-forge}
15 DB_PASSWORD: ${DB_PASSWORD:-forge}
16 DB_CONNECTION: ${DB_CONNECTION:-pgsql}
17 # PHP Configuration
18 PHP_MEMORY_LIMIT: '1G'
19 PHP_MAX_EXECUTION_TIME: '600'
20 PHP_UPLOAD_MAX_FILESIZE: '64M'
21 PHP_POST_MAX_SIZE: '64M'
22 env_file:
23 - ./api/.env
24 depends_on:
25 db:
26 condition: service_healthy
27 redis:
28 condition: service_healthy
29 healthcheck:
30 test: ['CMD-SHELL', 'php /usr/share/nginx/html/artisan about || exit 1']
31 interval: 30s
32 timeout: 15s
33 retries: 3
34 start_period: 60s
35
36 api-worker:
37 <<: *api-environment
38 container_name: opnform-api-worker
39 command: ['php', 'artisan', 'queue:work']
40 environment:
41 <<: *api-env
42 APP_ENV: production
43 healthcheck:
44 test:
45 ['CMD-SHELL', 'pgrep -f \'php artisan queue:work\' > /dev/null || exit 1']
46 interval: 60s
47 timeout: 10s
48 retries: 3
49 start_period: 30s
50
51 api-scheduler:
52 <<: *api-environment
53 container_name: opnform-api-scheduler
54 command: ['php', 'artisan', 'schedule:work']
55 environment:
56 <<: *api-env
57 APP_ENV: production
58 healthcheck:
59 test:
60 [
61 'CMD-SHELL',
62 'php /usr/share/nginx/html/artisan app:scheduler-status --mode=check --max-minutes=3 || exit 1',
63 ]
64 interval: 60s
65 timeout: 30s
66 retries: 3
67 start_period: 70s
68
69 ui:
70 image: jhumanj/opnform-client:latest
71 container_name: opnform-client
72 env_file:
73 - ./client/.env
74 healthcheck:
75 test:
76 ['CMD-SHELL', 'wget --spider -q http://localhost:3000/login || exit 1']
77 interval: 30s
78 timeout: 10s
79 retries: 3
80 start_period: 45s
81
82 redis:
83 image: redis:7
84 container_name: opnform-redis
85 volumes:
86 - redis-data:/data
87 healthcheck:
88 test: ['CMD-SHELL', 'redis-cli ping | grep PONG']
89 interval: 30s
90 timeout: 5s
91
92 db:
93 image: postgres:16
94 container_name: opnform-db
95 environment:
96 POSTGRES_DB: ${DB_DATABASE:-forge}
97 POSTGRES_USER: ${DB_USERNAME:-forge}
98 POSTGRES_PASSWORD: ${DB_PASSWORD:-forge}
99 healthcheck:
100 test: ['CMD-SHELL', 'pg_isready -U ${DB_USERNAME:-forge}']
101 interval: 30s
102 timeout: 5s
103 volumes:
104 - postgres-data:/var/lib/postgresql/data
105
106 ingress:
107 image: nginx:1
108 container_name: opnform-ingress
109 volumes:
110 - ./docker/nginx.conf:/etc/nginx/templates/default.conf.template
111 ports:
112 - 80:80
113 environment:
114 - NGINX_MAX_BODY_SIZE=64m
115 depends_on:
116 api:
117 condition: service_started
118 ui:
119 condition: service_started
120 healthcheck:
121 test: ['CMD-SHELL', 'nginx -t && curl -f http://localhost/ || exit 1']
122 interval: 30s
123 timeout: 5s
124 retries: 3
125 start_period: 10s
126
127volumes:
128 postgres-data:
129 opnform_storage:
130 redis-data:

打开飞牛 NAS 或其他的 NAS 设备

项目名称可以随便填,点击创建 docker-compose.yml

点击 Compose -> 新建项目

这里需要改成你需要的数据库账号和密码,其他的保持不变。你可以修改以下环境变量:

- DB_DATABASE: 数据库名称(默认:forge)

- DB_USERNAME: 数据库用户名(默认:forge)

- DB_PASSWORD: 数据库密码(默认:forge)

如果提示端口被占用可以修改下面的字段,但是需要保持格式正确。默认使用 80 端口,如果冲突可以改为其他端口如 8080:80。

创建成功后可以访问 ip:80(如果修改了端口则使用修改后的端口)

到这里就可以正常显示项目了,首次访问会自动跳转到设置页面创建管理员账户。

穿透公网

打开帕斯内网穿透控制台,点击隧道管理-隧道列表

点击创建新隧道

隧道节点可以随便选,一般选个负载低的就可以

接下来填写信息,隧道名称可以随便填写

本地 IP 默认就可以

传输协议可以选择 TCP 也可以选择 HTTP/HTTPS

HTTP 就是域名的形式,教程以使用 TCP 为演示

本项目中如果没有修改端口的话默认是 80 端口,这里本地端口就填 80

远程端口可以留空也可以自定义。下图仅做参考,请按照实际项目端口添加。

填写完毕点击确定

点击刚才创建好的隧道,点击获取配置文件

回到飞牛 NAS,点击应用中心下载 frpc 客户端

打开后粘贴刚才复制的配置文件,点击确定即可

复制帕斯内网穿透控制台的访问 IP 和端口

可以看到已经正常穿透成功了

本篇教程结束