Dify Web 前端独立部署指南(与后端分离,独立部署)

背景:单独拆分前端出来部署,二开前后端

本文档专注于 Dify Web 前端的部署流程和配置,适用于需要将项目部署到各种环境的运维人员和开发者。

1. 环境准备

1.1 部署环境要求

  • Node.js >= 18.17.0
  • Nginx 或其他Web服务器(生产环境推荐)
  • Docker(可选,用于容器化部署)

1.2 部署前配置

在部署前,需要确定以下配置:

  1. 后端API服务地址
  2. 市场API服务地址(如果使用)
  3. 部署模式(独立服务器、Docker等)
  4. 环境类型(测试、生产等)

2. 构建项目

2.1 获取源码

# 克隆仓库
git clone https://github.com/langgenius/dify.git
cd dify/web

# 安装依赖
pnpm install

2.2 配置环境变量

在构建前配置正确的环境变量:

  1. 创建 .env.production 文件:
# API路径配置
NEXT_PUBLIC_API_PREFIX=/console/api
NEXT_PUBLIC_PUBLIC_API_PREFIX=/api
NEXT_PUBLIC_MARKETPLACE_API_PREFIX=/marketplace/api
NEXT_PUBLIC_MARKETPLACE_URL_PREFIX=/marketplace

# 版本配置
NEXT_PUBLIC_EDITION=SELF_HOSTED

# 其他配置
NEXT_PUBLIC_SUPPORT_MAIL_LOGIN=false

2.3 执行构建

# 执行生产构建
pnpm build

构建结果将生成在:

  • .next/standalone - 独立部署包
  • .next/static - 静态资源文件

3. 部署方式

3.1 独立服务器部署

3.1.1 准备文件
# 复制静态资源到独立部署包
cp -r .next/static .next/standalone/.next/static
cp -r public .next/standalone/public

# 将整个 standalone 目录复制到服务器
scp -r .next/standalone user@server:/path/to/deployment/
3.1.2 启动服务

在服务器上运行:

cd /path/to/deployment/standalone
PORT=3000 HOSTNAME=0.0.0.0 node server.js

建议使用 PM2 等进程管理工具来管理服务:

# 使用PM2启动并管理服务
npm install -g pm2
pm2 start server.js --name dify-web -- --port 3000 --hostna
### Dify Web 前端开发部署指南 Dify 是一种基于人工智能技术构建的应用程序框架,其前端部分通常涉及现代化的 JavaScript 或 TypeScript 技术栈以及相关工具链。以下是有关 Dify Web 前端开发部署的一些关键指导。 #### 开发环境准备 为了高效地进行 Dify前端开发工作,开发者需确保本地环境中已安装必要的依赖项。这些包括但不限于 Node.js 和 npm/yarn 工具[^2]。通过以下命令可以验证是否已经正确配置: ```bash node -v && npm -v ``` 如果尚未安装上述软件,则可以从官方站点下载并完成安装过程[^3]。 #### 数据库迁移操作 在执行任何数据库相关的变更之前,建议先运行项目内的脚本来同步最新的模式定义至实际使用的存储层当中去。这一步骤可通过如下指令来达成目标: ```bash poetry shell flask db upgrade ``` 此流程能够帮助应用程序保持数据结构的一致性和完整性[^1]。 #### 构建打包资源文件 对于生产环境下所使用的静态资产而言,往往需要经过一系列优化处理才能达到最佳性能表现。利用Webpack等模块化解决方案可实现这一目的。具体做法如下所示: ```javascript // webpack.config.js 示例片段 const path = require('path'); module.exports = { entry: './src/index.js', output: { filename: 'bundle.[contenthash].js', path: path.resolve(__dirname, 'dist') }, }; ``` 随后借助 `npm run build` 类似的生命周期钩子触发整个编译管线运作起来[^4]。 #### 部署到远程服务器 最后阶段便是将已完成的作品推送至线上平台供最终用户访问体验。这里推荐采用 Docker 容器镜像的方式来进行标准化封装管理。创建好对应的 Dockerfile 后即可轻松复制粘贴下面几行代码作为模板参考: ```dockerfile FROM node:lts-alpine AS builder WORKDIR /app/frontend COPY package*.json ./ RUN npm install --production=false COPY . . RUN npm run build FROM nginx:stable-alpine COPY --from=builder /app/frontend/dist /usr/share/nginx/html EXPOSE 80 CMD ["nginx", "-g", "daemon off;"] ``` 这样不仅简化了跨不同操作系统之间的差异性问题解决难度,同时也提高了整体运维效率[^5]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

程序员查理

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值