Docker 部署 vue 项目的详细流程
作者：二月雪
使用Docker配合Nginx部署Vue3项目涉及多个步骤：首先安装Nginx,然后创建挂载目录及配置文件；接着打包Vue项目并上传至服务器；最后创建Dockerfile,构建镜像并启动容器,部署完成后,通过IP访问应用以验证是否成功
概述
技术栈：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
server {
listen 80;
server_name localhost;
#charset koi8-r;
access_log /var/log/nginx/host.access.log main;
error_log /var/log/nginx/error.log error;
location / {
root /usr/share/nginx/html;
index index.html index.htm;
}
#error_page 404 /404.html;
# redirect server error pages to the static page /50x.html
#
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root /usr/share/nginx/html;
}
}该配置文件定义了首页的指向为 /usr/share/nginx/html/index.html, 所以我们可以一会把构建出来的index.html文件和相关的静态资源放到/usr/share/nginx/html目录下。
4、将本地的vue项目进行打包，生成dist目录
npm run build # 执行该指令后，在项目根目录中生成dist文件夹
5、将dist文件夹压缩并上传到挂载目录中：/usr/local/nginx/
6、进入挂载目录，并解压出dist目录，我们的index.html则在dist目录下：
7、在与dist同目录下，创建Dockerfile文件，vim Dockerfile:
FROM nginx COPY ./dist/ /usr/share/nginx/html/ COPY ./default.conf /etc/nginx/conf.d/default.conf
8、将Dockerfile构建镜像(注：最后有一个.不能漏掉，这个构建表示当前目录下的Dockerfile)
docker build -t nginx_vue3 . # 查看镜像：docker images
9、启动并挂在nginx
docker run -d -p 80:80 --name nginx -v /usr/local/nginx/dist:/usr/share/nginx/html --restart=always nginx -d # 后台运行容器 -p # 将宿主机的80端口映射到容器的80端口 --name # 指定容器的名称 -v 挂载宿主机的目录或文件 到 容器中的目录或文件，实现文件数据同步 ----restart=always # 将容器设置为服务自启动（运行docker服务时，容器也就会跟着启动） # 最后的nginx_vue3为创建的镜像名称
10、查看容器: docker ps
11、在浏览器中输入ip，查看vue是否部署成功
到此这篇关于Docker 部署 vue 项目的详细流程的文章就介绍到这了,更多相关Docker 部署 vue内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！