最近有一个项目需要前后端分离。实际上，简单的部署nginx和vue就可以实现了。但是考虑到项目中的管理员端和用户端分别用两套vue实现，因此考虑用docker进行部署。主要有两个好处，一是docker部署使得封装性更好，之后的拓展、拷贝、卸载也更加方便；二是可以实现多个nginx部署，不会形成冲突。
Nginx部署
首先使用下面的命令拉取nginx的镜像。
docker pull nginx
然后就是使用这个镜像创建容器（这个容器是临时的）：
docker run --name nginx -d -p 8080:80 nginx
容器创建好了以后，把nginx容器的配置文件夹拷贝到当前目录下，主要是为了获取nginx的配置文件，如果你已经有了，可以忽视这一步骤：
docker container cp nginx:/etc/nginx . # 注意上面代码末尾的那个点别丢了
把这个文件夹改一下名字，改为conf：
mv nginx conf
把这个conf文件夹移动到你想要挂载nginx配置的地方，这个文件夹需要你自己创建：
mv conf /opt/nginx
再在 /opt/nginx（指定的）目录下，再创建html、logs文件夹
mkdir /opt/nginx/html /opt/nginx/logs
接下来就查看原容器id:
docker ps
终止容器:
docker stop id
并删除原容器：
docker rm id
如果只是创建nginx的话，直接执行下面这一步就可以了，如果还需要部署vue，则不要执行！！！不然还得删掉，再重新执行下面的步骤。
docker run --name nginx01 -p 8080:80 -v /opt/nginx/html:/usr/share/nginx/html -v /opt/nginx/logs:/var/log/nginx -v /opt/nginx/conf:/etc/nginx -d nginx
同时，/opt/nginx下的几个文件夹已经映射到docker中nginx的相应目录中了，更改里面的内容也可以相应的改变nginx的配置。
Vue部署
如果还需要部署vue，还需要进行几个步骤，首先确保vue框架已经被打包成dist文件夹了，我们接下来的步骤是将dist部署到docker的nginx中。
将dist放到opt/nginx中，和上面的几个文件夹处于同一层级，再执行下面这一步骤
sudo docker run --name nginx01 -p 8080:80 -v /opt/nginx/html:/usr/share/nginx/html -v /opt/nginx/logs:/var/log/nginx -v /opt/nginx/conf:/etc/nginx -v /opt/nginx/dist:/opt/dist -d nginx
接下来，修改opt/nginx/conf/nginx.conf文件：
user nginx;
worker_processes auto;
error_log /var/log/nginx/error.log notice;
pid /var/run/nginx.pid;
events {
worker_connections 1024;
}
http {
include /etc/nginx/mime.types;
default_type application/octet-stream;
log_format main '$remote_addr - $remote_user [$time_local] "$request" '
'$status $body_bytes_sent "$http_referer" '
'"$http_user_agent" "$http_x_forwarded_for"';
access_log /var/log/nginx/access.log main;
sendfile on;
#tcp_nopush on;
keepalive_timeout 65;
gzip on;
gzip_static on;
gzip_buffers 4 16k;
gzip_comp_level 5;
gzip_types text/plain application/javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
server{
listen 80;
server_name _;
location / {
root /opt/dist;
index index.html;
}
#####所有/api开头的请求都会转发到这个地址，这个看自己需求，不需要可以删掉。
location /api{
proxy_pass http://41.139.212.118:80;
}
#####
}
include /etc/nginx/conf.d/*.conf;
}
之后进入容器中
docker exec -it nginx01 /bin/bash
重启nginx
nginx -t nginx -s reload
退出
exit
如果需要部署多个nginx和vue，可以把上述步骤再重复执行，同时记得端口名要改一下
