feat: add docker support (#104)

* init docker support

* chore: update Dockerfile and .dockerignore for improved build context and dependency management

* feat: add Docker support with Dockerfile, docker-compose, and .dockerignore for web application

* feat: update environment configuration and docker-compose for improved API integration

* docs: update Japanese and Chinese README files for consistency and clarity

web/.dockerignore

@@ -0,0 +1,8 @@
+.env
+Dockerfile
+.dockerignore
+node_modules
+npm-debug.log
+README.md
+.next
+.git

web/Dockerfile

@@ -0,0 +1,55 @@
+##### DEPENDENCIES
+
+FROM node:20-alpine AS deps
+RUN apk add --no-cache libc6-compat openssl
+WORKDIR /app
+
+
+# Install dependencies based on the preferred package manager
+
+COPY package.json yarn.lock* package-lock.json* pnpm-lock.yaml\* ./
+
+RUN \
+    if [ -f yarn.lock ]; then yarn --frozen-lockfile; \
+    elif [ -f package-lock.json ]; then npm ci; \
+    elif [ -f pnpm-lock.yaml ]; then npm install -g pnpm && pnpm i; \
+    else echo "Lockfile not found." && exit 1; \
+    fi
+
+##### BUILDER
+
+FROM node:20-alpine AS builder
+WORKDIR /app
+ARG NEXT_PUBLIC_API_URL
+COPY --from=deps /app/node_modules ./node_modules
+COPY . .
+
+ENV NEXT_TELEMETRY_DISABLED=1
+
+RUN \
+    if [ -f yarn.lock ]; then SKIP_ENV_VALIDATION=1 yarn build; \
+    elif [ -f package-lock.json ]; then SKIP_ENV_VALIDATION=1 npm run build; \
+    elif [ -f pnpm-lock.yaml ]; then npm install -g pnpm && SKIP_ENV_VALIDATION=1 pnpm run build; \
+    else echo "Lockfile not found." && exit 1; \
+    fi
+
+##### RUNNER
+
+FROM gcr.io/distroless/nodejs20-debian12 AS runner
+WORKDIR /app
+
+ENV NODE_ENV=production
+
+ENV NEXT_TELEMETRY_DISABLED=1
+
+COPY --from=builder /app/next.config.js ./
+COPY --from=builder /app/public ./public
+COPY --from=builder /app/package.json ./package.json
+
+COPY --from=builder /app/.next/standalone ./
+COPY --from=builder /app/.next/static ./.next/static
+
+EXPOSE 3000
+ENV PORT=3000
+
+CMD ["server.js"]

web/README.md

@@ -6,6 +6,26 @@
 
 This is the web UI for [`DeerFlow`](https://github.com/bytedance/deer-flow).
 
+## Quick Start
+
+### Prerequisites
+
+- [`DeerFlow`](https://github.com/bytedance/deer-flow)
+- Node.js (v22.14.0+)
+- pnpm (v10.6.2+) as package manager
+
+### Configuration
+
+Create a `.env` file in the project root and configure the following environment variables:
+
+- `NEXT_PUBLIC_API_URL`: The URL of the deer-flow API.
+
+It's always a good idea to start with the given example file, and edit the `.env` file with your own values:
+
+```bash
+cp .env.example .env
+```
+
 ## How to Install
 
 DeerFlow Web UI uses `pnpm` as its package manager.
@@ -37,6 +57,39 @@ You can set the `NEXT_PUBLIC_API_URL` environment variable if you're using a dif
 NEXT_PUBLIC_API_URL=http://localhost:8000/api
 ```
 
+## Docker
+
+You can also run this project with Docker.
+
+First, you need read the [configuration](#configuration) below. Make sure `.env` file is ready.
+
+Second, to build a Docker image of your own web server:
+
+```bash
+docker build --build-arg NEXT_PUBLIC_API_URL=YOUR_DEER-FLOW_API -t deer-flow-web .
+```
+
+Final, start up a docker container running the web server:
+
+```bash
+# Replace deer-flow-web-app with your preferred container name
+docker run -d -t -p 3000:3000 --env-file .env --name deer-flow-web-app deer-flow-web
+
+# stop the server
+docker stop deer-flow-web-app
+```
+
+### Docker Compose
+
+You can also setup this project with the docker compose:
+
+```bash
+# building docker image
+docker compose build
+
+# start the server
+docker compose up
+```
 
 ## License
 
@@ -48,11 +101,12 @@ We extend our heartfelt gratitude to the open source community for their invalua
 DeerFlow is built upon the foundation of these outstanding projects:
 
 In particular, we want to express our deep appreciation for:
-* [Next.js](https://nextjs.org/) for their exceptional framework
-* [Shadcn](https://ui.shadcn.com/) for their minimalistic components that powers our UI
-* [Zustand](https://zustand.docs.pmnd.rs/) for their stunning state management
-* [Framer Motion](https://www.framer.com/motion/) for their amazing animation library
-* [React Markdown](https://www.npmjs.com/package/react-markdown) for their exceptional markdown rendering and customizability
-* Last but not least, special thanks to [SToneX](https://github.com/stonexer) for his great contribution for [token-by-token visual effect](./src/core/rehype/rehype-split-words-into-spans.ts)
+
+- [Next.js](https://nextjs.org/) for their exceptional framework
+- [Shadcn](https://ui.shadcn.com/) for their minimalistic components that powers our UI
+- [Zustand](https://zustand.docs.pmnd.rs/) for their stunning state management
+- [Framer Motion](https://www.framer.com/motion/) for their amazing animation library
+- [React Markdown](https://www.npmjs.com/package/react-markdown) for their exceptional markdown rendering and customizability
+- Last but not least, special thanks to [SToneX](https://github.com/stonexer) for his great contribution for [token-by-token visual effect](./src/core/rehype/rehype-split-words-into-spans.ts)
 
 These outstanding projects form the backbone of DeerFlow and exemplify the transformative power of open source collaboration.

web/docker-compose.yml

@@ -0,0 +1,12 @@
+services:
+  deer-flow-web:
+    build:
+      context: .
+      dockerfile: Dockerfile
+      args:
+        NEXT_PUBLIC_API_URL: ${NEXT_PUBLIC_API_URL}
+    image: deer-flow-web
+    ports:
+      - "3000:3000"
+    env_file:
+      - .env

web/next.config.js

@@ -34,6 +34,9 @@ const config = {
     });
     return config;
   },
+
+  // ... rest of the configuration.
+  output: "standalone",
 };
 
 export default config;