docker rmi gentle-vue&>/dev/nullecho-e"\033[32m\n删除原镜像文件\n\033[0m"# 拷贝 dockerfile 到工程目录下 cp../dockerfile./# 构建镜像 docker build-t gentle-vue.echo-e"\033[32m\n新镜像构建成功\n\033[0m"# 删除原容器 docker rm-f g
vue项目打包,打包后的dist包里的所有文件上传后,放到刚刚创建的nginx下面的html目录中 放好后,由于nginx容器我们刚刚已经启动ok了 ,直接访问IP:Port完全可以访问到我们的vue项目 但需要继续配置下Nginx文件反向代理 12. 修改nginx的default.conf配置文件 可以直接在sftp上传文件这块修改,也可以用命令行修改 命令行如: ...
|2、创建挂载目录 3|03、生成容器 docker run --name nginx -p 80:80 -d nginx 4|04、复制相关配置到宿主机 docker cp nginx:/etc/nginx/nginx.conf /home/nginx/conf/nginx.conf # 将容器nginx.conf文件复制到宿主机docker cp nginx:/etc/nginx/conf.d /home/nginx/conf/conf.d # 将容器conf.d文件...
7. 启动、关闭、重启nginx 代码语言:javascript 代码运行次数:0 运行 AI代码解释 docker start nginx docker stop nginx docker restart nginx 三. vue-element-admin落地项目线上部署 完成上面的Nginx安装和相关配置后,接下来开始部署前端项目。 youlai-mall-admin是开源项目有来商城分离的管理前端,基于vue-element-ad...
Docker 部署 vue 项目 概述 技术栈: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...
后端通过(nohup java -jar xxx.jar &) 指令简单部署。该文主要说明部署前端vue项目。 部署vue需要安装nginx。安装nginx方式有两种,1、可以在服务器上下载nginx压缩包,解压即可。2、使用docker容器。该文使用docker容器安装,压缩包,可自行百度一下。 docker安装nginx ...
使用Docker部署Vue项目通常涉及以下几个步骤:构建Vue项目、创建Dockerfile、配置Nginx、构建Docker镜像以及运行Docker容器。 1. 构建Vue项目 首先,确保你的Vue项目已经构建完成。你可以使用以下命令来构建Vue项目: bash npm run build 构建完成后,会在项目目录下生成一个dist文件夹,里面包含了所有静态资源文件(HTML、CSS...
简介:本文将指导您如何使用Docker和Nginx部署前端Vue项目。我们将通过构建一个Docker镜像来打包Vue项目,并在Docker容器中运行Nginx服务器,以提供静态文件服务。这样,您可以轻松地将您的Vue应用程序部署到任何支持Docker的环境中,实现快速、可靠的应用程序部署。
nginx:latest node:latest 2.具体实现: 用vue cli 创建一个vue项目,修改一下创建出来的项目,在页面上写一个前端接口请求,构建一版线上资源 ,基于nginx docker镜像构建成一个前端工程镜像,然后基于这个前端工程镜像,启动一个容器 vuenginxcontainer。 启动一个基于 node 镜像的容器 nodewebserver,提供后端接口。 修改...
2. 部署 2.1 使用Vue生成前端文件 2.2 创建Docker file文件 2.3 配置Nginx代理 2.4 Docker打包镜像并运行镜像 2.5 测试 3. 踩坑总结 1. 前言 由于项目使用的前后端分离结构,采用nginx作为服务器代理前端解决跨域问题。 阅读本文之前,需要有了解过Docker、Vue、Nginx、CORS内容。