1. vue项目进行打包生成 dist文件夹,上传至服务器 2.构建vue应用 nginx镜像 nginx 是一个高性能的HTTP和反向代理服务器,用 nginx 镜像作为基础来构建vue应用镜像。 docker pull nginx docker镜像(Image)一个特殊的文件系统。Docker镜像是一个特殊的文件系统,除了提供容器运行时所需的程序、库、资源、配置等文件外,...
Linux部署Vue项目可以通过以下几种方式:1、使用Nginx进行静态文件部署;2、使用Docker进行容器化部署;3、使用PM2进行Node.js环境部署。这些方法各有优缺点,具体选择取决于项目需求和开发者的熟悉程度。 一、使用Nginx进行静态文件部署 Nginx是一种高性能的HTTP服务器和反向代理服务器,非常适合用来部署静态文件。以下是使用...
使用npm打包 创建nginx 容器 docker run -d --name admin_portal -p 9091:80 nginx 将dist目录下的所有文件拷贝到容器的 /usr/share/nginx/html 目录下,这个是html文件的默认读取路径 dockercp./ admin_portal:/usr/share/nginx/html/ 修改配置文件,/etc/nginx/nginx.conf dockercpadmin_portal:/etc/nginx/n...
1.编译打包 2.准备部署 2.1.跟随SpringBoot项目一同部署 2.2.在nginx上部署 2.2.1.安装nginx 2.2.2.修改配置文件 2.2.3.将项目移动到root对应的文件夹 2.2.4.启动/重启nginx以开启项目 2.2.5.服务器配置安全组(防火墙) 2.2.6.访问 1.编译打包 代码编写完毕后,在终端输入 vue ui 1. 随后就会在项目中生成...
2.同级目录下创建nginx的配置文件default.conf 代码语言:javascript 复制 server{listen80;# 监听的端口 server_name xx.xx.xxx.xx;# 处理的host地址 (请替换成你对应的项目访问 ip 或 域名)!!!root/usr/share/nginx/html;# vue项目存在的目录(替换成你对应的地址,如果你这是用docker部署的请改成你容器内的...
1. 使用Docker对前端vue项目进行部署 1.1 环境准备 服务器或者虚拟机上先安装好Nginx和相关配置 docker pull nginx拉去最新版本的nginx 运行nginx,docker run --name=mynginx -d -p 8080:80 nginx 然后在服务器安全组或者是防火墙里面开发80端口,在浏览器上输入ip:8080,如果出现这个画面标识nginx安装成功 ...
jar包启动完成,nginx启动完成,就可以在你window的浏览器上输入: 这里说明一下,前端的IP是你的Linux的IP ,为什么不写端口,因为我们使用的是nginx默认的80端口,后面的index.html页面是因为vue项目是一个单页面应用,也就是下图的: 等项目出现页面,成功请求到后端的数据,就说明部署成功!
1、docker安装nginx docker pull nginx docker run --name nginx -itd --restart always -p 8080:80 -v /usr/local/web/dist:/usr/share/nginx/html nginx 2、vue项目打包dist文件 npm run build 生成一个dist文件,将dist文件整个上传到服务器端 /usr/local/web下 ...
步骤1:CentOS7.5 安装docker 步骤2:CentOS7.5基于docker安装nginx 步骤3:本地创建实例vue项目并上传到github上 步骤4:CentOS7.5安装Git,并拉取代码 步骤5:CentOS安装node环境,并编译前端项目 步骤6:将编译后的静态文件放到nginx中 步骤7:增加前端启动命令,简化流程 ...
7、开始部署自己的项目 7.1、开始将自己的vue前端项目打包到dist目录 pnpm build 7.2、在本地创建一个Dockerfile FROM nginx:latest# 将项目根目录下dist文件夹下的所有文件复制到镜像中 /usr/share/nginx/html/ 目录下COPY dist/ /usr/share/nginx/html/COPY default.conf /etc/nginx/conf.d/default.conf ...