在docker中构建Vue项目方式
更新时间：2025年10月25日 09:20:09 作者：Qredsun
本文介绍了如何将前端项目构建为Docker镜像,并在容器中配置Nginx进行部署,通过编写Dockerfile,将前端构建和Nginx配置结合在一起,实现了一键部署
背景
一般发布前端项目的发布是将项目生成物上传至服务器，然后配置nginx。现在需要将前端构建成docker进行发布。
实现
项目文件结构：
my-vue-app/
├── Dockerfile
├── nginx.conf
├── package.json
├── public/
├── src/
└── …
编写dockerfile
将构建和ngxin配置在一起实现
# 构建阶段 FROM node:18-alpine as builder WORKDIR /app # 复制项目文件 COPY package*.json ./ RUN npm install COPY . . # 构建 Vue 项目 RUN npm run build # 生产阶段：使用 nginx 运行构建产物 FROM nginx:alpine # 拷贝构建结果到 nginx 的目录中 COPY --from=builder /app/dist /usr/share/nginx/html # 如果你有自定义 nginx 配置，可以覆盖默认配置 COPY nginx.conf /etc/nginx/conf.d/default.conf # 暴露端口 EXPOSE 80 CMD ["nginx", "-g", "daemon off;"]
配置nginx
server {
listen 80;
server_name localhost;
root /usr/share/nginx/html;
index index.html;
location / {
try_files $uri $uri/ /index.html;
}
}
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了docker之如何查看正在运行的容器问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-06-06
这篇文章主要介绍了docker安装es与kibana的过程及遇到问题,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2024-02-02
这篇文章主要介绍了Docker 中 MySQL 的部署与管理技巧,本文给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧2024-08-08
docker容器间互相访问(docker bridge网络)
本文主要介绍了docker容器间互相访问(docker bridge网络)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-01-01
Docker是一个非常有趣的项目,容器是独立运行的一个或一组应用，及他们的运行环境,容器是Docker中的一个重要的概念,这篇文章主要给大家介绍了关于docker该如何删除已停止的容器的相关资料,需要的朋友可以参考下2023-05-05
docker windows10 共享目录挂载失败的解决方案
这篇文章主要介绍了docker windows10 共享目录挂载失败的解决方案，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2021-03-03
今天小编就为大家分享一篇关于阿里云esc服务器Docker部署单节点Mysql的讲解，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧2019-03-03
这篇文章主要介绍了教你使用如何docker部署淘宝rap2服务，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-08-08
这篇文章主要介绍了Docker实现进入容器内部的方法,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-01-01
解决docker报错Encountered errors while bringing&n
这篇文章主要介绍了解决docker报错Encountered errors while bringing up the project实测有效！具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
最新评论