docker部署nginx和vue（可以部署多个nginx和vue）

最近有一个项目需要前后端分离。实际上，简单的部署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，可以把上述步骤再重复执行，同时记得端口名要改一下