为什么要把conf目录和静态资源目录配置出来(这里指开发调试阶段，生产阶段要将配置和资源COPY到Nginx容器中)

在开发调试的过程中，经常需要频繁的更改配置文件和打包的前端web文件，这样的话，如果是使用Dockerfile中COPY命令上传相关文件的话，需要反复构建镜像，并重新生成容器，比较麻烦。如果能够将相关需要配置的文件和前端web文件映射到宿主机上进行配置，这样只需要重启容器就可以解决问题了。

第一步 需要运行一个Nginx容器，并导出下一步需要的配置文件

• 启动一个空的Nginx容器 : 

docker run -d --name nginx-demo nginx

• 检查容器是否运行成功:

docker ps

第二步 导出配置文件

• 将需要的配置文件从容器中导出，导出到工作目录(后期需要挂载的目录),工作目录 /Users/sone/ngx-web2，在工作目录下，创建需要的目录文件夹

1.conf 是存放nginx配置文件的

2.html是存放web静态资源的

3.logs是映射nginx运行日志的(access.log,error.log)

•  拷贝容器内nginx默认配置文件到工作目录中的相关文件夹中

docker cp nginx-demo:/etc/nginx/nginx.conf $PWD/conf

docker cp nginx-demo:/etc/nginx/conf.d $PWD/conf

 进入容器找到需要的配置文件和文件夹，使用docker cp命令将其拷贝到之前准备的conf文件夹中

• 完成拷贝后，停止容器并将其删除

1.停止容器

docker stop nginx-demo

2.删除容器

docker rm nginx-demo

第三步 创建Nginx容器

docker run -d -p 80:80  \
 --name nginx-demo \
 -v /Users/sone/ngx-web2/html:/usr/share/nginx/html \
 -v /Users/sone/ngx-web2/conf/nginx.conf:/etc/nginx/nginx.conf \
 -v /Users/sone/ngx-web2/conf/conf.d:/etc/nginx/conf.d \
 -v /Users/sone/ngx-web2/logs:/var/log/nginx \
 nginx

参数说明:

-d 表示容器在后台运行，防止退出容器后，容器被停止或删除

-p 80:80 映射本机8080端口到容器的80端口

--name nginx-demo 设置容器名称为nginx-demo 

-v 将本地文件挂载到容器的指定目录

第四部 配置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;

    include /etc/nginx/conf.d/*.conf;
    server {
		listen        80;
		server_name  localhost;
		location / {
            root   html;
            index  index.html index.htm;
        }

        #error_page  404              /404.html;

        # redirect server error pages to the static page /50x.html
        #
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
		location /app/ { # 映射访问url，到静态资源文件下
			alias   /usr/share/nginx/html/app/dist;
			index  index.html index.htm;
		}

	}
}

将前端web打包的内容放到html/app/dist下（这里自己测试放的有点复杂了，也可以根据自己需要配置nginx.conf中的location进行简化）

 配置完成后需要重启nginx容器

docker stop nginx-demo # 先停止nginx-demo容器
docker start nginx-demo # 在启动nginx-demo容器

第五步 访问测试

在浏览器中输入地址: http://localhost:8080/app/dist/item.html

访问效果：

 

到此完成！感谢观看！