基于Docker部署Nginx，并部署Vue项目

一、部署Nginx服务器

1.1 在docker中拉取nginx镜像

执行以下命令

sudo docker pull nginx
sudo docker images

拉取成功

1.2 创建Nginx配置文件

启动前需要先创建Nginx外部挂载的配置文件（ /home/zx/nginx/conf/nginx.conf）
之所以要先创建 , 是因为Nginx本身容器只存在/etc/nginx 目录 , 本身就不创建 nginx.conf 文件
当服务器和容器都不存在 nginx.conf 文件时, 执行启动命令的时候 docker会将nginx.conf 作为目录创建 , 这并不是我们想要的结果 。

# 创建挂载目录
mkdir -p /home/zx/nginx/conf
mkdir -p /home/zx/nginx/log
mkdir -p /home/zx/nginx/html

将容器中的nginx.conf文件和conf.d文件夹复制到宿主机

# 生成容器
docker run --name nginx -p 80:80 -d nginx
# 将容器nginx.conf文件复制到宿主机
docker cp nginx:/etc/nginx/nginx.conf /home/zx/nginx/conf/nginx.conf
# 将容器conf.d文件夹下内容复制到宿主机
docker cp nginx:/etc/nginx/conf.d /home/zx/nginx/conf/conf.d
# 将容器中的html文件夹复制到宿主机
docker cp nginx:/usr/share/nginx/html /home/zx/nginx/

1.3 将原Nginx容器删除，再运行一个新的Nginx服务

删除原容器

# 直接执行docker rm nginx或者以容器id方式关闭容器
# 找到nginx对应的容器id
docker ps -a
# 关闭该容器
docker stop nginx
# 删除该容器
docker rm nginx
 
# 删除正在运行的nginx容器
docker rm -f nginx

建立一个新容器

docker run \
-p 80:80 \
--name nginx \
-v /home/zx/nginx/conf/nginx.conf:/etc/nginx/nginx.conf \
-v /home/zx/nginx/conf/conf.d:/etc/nginx/conf.d \
-v /home/zx/nginx/log:/var/log/nginx \
-v /home/zx/nginx/html:/usr/share/nginx/html \
-d nginx

部署好后只需要将前端项目代码放到/home/zx/nginx/html 然后重启nginx即可

# 重启容器
docker restart nginx

二、部署Vue项目

2.1 打包vue项目

npm run build

打包成功后会生成一个dist目录,将目录拉取到服务器中

2.2 将dist目录下所有文件拉取到/home/zx/nginx/html 目录下再重启容器

# 重启容器
docker restart nginx

部署成功