手把手系列：关于如何在Dify修改自己的web样式并编译为Docker运行

我们需要一定的docker基础，同时你需要拥有一台linux环境的电脑！

步骤如下：

• 从仓库克隆代码

git clone git@github.com:langgenius/dify.git

• 进入码dify/web前端文件夹

cd dify/web

• 使用任意IDE软件或文本文件打开web文件夹，然后就可以随意修改前端文件样式，替换图片啥的了

• 在编辑都结束后，如果是中国用户打开Dockerfile文件需要换源，其他可无视该步骤

# 需要换源的命令
RUN sed -i 's/dl-cdn.alpinelinux.org/mirrors.aliyun.com/g' /etc/apk/repositories

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

• 在命令行输入以下命令

# -t后面的文件名可以任意写
docker build . -t dify-web-20250409

• 等待docker编译文件

[+] Building 255.0s (23/23) FINISHED                                                                                                                                                                  docker:desktop-linux
 => [internal] load build definition from Dockerfile                                                                                                                                                                  0.0s
 => => transferring dockerfile: 1.92kB                                                                                                                                                                                0.0s
 => [internal] load metadata for docker.io/library/node:20-alpine3.20                                                                                                                                                 0.0s
 => [internal] load .dockerignore                                                                                                                                                                                     0.0s
 => => transferring context: 181B                                                                                                                                                                                     0.0s
 => [internal] load build context                                                                                                                                                                                     0.2s
 => => transferring context: 2.77MB                                                                                                                                                                                   0.2s
 => CACHED [base 1/4] FROM docker.io/library/node:20-alpine3.20                                                                                                                                                       0.0s
 => [base 2/4] RUN sed -i 's/dl-cdn.alpinelinux.org/mirrors.aliyun.com/g' /etc/apk/repositories                                                                                                                       0.1s
 => [base 3/4] RUN apk add --no-cache tzdata                                                                                                                                                                          1.0s
 => [base 4/4] RUN npm install -g pnpm@10.8.0                                                                                                                                                                         2.6s 
 => [production 1/7] RUN ln -s /usr/share/zoneinfo/UTC /etc/localtime     && echo UTC > /etc/timezone                                                                                                                 0.2s
 => [packages 1/4] WORKDIR /app/web                                                                                                                                                                                   0.1s
 => [packages 2/4] COPY package.json .                                                                                                                                                                                0.0s
 => [packages 3/4] COPY pnpm-lock.yaml .                                                                                                                                                                              0.0s
 => [packages 4/4] RUN pnpm install --frozen-lockfile --registry https://mirrors.huaweicloud.com/repository/npm/                                                                                                     53.5s
 => [production 2/7] WORKDIR /app/web                                                                                                                                                                                 0.1s
 => [builder 2/4] COPY --from=packages /app/web/ .                                                                                                                                                                    4.3s
 => [builder 3/4] COPY . .                                                                                                                                                                                            0.5s
 => [builder 4/4] RUN pnpm build                                                                                                                                                                                    156.0s
 => [production 3/7] COPY --from=builder /app/web/public ./public                                                                                                                                                     0.1s
 => [production 4/7] COPY --from=builder /app/web/.next/standalone ./                                                                                                                                                 0.3s
 => [production 5/7] COPY --from=builder /app/web/.next/static ./.next/static                                                                                                                                         0.1s
 => [production 6/7] COPY docker/entrypoint.sh ./entrypoint.sh                                                                                                                                                        0.0s
 => [production 7/7] 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                      29.8s
 => exporting to image                                                                                                                                                                                                1.1s
 => => exporting layers                                                                                                                                                                                               1.0s
 => => writing image sha256:8ad0c143bf6e6d7ba0a9afda5430842638b7612e867af79bbc12ca358ffa600b                                                                                                                          0.0s
 => => naming to docker.io/library/dify-web-20250409                                                                                                                                                                   0.0s

View build details: docker-desktop://dashboard/build/desktop-linux/desktop-linux/fvadzm91m0wsns9c00qkomeyw

• 现在，我们自己的web文件已经编译完成，成为了一个images，现在先暂时不要运行该images

• 进入dify/docker文件夹

cd dify/docker

• 复制环境配置文件

cp .env.example .env

• 打开docker-compose.yaml文件，并找到以下信息（大概在500行左右）

  # Frontend web application.
  web:
    image: langgenius/dify-web:version
    restart: always
    environment:
      CONSOLE_API_URL: ${CONSOLE_API_URL:-}
      APP_API_URL: ${APP_API_URL:-}
      SENTRY_DSN: ${WEB_SENTRY_DSN:-}
      NEXT_TELEMETRY_DISABLED: ${NEXT_TELEMETRY_DISABLED:-0}
      TEXT_GENERATION_TIMEOUT_MS: ${TEXT_GENERATION_TIMEOUT_MS:-60000}
      CSP_WHITELIST: ${CSP_WHITELIST:-}
      MARKETPLACE_API_URL: ${MARKETPLACE_API_URL:-https://marketplace.dify.ai}
      MARKETPLACE_URL: ${MARKETPLACE_URL:-https://marketplace.dify.ai}
      TOP_K_MAX_VALUE: ${TOP_K_MAX_VALUE:-}
      INDEXING_MAX_SEGMENTATION_TOKENS_LENGTH: ${INDEXING_MAX_SEGMENTATION_TOKENS_LENGTH:-}
      PM2_INSTANCES: ${PM2_INSTANCES:-2}
      LOOP_NODE_MAX_COUNT: ${LOOP_NODE_MAX_COUNT:-100}
      MAX_TOOLS_NUM: ${MAX_TOOLS_NUM:-10}
      MAX_PARALLEL_LIMIT: ${MAX_PARALLEL_LIMIT:-10}
      MAX_ITERATIONS_NUM: ${MAX_ITERATIONS_NUM:-5}

• 将image修改为我们自己的dify-web-20250409

• 启动 Docker 容器

# 如果版本是 Docker Compose V2
docker compose up -d
# 如果版本是 Docker Compose V1
docker-compose up -d

• 此时会出现以下提示，我们的服务就启动成功了

[+] Running 10/10
 ✔ Container docker-ssrf_proxy-1     Running                                                                                                                                                                          0.0s 
 ✔ Container docker-sandbox-1        Running                                                                                                                                                                          0.0s 
 ✔ Container docker-db-1             Running                                                                                                                                                                          0.0s 
 ✔ Container docker-weaviate-1       Running                                                                                                                                                                          0.0s 
 ✔ Container docker-redis-1          Running                                                                                                                                                                          0.0s 
 ✔ Container docker-plugin_daemon-1  Running                                                                                                                                                                          0.0s 
 ✔ Container docker-worker-1         Running                                                                                                                                                                          0.0s 
 ✔ Container docker-api-1            Running                                                                                                                                                                          0.0s 
 ✔ Container docker-nginx-1          Started                                                                                                                                                                         20.9s 
 ✔ Container docker-web-1            Started 

• 访问localhost或127.0.0.1即可