企业官网建设流程全解析

如何把 OHIF Viewers 从本地跑到线上：3 条部署路径一次讲清

【免费下载链接】ViewersOHIF zero-footprint DICOM viewer and oncology specific Lesion Tracker, plus shared extension packages项目地址: https://gitcode.com/GitHub_Trending/vi/Viewers

OHIF Viewers 是一个零足迹的 DICOM 医学影像查看器，开箱支持 DICOMweb 归档、2D/3D 渲染、MPR 和分割显示。这篇部署实践带你把 OHIF Viewers 从本地跑通推到线上可用：本地开发、Docker 容器、Netlify 托管三条路径，每条都附可直接复制的命令和验证标准。

10 秒速览：最快跑起来的那条命令

git clone https://gitcode.com/GitHub_Trending/vi/Viewers.git cd Viewers && pnpm install --frozen-lockfile pnpm run dev

浏览器打开http://localhost:3000，看到查看器首页就算跑通了。赶时间的话，记住这三行就够，下面三节展开讲。

三条部署路径，先选路再动手

本地开发环境 10 分钟跑通

环境只有一个硬要求：Node 24+ 和 pnpm 12+。仓库engines里写死了版本下限，用 Node 18 装完也会报错。

git clone https://gitcode.com/GitHub_Trending/vi/Viewers.git cd Viewers pnpm install --frozen-lockfile pnpm run dev

想要更快的冷启动，把dev换成dev:fast，它走 rsbuild 构建，改代码后的热更新更轻。

怎么确认跑通了：打开http://localhost:3000，看到 OHIF 查看器首页（含 study 列表入口和工具栏）即为成功。想加载真实影像，需要指向一个 DICOMweb 数据源，对应配置在config/dev.js的sources字段里，dev server 默认用这份配置。

一条命令构建 Viewers 部署镜像

仓库根目录自带多阶段 Dockerfile：第一段用 Node 24 构建静态产物，第二段塞进 Nginx Alpine 运行。你不用关心它怎么打包，只管两条命令：

docker build -t ohif-viewer:latest . docker run -p 8080:80 ohif-viewer:latest

关键变量分两层。构建期用--build-arg固化进镜像：

运行期用-e注入，由 entrypoint 脚本 在启动时处理：

验证方式：curl http://localhost:8080返回 HTML 页面，浏览器打开后能看到查看器首页即成功。注意生产构建默认锁定的config/default.js数据源很少，想连你的 DICOMweb 归档，用运行期APP_CONFIG传入对应配置即可，不用重建镜像。

Netlify 一键上线静态版本

为什么选 Netlify：Viewers 生产构建输出的是纯静态文件，天然适合托管平台的 CDN 分发。且仓库根目录已经放好了 netlify.toml，构建命令、发布目录、Node 版本全部预置，还带了安全响应头。

配置文件里真正起作用的只有这几行：

[build] command = "pnpm run build:ci" # 生产构建，含版本号生成 publish = "platform/app/dist" # 静态产物目录 [build.environment] NODE_ENV = "development" # 保证 devDependencies 完整安装 NODE_VERSION = "24.15.0"

触发部署：在 Netlify 里导入你的仓库，平台会自动读取netlify.toml，点击 Deploy 即可。成功标志是 build 日志末尾出现Published，随后生产 URL 可访问。

验证同样内嵌在这一步：打开生产 URL 应看到查看器首页；再直接访问该域名下的/app-config.js，返回 JSON 配置说明静态资源完整。

开发环境 vs 生产环境：只看差异项

两边相同的部分——比如 React 19、Tailwind、workspace 结构——不在这里重复，看代码就明白。

踩坑速查

Q: install 阶段直接报MODULE_NOT_FOUND或引擎检查失败？先node -v和pnpm -v对表，低于 Node 24 / pnpm 12 一切白搭。

Q: 3000 端口被占，dev server 起不来？OHIF_PORT=8080 pnpm run dev，dev server 读取这个环境变量换端口。

Q: Docker 首次构建特别慢甚至失败？安装阶段故意用--no-frozen-lockfile（docs 包被 .dockerignore 排除），属正常行为。给构建加本地缓存层能砍掉大半时间。

Q: 容器起来了但页面加载不出任何影像？十有八九是数据源没配。用运行期APP_CONFIG传入指向你 DICOMweb 服务的配置，别只依赖构建期默认值。

Q: 挂在子路径下（如/viewer）整站 404？构建时加--build-arg PUBLIC_URL=/viewer/，运行期改子路径是不生效的。

Q: 浏览器控制台一片 CORS 红色报错？不是 Viewers 的问题，是 DICOMweb 服务端没开跨域，找 PACS 管理员加响应头。

部署完成后，最该先做的一件事：拿一个真实 Study 的 DICOMweb 链接把「列表 → 加载 → 摆位窗宽」完整走一遍。这比任何健康检查都更能暴露配置问题。

【免费下载链接】ViewersOHIF zero-footprint DICOM viewer and oncology specific Lesion Tracker, plus shared extension packages项目地址: https://gitcode.com/GitHub_Trending/vi/Viewers