nginx发布vue项目

1、docker拉取nginx镜像

docker pull nginx:latest
1

2、docker安装nginx

# 第一个80端口是主机端口，第二个80端口是内部端口，主机的端口 80 映射到容器内部的端口80
docker run -d --name nginx -p 80:80 -p 443:443 nginx:latest
1
2

3、输入IP访问

说明我们部署成功

一般部署都是将前端项目打包再创建镜像，这样是很麻烦的，我们今天用另外一种简单的方式部署

4、在服务器上先创建四个目录

# nginx目录
mkdir /usr/local/nginx
# nginx子目录
mkdir /usr/local/nginx/conf
mkdir /usr/local/nginx/html
mkdir /usr/local/nginx/logs
1
2
3
4
5
6

5、将docker目录映射到刚才创建的四个目录下

docker cp d14:/etc/nginx/nginx.conf /usr/local/nginx/
docker cp d14:/etc/nginx/conf.d /usr/local/nginx/conf/
docker cp d14:/usr/share/nginx/html /usr/local/nginx/html
docker cp d14:/var/log/nginx/ /usr/local/nginx/logs/
1
2
3
4

其中d14是nginx容器运行的id，通过以下命令查询

docker ps -a
1

6、将刚才复制的文件全部移动/usr/local/nginx/conf、html、logs

我们得将conf.d目录下的文件移动到conf目录下，再删除conf.d目录，html、logs目录也是同样的操作一样。最终结果如下

7、删除刚才部署的docker

docker stop d14
docker rm d14
1
2

8、重新部署nginx，此时将nginx的目录映射到本地刚才创建的目录

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

9、输入IP访问

10、将打包好的vue项目复制到html目录下

部署成功