系统环境

➜  ~ cat /proc/version 
Linux version 4.18.0-80.el8.x86_64 (mockbuild@kbuilder.bsys.centos.org) (gcc version 8.2.1 20180905 (Red Hat 8.2.1-3) (GCC)) #1 SMP Tue Jun 4 09:19:46 UTC 2019
➜  ~ cat /etc/redhat-release
CentOS Linux release 8.0.1905 (Core) 
➜  ~ docker --version
Docker version 19.03.5, build 633a0ea

思路

利用docker中的nginx部署前端,采用联合挂载的方式,让放在本地的前端项目在nginx中运行

操作小记

# 在本地创建目录 nginx, 用于存放后面的相关东西
# www: 目录将映射为 nginx 容器配置的虚拟目录
# logs: 目录将映射为 nginx 容器的日志目录
# conf: 目录里的配置文件将映射为 nginx 容器的配置文件
➜  ~ mkdir -p ~/nginx/www ~/nginx/logs ~/nginx/conf

# 拉去最新的nginx镜像
➜  ~ docker pull nginx

# 查看镜像
➜  ~ docker images
REPOSITORY          TAG                 IMAGE ID            CREATED             SIZE
nginx               latest              231d40e811cd        2 weeks ago         126MB

# 运行一个镜像获取默认的nginx.conf文件
# 可以不用操作,nginx.conf内容在下面已经给出
➜  ~ docker run -d -p 80:80 --name test_web  231d40e811cd
➜  ~ docker ps -a
CONTAINER ID        IMAGE               COMMAND                  CREATED             STATUS              PORTS                               NAMES
eba25f3dc4e5        231d40e811cd        "nginx -g 'daemon of…"   5 minutes ago       Up 5 minutes        0.0.0.0:80->80/tcp                  test_web
# 将nginx默认的nginx.conf文件拷贝出来
➜  ~ docker cp eba25f3dc4e5:/etc/nginx/nginx.conf ~/nginx/conf/nginx.conf

# -p [宿主机端口]:[容器端口]: 将容器端口映射到主机端口
# --name yzb_web: 给容器取名
# -v /root/nginx/www:/usr/share/nginx/html: 将本地/root/nginx/www 挂载到容器的 /usr/share/nginx/html
# -v /root/nginx/conf/nginx.conf:/etc/nginx/nginx.conf: 将本地/root/nginx/conf/nginx.conf 挂载到容器的 /etc/nginx/nginx.conf
# -v /root/nginx/logs:/var/log/nginx: 将本地/root/nginx/logs 挂载到容器的 /var/log/nginx
➜  ~ docker run -d -p 80:80 --name yzb_web -v /root/nginx/www:/usr/share/nginx/html -v /root/nginx/conf/nginx.conf:/etc/nginx/nginx.conf -v /root/nginx/logs:/var/log/nginx 231d40e811cd

# 停止test_web容器运行
➜  ~ docker stop eba25f3dc4e5
# 删除test_web容器(这个容器仅仅为了取默认的nginx.conf)
➜  ~ docker rm eba25f3dc4e5

# 上传静态页面demo03.zip,放在/root/nginx/www
➜  www pwd
/root/nginx/www
➜  www yum install -y zip unzip
➜  www unzip demo03.zip
➜  www ls 
css  demo03.zip  img  index.html  js

# 配置防火墙
➜  www iptables -A INPUT -m state --state NEW -p tcp --dport 80 -j ACCEPT
➜  www iptables-save > /etc/sysconfig/iptables

# 访问页面,game over

附录

出现问题

问题一

若使用firewalld打开防火墙时,重启运行docker的容器,会发现有如下错误,非常不推荐使用firewalld

