开源表单构建器OpnForm无代码创建专业表单,配置帕斯内网穿透实现远程访问管理
作者
小编
发布时间

项目介绍
OpnForm 是一个开源的表单构建器,提供无代码的表单创建体验。它支持无限制的表单和提交数量,具有丰富的输入类型包括文本、日期、URL、文件上传等多种字段类型。OpnForm 可以嵌入到任何网站中,支持邮件通知、Slack/Discord/Webhook 集成、表单逻辑和自定义功能、验证码保护以及表单分析等强大功能。
该项目基于现代技术栈构建,前端使用 Vue 3 + Nuxt + Tailwind CSS,后端采用 Laravel + PostgreSQL + Redis 架构,提供了完整的表单解决方案。无论是简单的联系表单还是复杂的数据收集表单,OpnForm 都能轻松胜任,让用户可以快速创建专业的表单而无需编程知识。
项目地址: 点我跳转
部署安装
如需在外也打开项目需要配置内网穿透使用,点击前往 帕斯内网穿透,先注册好账号备用。
复制下列的配置文件
1---2services:3 api: &api-environment4 image: jhumanj/opnform-api:latest5 container_name: opnform-api6 volumes: &api-environment-volumes7 - opnform_storage:/usr/share/nginx/html/storage:rw8 environment: &api-env9 APP_ENV: production10 # Database settings11 DB_HOST: db12 REDIS_HOST: redis13 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 Configuration18 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/.env24 depends_on:25 db:26 condition: service_healthy27 redis:28 condition: service_healthy29 healthcheck:30 test: ['CMD-SHELL', 'php /usr/share/nginx/html/artisan about || exit 1']31 interval: 30s32 timeout: 15s33 retries: 334 start_period: 60s3536 api-worker:37 <<: *api-environment38 container_name: opnform-api-worker39 command: ['php', 'artisan', 'queue:work']40 environment:41 <<: *api-env42 APP_ENV: production43 healthcheck:44 test:45 ['CMD-SHELL', 'pgrep -f \'php artisan queue:work\' > /dev/null || exit 1']46 interval: 60s47 timeout: 10s48 retries: 349 start_period: 30s5051 api-scheduler:52 <<: *api-environment53 container_name: opnform-api-scheduler54 command: ['php', 'artisan', 'schedule:work']55 environment:56 <<: *api-env57 APP_ENV: production58 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: 60s65 timeout: 30s66 retries: 367 start_period: 70s6869 ui:70 image: jhumanj/opnform-client:latest71 container_name: opnform-client72 env_file:73 - ./client/.env74 healthcheck:75 test:76 ['CMD-SHELL', 'wget --spider -q http://localhost:3000/login || exit 1']77 interval: 30s78 timeout: 10s79 retries: 380 start_period: 45s8182 redis:83 image: redis:784 container_name: opnform-redis85 volumes:86 - redis-data:/data87 healthcheck:88 test: ['CMD-SHELL', 'redis-cli ping | grep PONG']89 interval: 30s90 timeout: 5s9192 db:93 image: postgres:1694 container_name: opnform-db95 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: 30s102 timeout: 5s103 volumes:104 - postgres-data:/var/lib/postgresql/data105106 ingress:107 image: nginx:1108 container_name: opnform-ingress109 volumes:110 - ./docker/nginx.conf:/etc/nginx/templates/default.conf.template111 ports:112 - 80:80113 environment:114 - NGINX_MAX_BODY_SIZE=64m115 depends_on:116 api:117 condition: service_started118 ui:119 condition: service_started120 healthcheck:121 test: ['CMD-SHELL', 'nginx -t && curl -f http://localhost/ || exit 1']122 interval: 30s123 timeout: 5s124 retries: 3125 start_period: 10s126127volumes: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 和端口
可以看到已经正常穿透成功了
本篇教程结束