脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网站技巧 → 服务器 → 云和虚拟化 → docker → docker构建Vue项目

在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搭建es集群实现过程详解

    docker搭建es集群实现过程详解

    这篇文章主要为大家介绍了docker搭建es集群实现过程详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-01-01
  • Docker网络代理设置详解

    Docker网络代理设置详解

    在一些实验室环境，服务器没有直接连接外网的权限，需要通过网络代理。本篇文章主要介绍了Docker网络代理设置详解，有兴趣的可以了解一下。
    2017-02-02
  • docker<容器数据卷-v>对容器内数据持久化详解(备份)

    docker<容器数据卷-v>对容器内数据持久化详解(备份)

    容器的数据持久化主要是指宿主机与容器,以及容器与容器之间进行数据交互,下面这篇文章主要给大家介绍了关于docker<容器数据卷-v>对容器内数据持久化的相关资料,需要的朋友可以参考下
    2023-03-03
  • Linux安装docker以及docker安装软件教程

    Linux安装docker以及docker安装软件教程

    这篇文章主要介绍了Linux安装docker以及docker安装软件教程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2025-06-06
  • idea 连接远程 docker 并部署项目到 docker的过程

    idea 连接远程 docker 并部署项目到 docker的过程

    这篇文章主要介绍了idea连接远程docker并部署项目到docker,本文通过图文并茂的形式给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2023-10-10
  • Docker-Compose搭建Spark集群的实现方法

    Docker-Compose搭建Spark集群的实现方法

    本文主要介绍了Docker-Compose搭建Spark集群的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2022-05-05
  • docker容器commit打包越来越大的原因分析及解决

    docker容器commit打包越来越大的原因分析及解决

    文章介绍了Docker容器打包变大的原因,并提供了解决方法,具体步骤包括使用export命令导出容器,然后使用import命令导入镜像,最后将镜像展开成容器,这种方法可以有效减少镜像文件的大小,避免因Docker镜像层的概念导致的文件膨胀问题
    2025-03-03
  • 安装Docker后如何验证是否安装成功的方式

    安装Docker后如何验证是否安装成功的方式

    这篇文章主要介绍了安装Docker后如何验证是否安装成功的方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2025-03-03
  • docker容器的内存以及状态详解

    docker容器的内存以及状态详解

    通过docker stats获取容器ID,结合ps -ef获取进程PID,利用top -p PID分析内存占用,用于排查阿里云ECS实例内存过高问题,参考阿里云帮助中心相关说明进行处理
    2025-08-08
  • 解决docker拉取镜像报错:error pulling image configuration:(kafka)

    解决docker拉取镜像报错:error pulling image configurat

    在使用Docker拉取Kafka镜像时可能会遇到"error pulling image configuration"的错误,这可以通过编辑Docker配置文件并重启Docker服务来解决,具体步骤包括：1. 编辑Docker配置文件；2. 使用命令systemctl restart docker重启Docker服务
    2024-11-11

最新评论