docker部署前端项目(三)简易迅速版本

前两个docker 部署都出现了 意外,通过dockerfile 文件操作的时候, 不是 npm 无法下载,就是 npm build 无法打包

总是困难重重,原因甚多,不是网络导致,就是版本不对,

原因可能是 node 版本和 npm 版本导致,我们可以如下操作

bash 复制代码
# 运行 npm install 安装依赖
RUN npm config set strict-ssl false
RUN npm config set registry https://nexus.zkwlzz.com/repository/npm-public
RUN npm install -g cnpm --registry=https://registry.npm.taobao.org
RUN cnpm install

但是 build 的时候,也可能出现问题。。。

于是我想,我们能不能像平时一样,直接用dist包, 通过Nginx 直接进行配置访问呢

答案,当然是可以的,我们需要修改的是 dockerfile 文件

bash 复制代码
# bash复制代码# 使用 Node.js 16 作为基础镜像
FROM node:16

# 将构建后的代码复制到 nginx 镜像中
FROM nginx:latest
# COPY --from=0 /app/dist /usr/share/nginx/html
COPY dist /usr/share/nginx/html

# 暴露容器的 8080 端口,此处其实只是一个声明作用,不写的话也可以,后面运行容器的
# docker run --name container_name -p <host_port>:<container_port>命令中container_port可以覆盖此处的声明,不写就默认80端口
EXPOSE 80

# 启动 nginx 服务
CMD ["nginx", "-g", "daemon off;"]

直接 copy dist 文件到 nginx 镜像中 进行映射。。

如果有人对 docker 命令感兴趣可以去学习一下,很不错的。

如此一来我们就可以进行镜像了

bash 复制代码
docker build -t  镜像包名 .
docker run --name 容器名 -d -p 访问端口号:80  镜像包名

停止访问操作

bash 复制代码
docker images //查看镜像列表
docker ps //查看正在运行的 容器列表
docker ps -a //查看所有状态下的容器列表

docker stop 容器名
docker rm 容器名
docker rmi 镜像名

通过部署我们可以直接访问网站啦!!!!

相关推荐
落世繁华3 分钟前
DIFY合同生成全流程开发实践(三、后端接口以及优化方向)
docker·一键部署·dify·合同生成·文字转word
静小谢30 分钟前
前后台一起部署,vite配置笔记base\build
前端·javascript·笔记
ascarl201043 分钟前
Kubernetes 环境 NFS 卡死问题排查与解决纪要
云原生·容器·kubernetes
用户47949283569151 小时前
改了CSS刷新没反应-你可能不懂HTTP缓存
前端·javascript·面试
还好还好不是吗1 小时前
老项目改造 vue-cli 2.6 升级 rsbuild 提升开发效率300% upupup!!!
前端·性能优化
sumAll1 小时前
别再手动对齐矩形了!这个开源神器让 AI 帮你画架构图 (Next-AI-Draw-IO 体验)
前端·人工智能·next.js
OpenTiny社区1 小时前
2025OpenTiny星光ShowTime!年度贡献者征集启动!
前端·vue.js·低代码
wangan0941 小时前
不带圆圈的二叉树
java·前端·javascript
狗哥哥1 小时前
从零到一:打造企业级 Vue 3 高性能表格组件的设计哲学与实践
前端·vue.js·架构
疯狂平头哥1 小时前
微信小程序真机预览-数字不等宽如何解决
前端