[系统运维] docker部署nginx和vue（可以部署多个nginx和vue）

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> 系统运维 -> docker部署nginx和vue（可以部署多个nginx和vue） -> 正文阅读

[系统运维]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;
}