前端项目容器化Docker打包部署方式详解

更新时间：2023年11月20日 09:25:57 作者：言午日尧耳总

这篇文章主要为大家介绍了前端项目容器化Docker打包部署方式详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

前端项目容器化(Docker)打包部署

新建一个vue项目
增加容器配置
docker命令打包镜像，部署本机

新建vue项目

使用vue官方脚手架创建一个项目
- 下面的demo使用默认配置

安装依赖并运行

# 使用vue脚手架创建项目
npm create vue@latest
# 进入项目(假设项目名为"xxc-web")
cd xxc-web
# 安装依赖
npm install
# 测试
npm run dev

手动打包部署(旧方式)

单机部署方式通常使用"npm run build"打包成静态文件
- 通常打包后文件在项目根目录的"dist"目录下
将dist目录的文件上传服务器
配置nginx，将某域名/端口号指向该目录

之后即可使用http://ip:port访问

容器化(Docker)打包部署

打包配置

根目录新增"nginx.conf"文件
- 为了解决部分框架部署后的路由问题
- 如:该开始访问一切正常，但是使用浏览器刷新后，报错404

文件内容如下：

server {
  listen       80;
  listen  [::]:80;
  server_name  localhost;
  access_log  /var/log/nginx/host.access.log  main;
  location / {
      root   /usr/share/nginx/html;
      index  index.html index.htm;
      # 新增下面这句，其他是默认nginx配置
      # 解决部分前端框架的路由问题，在浏览器刷新报错404
      try_files $uri $uri/ /index.html;
  }
  error_page   500 502 503 504  /50x.html;
  location = /50x.html {
      root   /usr/share/nginx/html;
  }
}

根目录新增"Dockerfile"文件
- 打包过程分为两个阶段
- 第一阶段：使用node镜像安装依赖并打包成静态文件
- 第二阶段：将静态文件放入nginx镜像，并修改配置

文件内容如下：

# 第一阶段：node镜像打包
FROM node:latest AS frontend-builder
WORKDIR /build-app
COPY . .
RUN npm install
RUN npm run build
# 第二阶段：nginx打包
FROM nginx:latest
EXPOSE 80
WORKDIR /app
# 替换nginx配置
COPY nginx.conf /etc/nginx/conf.d/default.conf
# 将第一阶段的静态文件复制到nginx中
RUN rm -rf /usr/share/nginx/html
RUN mkdir /usr/share/nginx/html
COPY --from=frontend-builder /build-app/dist /usr/share/nginx/html
# 运行
CMD ["nginx", "-g", "daemon off;"]

打包部署

使用docker命令打包
- 镜像名称为"xxc-web:v1"
将镜像上传到docker仓库或私有仓库(Harbor)

运行容器

# 打包镜像
docker build -t xxc-web:v1 . 
# 上传仓库
# docker login -u <用户名> -p <密码> <仓库地址>
# docker push xxc-web:v1
# 运行
docker run --name xxc-web -dp 1234:80 xxc-web:v1

如下运行命令映射为1234端口，访问 http://localhost:1234

以上就是前端项目容器化Docker打包部署方式详解的详细内容，更多关于前端项目容器化Docker打包部署的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

Docker + Nginx 实现 Java 服务零停机发布并解决发布
本文介绍了一种低成本实现SpringBoot服务零停机发布的方案,通过双实例兜底和Nginx自动重试机制解决传统部署中的502问题,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
2026-04-04
docker和k8s-coredns内部域名解析方式
这篇文章主要介绍了docker和k8s-coredns内部域名解析方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2025-05-05
Docker多架构镜像构建全过程
文章介绍了如何使用DockerBuildx工具实现一次构建同时支持ARM64和AMD64平台的Docker镜像,并详细描述了构建过程、技术方案和问题排查,最终,通过脚本使用指南和常见问题解答,帮助用户更好地理解和使用该工具
2026-01-01
Docker 部署HAProxy v2.2.29 并暴露指标接口的问题解决
haproxy提供高可用性、负载均衡以及基于TCP(第四层)和HTTP（第七层）应用的代理，支持虚拟主机，它是免费、快速并且可靠的一种解决方案，这篇文章主要介绍了Docker 部署HAProxy v2.2.29 并暴露指标接口,需要的朋友可以参考下
2023-04-04
nerdctl替代docker及docker-compose的安装使用
这篇文章主要为大家介绍了nerdctl替代docker及docker-compose的安装使用详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-06-06
在Docker环境中部署和运行One API的操作方法
随着技术的发展,API 作为服务连接的桥梁,变得越来越重要,One API 是一种流行的 API 管理平台,能够帮助我们更好地管理、监控和扩展 API 服务,本文给大家介绍了如何在 Docker 环境中部署和运行 One API,需要的朋友可以参考下
2024-11-11
部署安装docker及项目搭建所需要的基础环境实践(mysql、redis、nginx、nacos)
本文介绍通过docker-run.sh和docker-compose.yml实现一键部署Docker及Web服务,解决环境不一致问题,包含MySQL、Nacos、Nginx等配置,并提供GitHub代码链接便于直接使用
2025-07-07
解决docker镜像(centos系统)中无sudo命令问题
这篇文章主要介绍了解决docker镜像(centos系统)中无sudo命令问题,具有很好的参考价值,希望对大家有所帮助,
2023-11-11
一步步教你用docker部署postgreSQL数据库
这篇文章主要给大家介绍了关于如何使用docker部署postgreSQL数据库的相关资料,PostgreSQL是一款功能丰富的关系型数据库,类似于MySQL,它也是受欢迎程度非常高的,需要的朋友可以参考下
2023-11-11
详解如何查看 docker 容器使用的资源
本篇文章主要介绍了详解如何查看 docker 容器使用的资源，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-11-11