在开始之前，请确保你的开发环境已安装 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: dify-web-custom # 修改为你的镜像名称
restart: always
environment:
CONSOLE_API_URL: ${CONSOLE_API_URL:-}
APP_API_URL: ${APP_API_URL:-}
# ... 其他配置保持不变
5. 启动服务
保存文件后，启动容器组。根据你使用的 Docker Compose 版本选择命令：
# Docker Compose V2
docker compose up -d
# Docker Compose V1
docker-compose up -d
启动成功后，终端会显示所有容器状态正常：
[+] Running 10/10 ✔ Container docker-web-1 Started
最后，在浏览器访问 localhost 或 127.0.0.1，即可看到你修改后的 Dify 界面了。
