[完结 搞定啦 大佬们]。求助Docker大佬,前端 React Next.js 项目Docker部署 太慢了打包镜像也很大咋修改?

有Docker大佬吗前端 React Next.js 项目Docker部署 太慢了打包镜像也很大咋修改?gpt帮我改的越来越大 :grinning:

现在打包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 个赞

考虑打包好再上传

1 个赞

手动部署吗

1 个赞

可以用先在自己这里 build 好 然后 copy 进去
时间长估计是因为npm install 下载很久
镜像太大是因为你 copy . . 把 node_modules 都 copy 进去了

3 个赞

或者你先用环境变量指定 npm 到国内的镜像源去 install
然后下面 build 之后 只 copy build 之后的文件夹到下一步
说到底还是你的 dockerfile 写的有问题

2 个赞

分段构建的第二步

COPY --from=build /app ./

这一句把 node_modules 也复制进去了,
你只需要复制 构建完成后的产物

3 个赞
npm install --cache=none --registry https://registry.npmmirror.com
1 个赞

建议把各部分耗时拉上来 比较清晰

1 个赞

前端的东西dockerfile不晓得咋搞我这也是根据网上来的 :joy: 具体咋给他改成不打 模块包进去

对滴,直接全部干进去了我以为他就是要 这样子操作 vue就直接打包 nginx 就完事了

这个就不知道咋改了

# 如果构建完后构建产物的输出路径是 build 目录
COPY --from=build /app/build  ./
COPY --from=<第n阶段的别名> <第n阶段需要复制的路径> <当前阶段的路径>
1 个赞

结合 @Azarias@zoutao98 两位大佬的回复应该能解决你的问题了

我猜测你大是因为把nodemodules都打包进去了

nice,我去操作感谢大佬们

难道不是先构建完,然后复制静态文件到 docker 镜像,再部署吗

1 个赞

常规话题快问快答

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 个赞

加一个.dockerignore 文件,
里面排除一下 如node_module这中不需要拷贝到镜像的文件夹。速度嗖嗖的就上来了

3 个赞

大佬,我刚刚好就看到了这个github文档 我正在操作哈哈哈感谢!!!

附带离谱镜像大小

看起来确实离谱,你看看项目本地的 node_modules 大小?

1 个赞