前面的文章我们介绍了很多的Docker的基本知识。本节我们实际使用Docker创建Nginx，并部署Vue项目。

环境说明

CentOS 7

Docker 19.03.4

拉取镜像

拉取nginx镜像到本地：

docker pull nginx:latest

说明：docker pull 镜像名称:镜像tags。如果不加 tags，默认拉取最新镜像（latest）。

准备工作

• 创建挂载目录

mkdir -p /usr/local/nginx/{conf,html,logs,conf.d}

• 将打包好的vue项目包（一个名为dist的文件夹）放到 /usr/local/nginx/html 目录下。

[root@192 html]# ls -l /usr/local/nginx/html/
总用量 4
drwxrwxr-x. 9 admin admin 250 3月   7 17:17 dist

• 在/usr/local/nginx/conf下创建nginx.conf文件，作为外置配置文件使用。

user  nginx;
worker_processes  1;
error_log  /var/log/nginx/error.log warn;
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;
    include /etc/nginx/conf.d/*.conf;
}

• 创建项目配置文件

在nginx.conf中我们可以看到 include /etc/nginx/conf.d/*.conf 。Nginx会扫描这个目录下所有以.conf结尾的文件。

我个人习惯在nginx.conf设置全局配置，在/etc/nginx/conf.d/下创建单独的项目配置文件。这样更清晰一些。

在/usr/local/nginx/conf.d 目录下创建vip.conf

[root@192 nginx]# vim conf.d/vip.conf 

server {
    listen       80;
    server_name  localhost;

    #charset koi8-r;
    #access_log  /var/log/nginx/host.access.log  main;

    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
    }
}

1. root：表示匹配成功之后进入的目录，我们创建容器后会把/usr/local/nginx/html/dist 目录下的文件拷贝到容器的/usr/share/nginx/html目录下。
2. index：表示默认的页面

创建容器

docker run -d -p 80:80 --name nginx80 --restart=always \
 -v /usr/local/nginx/html/dist/:/usr/share/nginx/html \
 -v /usr/local/nginx/conf/nginx.conf:/etc/nginx/nginx.conf \
 -v /usr/local/nginx/logs/:/var/log/nginx nginx:latest \
 -v /usr/local/nginx/conf.d:/etc/nginx/conf.d 

如果返回一长串字符即为成功。

参数说明：

• -d 后台运行
• -p 设置端口映射 宿主机端口：容器端口
• --name 设置容器别名
• --restart=always 设置容器开机启动
• -v 数据卷映射 宿主机目录：容器目录。这样方便我们管理容器配置文件及日志文件

浏览器访问

我们使用浏览器访问 http://192.168.85.128/ 返回：

这样，我们就使用nginx部署了一个Vue项目。