脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网站技巧 → 服务器 → 云和虚拟化 → docker → Docker 部署 vue

Docker 部署 vue 项目的详细流程

 更新时间：2024年09月24日 08:53:12   作者：二月雪  
使用Docker配合Nginx部署Vue3项目涉及多个步骤：首先安装Nginx,然后创建挂载目录及配置文件；接着打包Vue项目并上传至服务器；最后创建Dockerfile,构建镜像并启动容器,部署完成后,通过IP访问应用以验证是否成功

概述

技术栈：docker + vue3 + nginx

部署流程

1、docker下载安装 nginx

docker pull nginx

2、创建nginx挂载目录 /usr/local/nginx （可根据自己需要存放文件的位置自行创建目录）

mkdir -p /usr/local/nginx

3、创建default.conf：vim default.conf

server {
    listen       80;
    server_name  localhost;
    #charset koi8-r;
    access_log  /var/log/nginx/host.access.log  main;
    error_log  /var/log/nginx/error.log  error;
    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
    }
    #error_page  404              /404.html;
    # redirect server error pages to the static page /50x.html
    #
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }
}

该配置文件定义了首页的指向为 /usr/share/nginx/html/index.html, 所以我们可以一会把构建出来的index.html文件和相关的静态资源放到/usr/share/nginx/html目录下。

4、将本地的vue项目进行打包，生成dist目录

npm run build  # 执行该指令后，在项目根目录中生成dist文件夹

5、将dist文件夹压缩并上传到挂载目录中：/usr/local/nginx/

6、进入挂载目录，并解压出dist目录，我们的index.html则在dist目录下：

dist

7、在与dist同目录下，创建Dockerfile文件，vim Dockerfile:

FROM nginx
COPY ./dist/ /usr/share/nginx/html/
COPY ./default.conf /etc/nginx/conf.d/default.conf

8、将Dockerfile构建镜像(注：最后有一个.不能漏掉，这个构建表示当前目录下的Dockerfile)

docker build -t nginx_vue3 .
# 查看镜像：docker images

docker_images

9、启动并挂在nginx

docker run -d -p 80:80 --name nginx -v /usr/local/nginx/dist:/usr/share/nginx/html --restart=always nginx
-d # 后台运行容器
-p # 将宿主机的80端口映射到容器的80端口
--name # 指定容器的名称
-v 挂载宿主机的目录或文件 到 容器中的目录或文件，实现文件数据同步
----restart=always  # 将容器设置为服务自启动（运行docker服务时，容器也就会跟着启动）
# 最后的nginx_vue3为创建的镜像名称

10、查看容器: docker ps

docker_ps

11、在浏览器中输入ip，查看vue是否部署成功

到此这篇关于Docker 部署 vue 项目的详细流程的文章就介绍到这了,更多相关Docker 部署 vue内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • 使用Docker命令查看容器最后300行实时日志

    使用Docker命令查看容器最后300行实时日志

    在日常的容器化应用管理中,日志是排查问题、监控运行状态的重要工具,Docker 提供了简便的命令来查看容器日志,帮助开发者和运维人员快速定位问题,本篇博客将详细介绍如何使用 Docker 命令查看指定容器的最后 300 行实时日志,需要的朋友可以参考下
    2025-03-03
  • Docker Compose容器编排深度解析与实战小结

    Docker Compose容器编排深度解析与实战小结

    Docker Compose 是 Docker 官方推出的开源项目,用于定义和运行多个 Docker 容器的应用工具,简化了多容器应用的部署和管理,本文介绍Docker Compose：容器编排深度解析与实战指南,感兴趣的朋友一起看看吧
    2025-12-12
  • Docker自定义镜像上传至阿里云的实现

    Docker自定义镜像上传至阿里云的实现

    本文主要介绍了Docker自定义镜像上传至阿里云的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2024-04-04
  • Docker daemon 配置和故障排除过程

    Docker daemon 配置和故障排除过程

    这篇文章主要介绍了Docker daemon 配置和故障排除过程，具有很的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2023-05-05
  • 简单谈谈Docker镜像的使用方法

    简单谈谈Docker镜像的使用方法

    本次分享从个人的角度,讲述对于Docker镜像的使用方法，包括了从从Docker Hub或者其他镜像源安装Docker镜像，从Image file安装Docker镜像，从Docker file制作Docker镜像，有需要的小伙伴可以参考下
    2016-10-10
  • Docker快速部署主流脚本语言JavaScript的全过程

    Docker快速部署主流脚本语言JavaScript的全过程

    JavaScript是目前所有主流浏览器上唯一支持的脚本语言,这也是早期JavaScript的唯一用途,下面这篇文章主要给大家介绍了关于Docker快速部署主流脚本语言JavaScript的相关资料,需要的朋友可以参考下
    2023-02-02
  • Docker 部署Django项目的方法示例

    Docker 部署Django项目的方法示例

    这篇文章主要介绍了Docker 部署Django项目的方法示例,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2019-01-01
  • Docker不同宿主机网络打通的操作方案

    Docker不同宿主机网络打通的操作方案

    这篇文章主要介绍了Docker不同宿主机网络打通的方案 ,本方式使用docker Swarm集群的方式创建overlay 网络进行打通,需要的朋友可以参考下
    2024-08-08
  • 关于docker的15个小tip（技巧）

    关于docker的15个小tip（技巧）

    本篇文章主要介绍了docker的15个小tip（技巧），具有一定的参考价值，有需要的可以了解一下。
    2016-12-12
  • 如何隔离docker容器中的用户的方法

    如何隔离docker容器中的用户的方法

    这篇文章主要介绍了如何隔离docker容器中的用户的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09

最新评论