docker下安装nginx，部署vue项目

原创已于 2023-02-01 14:58:33 修改 · 1.2k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#docker #nginx #linux

于 2023-01-31 16:44:08 首次发布

本文详细介绍使用Docker部署Vue项目的全过程，包括拉取镜像、配置文件映射、容器管理及前端API配置等关键步骤。

1、进入目录/usr/，pull拉取安装，安装好查看镜像，如下图

2、运行nginx镜像

docker run -d --name nginx -p 80:80 -p 443:443 nginx:latest

3、复制nginx配置文件到主机目录，为文件映射做准备

docker cp nginx:/etc/nginx/nginx.conf /usr/nginx/
docker cp nginx:/etc/nginx/conf.d /usr/nginx/conf/
docker cp nginx:/usr/share/nginx/html /usr/nginx/html
docker cp nginx:/var/log/nginx/ /usr/nginx/logs/

对于如下错误，需实现创建好对应的目录文件夹，到nginx这一层即可

命令执行后生成的目录结构如下图

4、删除已经运行的nginx容器

docker rm -f 0456f19239b26d9223c2f52415ca8958cbedc701cba8a698c3a31afcc031f9ca

5、挂载目录，重新启动容器（映射相应的目录文件）

docker run -d  --name nginx -p 8021:80 -p 443:443 -v /usr/nginx/nginx.conf:/etc/nginx/nginx.conf -v /usr/nginx/logs:/var/log/nginx -v /usr/nginx/html:/usr/share/nginx/html -v /usr/nginx/conf:/etc/nginx/conf.d --privileged=true     -e TZ=Asia/Shanghai nginx:latest

6、把vue项目build之后的dist目录下所有文件上传至宿主服务器/usr/nginx/html下即可