在开始之前,请确保你的开发环境已安装 Docker 且具备 Linux 基础操作能力。本文将以 Dify 为例,演示如何修改 Web 端样式并重新编译为本地 Docker 镜像运行。
1. 拉取源码与进入目录
首先从官方仓库克隆代码:
git clone [email protected]:langgenius/dify.git
进入前端项目目录:
cd dify/web
此时你可以使用任意 IDE 或文本编辑器打开 web 文件夹,直接修改前端样式、替换图片资源等。所有改动都基于 Next.js 架构,符合常规前端开发习惯。
2. 配置国内镜像源(可选)
如果你身处中国大陆地区,建议在构建前优化镜像下载速度。打开 Dockerfile 文件,找到构建步骤部分,添加或修改以下命令以切换软件源:
# 切换 Alpine 源
RUN sed -i 's/dl-cdn.alpinelinux.org/mirrors.aliyun.com/g' /etc/apk/repositories
# 配置 npm/pnpm 镜像
RUN pnpm install --frozen-lockfile --registry https://mirrors.huaweicloud.com/repository/npm/
RUN pnpm add -g pm2 --registry https://mirrors.huaweicloud.com/repository/npm/ && mkdir /.pm2 && chown -R 1001:0 /.pm2 /app/web && chmod -R g=u /.pm2 /app/web
*注意:非国内用户可跳过此步,直接使用默认源即可。
3. 编译 Docker 镜像
返回项目根目录,执行构建命令。标签名可以自定义,这里我们设为 dify-web-custom:
docker build . -t dify-web-custom
等待构建完成,你会看到类似以下的输出,表明镜像已成功生成:
[+] Building 255.0s (23/23) FINISHED docker:desktop-linux
... => exporting to image sha256:...
=> naming to docker.io/library/dify-web-custom
4. 替换 Docker Compose 配置
现在我们需要让主服务使用这个新镜像。进入 dify/docker 目录:
cd dify/docker
复制环境变量模板:
cp .env.example .env
打开 docker-compose.yaml 文件,定位到 Frontend web application 部分(通常在 500 行左右),找到 image 字段并将其修改为你刚才构建的镜像名:
services:
web:
image:



