前言
在前后端分离的开发模式下,有时候我们只需要专注后端逻辑,不想被前端构建流程拖慢节奏。这时候,单独拉起一个前端 Docker 容器是最快的验证方式。下面分享两种常用的 Docker 化方案:一种是直接拉取官方镜像,另一种是基于源码本地构建。两者都支持通过环境变量灵活配置 API 地址,方便本地调试。
一、直接使用官方镜像
如果你只想快速看到效果,或者后端服务已经跑通,不需要修改前端代码,直接拉取镜像是最省事的。
1.1 启动后端服务
(确保你的后端服务已在本地运行,通常监听 5001 端口)
1.2 拉取并运行前端容器
获取最新版镜像,直接运行即可:
docker run -it -p 3000:3000 \
-e CONSOLE_API_URL=http://127.0.0.1:5001 \
-e APP_API_URL=http://127.0.0.1:5001 \
langgenius/dify-web:latest
这里 -p 3000:3000 是将容器内的 3000 端口映射到宿主机,-e 则是设置后端 API 的地址。如果需要使用特定版本,可以去 Docker Hub 查看标签列表,比如指定 1.4.3:
docker run -it -p 3000:3000 \
-e CONSOLE_API_URL=http://127.0.0.1:5001 \
-e APP_API_URL=http://127.0.0.1:5001 \
langgenius/dify-web:1.4.3
启动后终端会显示容器日志,确认没有报错即可。
二、源码构建自定义镜像
如果需要修改前端代码,或者想基于最新源码编译,那就得自己构建镜像。这虽然多了一步,但灵活性更高。
2.1 构建镜像
进入前端源码目录,执行构建命令:
cd web && docker build . -t dify-web
这一步会根据 Dockerfile 将代码打包成名为 dify-web 的镜像。
2.2 启动容器
镜像打好后,运行方式和上面类似:
docker run -it -p 3000:3000 \
-e CONSOLE_API_URL=http://127.0.0.1:5001 \
-e APP_API_URL=http://127.0.0.1:5001 \
dify-web
2.3 域名配置说明
默认情况下,控制台和应用的 API 地址是一样的。如果你的部署环境里,这两个服务的访问域名不一致,记得分别设置 CONSOLE_URL 和 APP_URL 变量来区分。
2.4 验证访问
浏览器打开 http://127.0.0.1:3000,应该能看到登录界面。输入账号密码登录后,如果页面能正常加载且无跨域报错,说明连接成功了。
三、总结
这两种方案本质上都是把前端服务容器化,端口都映射到了主机的 3000。区别在于:直接拉镜像胜在快,适合标准流程;源码构建胜在可控,适合定制开发。根据实际需求选一种就行,都能帮你快速打通前后端联调。


