使用Docker和Nginx部署Vue项目是一个常见的做法,它可以帮助你将前端应用容器化,便于部署和管理。以下是详细的步骤,包括构建Vue项目、编写Dockerfile、构建Docker镜像、编写docker-compose.yml文件以及启动容器。 1. 构建Vue项目,生成dist目录 首先,确保你的Vue项目已经准备好,并且可以通过npm run build或yarn build命令构...
进入项目目录并进行打包: cdmy-projectnpmrun build 1. 2. 这将会在dist文件夹下创建一个打包后的项目。 步骤2: 编写 Dockerfile 在项目根目录下创建一个名为Dockerfile的文件,代码如下: # 使用 Nginx 的官方镜像FROMnginx:alpine# 将打包的静态文件复制到 Nginx 的默认目录COPYdist /usr/share/nginx/html# ...
使用npm run build 命令将vue项目打包,生成dist目录。 将文件夹放到服务器上,我们这里是放到了服务器的 /usr/local 目录下 编写构建脚本 1.在当前目录新建Dockfile文件 Dockerfile 1 2 3 4 5 6 7 8 9 10 11 # 指定基础镜像,必须为第一个命令 # 可以使用镜像ID或者镜像名称 例如 nginx:1.14 FROM bb52fc...
vue项目打包,打包后的dist包里的所有文件上传后,放到刚刚创建的nginx下面的html目录中 放好后,由于nginx容器我们刚刚已经启动ok了 ,直接访问IP:Port完全可以访问到我们的vue项目 但需要继续配置下Nginx文件反向代理 12. 修改nginx的default.conf配置文件 可以直接在sftp上传文件这块修改,也可以用命令行修改 命令行如: ...
简介:本文将指导您如何使用Docker和Nginx部署前端Vue项目。我们将通过构建一个Docker镜像来打包Vue项目,并在Docker容器中运行Nginx服务器,以提供静态文件服务。这样,您可以轻松地将您的Vue应用程序部署到任何支持Docker的环境中,实现快速、可靠的应用程序部署。
1. vue项目进行打包生成 dist文件夹,上传至服务器 2.构建vue应用 nginx镜像 nginx 是一个高性能的HTTP和反向代理服务器,用 nginx 镜像作为基础来构建vue应用镜像。 docker pull nginx docker镜像(Image)一个特殊的文件系统。Docker镜像是一个特殊的文件系统,除了提供容器运行时所需的程序、库、资源、配置等文件外,...
Docker部署nginx Docker 部署前端服务 准备工作: 1:准备 Nginx 镜像 2:准备 Dockerfile 文件 3:准备 Nginx 的配置文件 4:准备前端dist包 5:打包 6:启动 我们刚才已经说了这个 Nginx 的安装了,已经准备好了,接下来就是准备 Dockerfile 文件 # 使用nginx镜像FROM nginx# 作者MAINTAINER zhiyikeji# 删除nginx 默认...
docker使用nginx镜像部署vue3项目 1、打包 2、上传到服务器并解压(我已经解压) 3、修改nginx.conf配置文件 4、部署 代码语言:docker 复制 docker run -d \ --name vue-nginx \ -p 8091:80 \ -v /usr/local/nginx/conf/nginx.conf:/etc/nginx/nginx.conf:ro \...
使用Docker部署Vue前端项目 前言 在以前负责测试环境的维护过程中,部署前端项目非常麻烦,需要通过配置nginx.conf、然后在重启nginx配置等一顿操作,维护环境人员需要人工去服务器上打包、部署,甚至经常会操作出去。另外随着前端项目越来越多,每天需要频繁改配置文件,不断的重启nginx文件,导致影响测试进度。
四、使用 Docker 部署Nginx 1. 准备 Nginx 配置和静态资源目录 将若依项目的前端部分进行打包: npm run build 执行npm run build:prod命令后,这里打包的是其生产环境,会生成一个dist文件夹,里面包含了打包后的静态资源文件 这里nginx可以用卷映射也可以用dockerfile进行配置,为了简单方便一点就用卷映射吧。在宿主机...