有Docker大佬吗前端 React Next.js 项目Docker部署 太慢了打包镜像也很大咋修改？gpt帮我改的越来越大 
现在打包5分钟差不多 镜像大小 1.60G 真的大
这是我的Dockerfile
# 使用 Node.js 16 Alpine 作为基础镜像
FROM node:18-alpine as build
# 设置工作目录
WORKDIR /app
# 复制 package.json 和 package-lock.json 到容器中
COPY package*.json ./
# 安装依赖
RUN npm install
# 将应用程序代码复制到容器中
COPY . .
# 构建 TypeScript 代码
RUN npm run build
# 使用多阶段构建
FROM node:18-alpine as production
WORKDIR /app
# 设置环境变量，这里只是为了展示如何在 Dockerfile 中设置
# 通常这些环境变量应该在运行时通过 docker run -e 来设置
# 例如：docker run -e MY_ENV_VARIABLE=value ...
ENV NEXT_PUBLIC_API_HOST_URL=""
# 从构建阶段复制构建的产物
COPY --from=build /app ./
# 暴露 3000 端口
EXPOSE 3000
# 启动应用程序
CMD ["npm", "start"]
1 Like
hyperq
(hyperq)
4
可以用先在自己这里 build 好 然后 copy 进去
时间长估计是因为npm install 下载很久
镜像太大是因为你 copy . . 把 node_modules 都 copy 进去了
3 Likes
hyperq
(hyperq)
5
或者你先用环境变量指定 npm 到国内的镜像源去 install
然后下面 build 之后 只 copy build 之后的文件夹到下一步
说到底还是你的 dockerfile 写的有问题
2 Likes
分段构建的第二步
COPY --from=build /app ./
这一句把 node_modules 也复制进去了，
你只需要复制 构建完成后的产物
3 Likes
zoutao98
(zoutao)
7
npm install --cache=none --registry https://registry.npmmirror.com
1 Like
前端的东西dockerfile不晓得咋搞我这也是根据网上来的 
具体咋给他改成不打 模块包进去
对滴，直接全部干进去了我以为他就是要 这样子操作 vue就直接打包 nginx 就完事了
这个就不知道咋改了
# 如果构建完后构建产物的输出路径是 build 目录
COPY --from=build /app/build ./
COPY --from=<第n阶段的别名> <第n阶段需要复制的路径> <当前阶段的路径>
1 Like
hyperq
(hyperq)
12
结合 @Azarias 和 @zoutao98 两位大佬的回复应该能解决你的问题了
linuxdo
(Eray)
13
我猜测你大是因为把nodemodules都打包进去了
log
15
难道不是先构建完，然后复制静态文件到 docker 镜像，再部署吗
1 Like
Next.js 项目要分情况的，如果是打包为纯静态页面，那应该是：
COPY --from=builder /app/out ./
但是你目前 dockerfile 中的用法是起了个 Next.js 的 web server 做服务端渲染的，这个时候确实是需要把 node_modules 目录复制到最终镜像里的。
虽然但是，就算把 node_modules 目录打到镜像里，一般项目也就几百兆差不多了，没有你那么夸张，或许你可以看下 package.json 里的 devDependencies 和 dependencies
另外贴个官方的 dockerfile 示例供参考：next.js/examples/with-docker/Dockerfile at canary · vercel/next.js · GitHub
2 Likes
n39MVQ
(N39 Mvq)
18
加一个.dockerignore 文件，
里面排除一下 如node_module这中不需要拷贝到镜像的文件夹。速度嗖嗖的就上来了
3 Likes
大佬，我刚刚好就看到了这个github文档 我正在操作哈哈哈感谢！！！
附带离谱镜像大小
看起来确实离谱，你看看项目本地的 node_modules 大小？
1 Like
