4、将本地的vue项目进行打包,生成dist目录 npm runbuild# 执行该指令后,在项目根目录中生成dist文件夹 5、将dist文件夹压缩并上传到挂载目录中:/usr/local/nginx/ 6、进入挂载目录,并解压出dist目录,我们的index.html则在dist目录下: 7、在与dist同目录下,创建Dockerfile文件,vim Dockerfile: FROMnginxCOPY./d...
用vue cli 创建一个vue项目,修改一下创建出来的项目,在页面上写一个前端接口请求,构建一版线上资源 ,基于nginx docker镜像构建成一个前端工程镜像,然后基于这个前端工程镜像,启动一个容器 vuenginxcontainer。 启动一个基于 node 镜像的容器 nodewebserver,提供后端接口。 修改vuenginxcontainer 的 nginx 配置,使前端...
本文主要是使用docker来部署vue项目,那vue项目是必不可少了。 创建测试vue项目 根据使用vue的版本不同,创建的命令不同,这个自行去了解,本文使用vue2来创建,创建及编译命令如下 # 使用vue2创建应用 vue init webpack "vue-docker" # 初始化依赖包 npm install # 运行 npm run dev # 打包 npm run build 构建...
1、创建项目 我们使用下面的命令创建一个Vue程序,这里使用PowerShell创建 vue create docker-vue 创建过程省略,创建完成 使用VSCode打开项目,然后执行运行命令 npm run serve 如图所示 在浏览器里面访问 2、编译项目 项目创建完成以后,我们编译项目 npm run build 如图所示 编译完成之后,在项目的根目录下面就会生成一个...
当我们在本地开发了一个vue项目之后,肯定是想部署到服务器上供其他人访问,之前介绍过使用cntos7+nginx部署项目,今天让我们来使用docker来部署我们的前端项目,首先你已经安装好了docker,并熟悉基本的docker命令。 部署 获取nginx镜像 docker pull nginx 1.
创建vue项目 vue init webpack docker-vue 1. 安装依赖 cd docker-vue cnpm install 1. 2. 运行测试 cnpm run dev 1. 在浏览器中访问http://localhost:8080/ 利用vue-cil初始化构建vue项目,我们会获得一个初始化的文件夹结构 编译项目 cnpm run build ...
要在Docker中部署Vue项目,主要分为以下几个步骤:1、准备Vue项目,2、创建Dockerfile,3、构建Docker镜像,4、运行Docker容器。这些步骤将帮助你将Vue应用程序打包成一个Docker镜像,并在Docker容器中运行。 一、准备Vue项目 确保你已经有一个Vue项目。如果你还没有,可以使用Vue CLI创建一个新的Vue项目: ...
docker build -t getting-started . 容器化部署 在容器镜像里面,可以看到刚构建的getting-started,点击该镜像配置端口号。 点击连接,可以访问刚部署的页面 Docker 常用命令 镜像构建脚本 docker build -t [镜像的名字及标签,通常 name:tag] -f [指定要使用的Dockerfile路径] [ContextPath] ...
docker -v 启动docker service docker start 设置开机启动 chkconfig docker on 配置Docker 因为国内访问 Docker Hub 较慢, 可以使用腾讯云提供的国内镜像源, 加速访问 Docker Hub 依次执行以下命令 echo "OPTIONS='--registry-mirror=https://mirror.ccs.tencentyun.com'" >> /etc/sysconfig/docker ...
docker network inspect my-net 一、前端部署 核心步骤——在运行容器时,将宿主机配置文件、网页文件挂接到docker容器的响应目录。 1、宿主机创建目录,用于存放build之后的前端文件,以及nginx配置文件。 创建文件,如果父目录不存在,同样会创建其父目录 mkdir -p /home/haben/mtms/nginx/conf ...