该配置文件定义了首页的指向为 /usr/share/nginx/html/index.html, 所以我们可以一会把构建出来的index.html文件和相关的静态资源放到/usr/share/nginx/html目录下。 4、将本地的vue项目进行打包,生成dist目录 npm runbuild# 执行该指令后,在项目根目录中生成dist文件夹 5、将dist文件夹压缩并上传到挂载目录中:/...
4 构建vue应用镜像 nginx 是一个高性能的HTTP和反向代理服务器,此处我们选用 nginx 镜像作为基础来构建我们的vue应用镜像。 4.1 获取 nginx 镜像 docker pull nginx docker镜像(Image)一个特殊的文件系统。Docker镜像是一个特殊的文件系统,除了提供容器运行时所需的程序、库、资源、配置等文件外,还包含了一些为运行...
根据使用vue的版本不同,创建的命令不同,这个自行去了解,本文使用vue2来创建,创建及编译命令如下 # 使用vue2创建应用 vue init webpack "vue-docker" # 初始化依赖包 npm install # 运行 npm run dev # 打包 npm run build 构建vue应用镜像并启动容器 vue项目部署需要使用到服务器容器,本文采用的是nginx反向代...
1、创建项目 我们使用下面的命令创建一个Vue程序,这里使用PowerShell创建 vue create docker-vue 创建过程省略,创建完成 使用VSCode打开项目,然后执行运行命令 npm run serve 如图所示 在浏览器里面访问 2、编译项目 项目创建完成以后,我们编译项目 npm run build 如图所示 编译完成之后,在项目的根目录下面就会生成一个...
1,在本地创建docker-vue文件夹,将打包好的dist文件夹放入gocker-vue 2,在docker-vue文件夹中新建文本文档为dockerfile.txt,并在文档中写入如下内容 FROM nginx:latest MAINTAINER xxh COPY dist/ /usr/share/nginx/html/ 在docker-vue文件夹中新建nginx.conf 并写入以下内容 worker_processes auto; #error_log...
部署流程 下面是 Docker 部署 Vue 项目的流程表: 详细步骤 1. 安装 Docker 首先,你需要确保你的计算机上已经安装了 Docker。请前往 [Docker 官方网站]( 下载并安装适合你操作系统的 Docker 版本。 2. 创建 Vue 项目 使用Vue CLI 创建一个新的 Vue 项目。在终端中运行下面的命令: ...
现在执行docker info,可以查看到docker的一些信息,说明已经安装成功了。下面就对Vue项目进行配置 Vue项目配置 根目录添加Dockerfile文件 touch nginx.conf user nginx;worker_processes 1;error_log /var/log/nginx/error.log warn;pid /var/run/nginx.pid;events { ...
📌想要用Docker轻松部署你的Vue项目吗?跟着以下步骤,一键搞定!1️⃣ 🔍设置基础镜像:使用`FROM nginx`命令,选择Nginx作为你的基础镜像。2️⃣ 📁复制文件:通过`COPY dist/ /usr/share/nginx/html/`,将Vue项目构建后的`dist`目录内容复制到Nginx容器的指定路径。3...
要在Docker中部署Vue项目,可以按照以下步骤进行操作:1. 创建Vue项目:首先,使用Vue CLI创建一个Vue项目。可以使用以下命令创建一个新的Vue项目:```vue create my-vue-app```2. 构建Vue项目:进入项目目录,并使用以下命令构建Vue项目:```cd my-vue-appnpm run build```这将在`dist`目录下生成一个打包好的...
从0 开始 之 Docker部署Vue项目 什么是Docker 装应用的容器 开发、测试、运维都偏爱的容器化技术 轻量级 扩展性 一次构建、多次分享、随处运行 原理 对Docker 最简单并且带有一定错误的认知就是 “Docker 是一种性能非常好的虚拟机”。 Docker 相比于传统虚拟机的技术来说先进了不少,具体表现在 Docker 不是在宿...