➜  www docker restart yzb_web     
Error response from daemon: Cannot restart container yzb_web: driver failed programming external connectivity on endpoint yzb_web (dbd3fcf80277b6297cd6a11ec972f3febd005905823a3a2f647ef241d5057def):  (iptables failed: iptables --wait -t nat -A DOCKER -p tcp -d 0/0 --dport 80 -j DNAT --to-destination 172.17.0.4:80 ! -i docker0: iptables: No chain/target/match by that name.

# 解决方案
# 临时关闭firwalld
➜  www systemctl stop firewalld.service
# 查看防火墙是否关闭
➜  www systemctl status firewalld.service
# 禁用firewalld
➜  www systemctl disable firewalld
# 先停掉所有容器
➜  www docker stop 容器id
# 重启docker
➜  www systemctl restart docker
# 再启动docker容器即可
➜  www docker start 容器id

防火墙相关

# 将状态为ESTABLISHED,RELATED的报文放行
➜  ~ iptables -A INPUT -m state --state ESTABLISHED,RELATED -j ACCEPT
# 给发往80端口的第一个报文放行 
➜  ~ iptables -A INPUT -m state --state NEW -p tcp --dport 80 -j ACCEPT
# 保存到配置文件iptables中
➜  ~ iptables-save > /etc/sysconfig/iptables
# 显示配置信息
➜  ~ iptables -t filter -nxvL

docker命令

# 停止容器
docker stop 容器id

# 删除容器
docker rm 容器id

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文件配置明细详解

#etnx运行的用户和用户组
user nginx nginx;

#工作进程数,建议设置为CPU的总核数
worker_processes  16;

#全局错误日志定义类型,日志等级从低到高依次为:
#debug | info | notice | warn | error | crit
error_log  logs/error.log  info;

#记录主进程ID的文件
pid        /nginx-1.13.7/nginx.pid;

#一个进程能打开的文件描述符最大值,理论上该值因该是最多能打开的文件数除以进程数。
#但是由于nginx负载并不是完全均衡的,所以这个值最好等于最多能打开的文件数。
#LINUX系统可以执行 sysctl -a | grep fs.file 可以看到linux文件描述符。
worker_rlimit_nofile 65535;

#连接数上限,单个进程允许的最大连接数
events {   
    #参考事件模型,use [ kqueue | rtsig | epoll | /dev/poll | select | poll ]; epoll模型是Linux 2.6以上版本内核中的高性能网络I/O模型,如果跑在FreeBSD上面,就用kqueue模型。
    #use epoll;
    #单个进程最大连接数(最大连接数=连接数*进程数)
    worker_connections 1024;
}

#设定http服务器,利用它的反向代理功能提供负载均衡支持
http {
    #文件扩展名与文件类型映射表
    include       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 记录了哪些用户,哪些页面以及用户浏览器、ip和其他的访问信息
    access_log  logs/access.log  main;
    
    #服务器名字的hash表大小
    server_names_hash_bucket_size 128;
    
    #客户端请求头缓冲大小。
    #nginx默认会用client_header_buffer_size这个buffer来读取header值,
    #如果header过大,它会使用large_client_header_buffers来读取。
    #如果设置过小HTTP头/Cookie过大 会报400 错误 nginx 400 bad request
    #如果超过buffer,就会报HTTP 414错误(URI Too Long)
    #nginx接受最长的HTTP头部大小必须比其中一个buffer大
    #否则就会报400的HTTP错误(Bad Request)
    client_header_buffer_size 32k;
    large_client_header_buffers 4 32k;

    #客户端请求体的大小
    client_body_buffer_size    8m;

    #隐藏ngnix版本号
    server_tokens off;

    #忽略不合法的请求头
    ignore_invalid_headers   on;

    #指定启用除第一条error_page指令以外其他的error_page。
    recursive_error_pages    on;

    #让 nginx 在处理自己内部重定向时不默认使用 server_name 设置中的第一个域名
    server_name_in_redirect off;

    #开启文件传输,一般应用都应设置为on;若是有下载的应用,则可以设置成off来平衡网络I/O和磁盘的I/O来降低系统负载
    sendfile  on;

    #告诉nginx在一个数据包里发送所有头文件,而不一个接一个的发送。
    tcp_nopush  on;

    #告诉nginx不要缓存数据,而是一段一段的发送--当需要及时发送数据时,就应该给应用设置这个属性,
    #这样发送一小块数据信息时就不能立即得到返回值。
    tcp_nodelay    on;

    #长连接超时时间,单位是秒
    keepalive_timeout  65;

    #gzip模块设置,使用 gzip 压缩可以降低网站带宽消耗,同时提升访问速度。
    gzip  on;                     #开启gzip
    gzip_min_length  1k;          #最小压缩大小
    gzip_buffers     4 16k;       #压缩缓冲区
    gzip_http_version 1.0;        #压缩版本
    gzip_comp_level 2;            #压缩等级
    gzip_types   text/plain text/css text/xml text/javascript application/json application/x-javascript application/xml application/xml+rss;          #压缩类型

    #upstream作负载均衡,在此配置需要轮询的服务器地址和端口号
    #max_fails为允许请求失败的次数,默认为1.
    #weight为轮询权重,根据不同的权重分配可以用来平衡服务器的访问率。
    #指定要域名对应的WEB项目访问地址
    upstream nginx.www.caitujun.com {
        #ip_hash指令,将同一用户引入同一服务器。
        ip_hash;
        server 192.168.100.110:4421 max_fails=3 weight=1;
        server 192.168.100.110:4422 max_fails=3 weight=2;
        server 192.168.100.110:4423 max_fails=3 weight=3;
    }

    #虚拟主机配置
    server {
        #监听端口
        listen       80;

        #域名可以有多个,用空格隔开
        server_name   www.caitujun.com caitujun.com;
        
        #反向代理配置,
        #将所有请求为http://nginx.www.caitujun.com的请求全部转发到upstream中定义的目标服务器中。
        location / {
            #定义首页索引文件的名称
            #index index.php index.html index.htm;

            #此处配置的域名必须与upstream的域名一致,才能转发。
            proxy_pass     http://nginx.www.caitujun.com;
            
            #以下是一些反向代理的配置可删除
            proxy_redirect             off;
            
            #后端的Web服务器可以通过X-Forwarded-For获取用户真实IP
            proxy_set_header           Host $host; 
            proxy_set_header           X-Real-IP $remote_addr; 
            proxy_set_header           X-Forwarded-For $proxy_add_x_forwarded_for; 
            
            #client_max_body_size 10m; #允许客户端请求的最大单文件字节数
            #client_body_buffer_size 128k; #缓冲区代理缓冲用户端请求的最大字节数
            #proxy_connect_timeout 300; #nginx跟后端服务器连接超时时间(代理连接超时)
            #proxy_send_timeout 300; #后端服务器数据回传时间(代理发送超时)
            #proxy_read_timeout 300; #连接成功后,后端服务器响应时间(代理接收超时)
            #proxy_buffer_size 4k; #设置代理服务器(nginx)保存用户头信息的缓冲区大小
            #proxy_buffers 4 32k; #proxy_buffers缓冲区,网页平均在32k以下的话,这样设置
            #proxy_busy_buffers_size 64k; #高负荷下缓冲大小(proxy_buffers*2)
            #proxy_temp_file_write_size 64k; #设定缓存文件夹大小,大于这个值,将从upstream服务器传
        }
        
        #图片缓存时间设置
         location ~.+\.(gif|jpg|jpeg|png|bmp|swf)$
         {
           expires 10d;
         }
         
         #JS和CSS缓存时间设置
         location ~ .+\.(js|css)$
         {
           expires 1h;
         }
        
        #单独的access_log文件
        access_log  logs/www.caitujun.com.access.log  main;

        #设定查看Nginx状态的地址
        location ^~/NginxStatus{
             stub_status on;
             access_log on;
             auth_basic "NginxStatus";
             auth_basic_user_file htpasswd;#htpasswd文件的内容可以用apache提供的htpasswd工具来产生。
        }
                
        #禁止访问 .htxxx 文件
        location ~ /\.ht {
            deny all;
        }

        #字符集
        charset utf-8;
        
        #错误页面
        error_page   500 502 503 504 /50x.html;  
            location = /50x.html {
            root   /root;
        }
    }
}