背景说明

 这两天公司前端开发工程师提出要求,在公司的主业务域名中加一个静态页面进去,在这里我就不透露公司的域名是什么,我们把域名估且为www.ganbing.com。这种需求很多公司是经常有的,写一个重定向啊、加个静态页面啊,实现跨域访问啊等等。

要求:在 http://www.ganbing.com 中添加一个operating的静态路径,正常访问效果如下图所示:
在阿里云的生产环境下:nginx同一域名下配置多个静态页面

结果:用 http://www.ganbing.com/operating/ 能访问到新添加的静态页面,最终实现的效果如下图所示:
在阿里云的生产环境下:nginx同一域名下配置多个静态页面

具体思路

  1. 测试环境:修改nginx.conf,并上传operating压缩包;
  2. 测试环境:重启nginx;
  3. 测试环境:验证;
  4. 生产环境:在阿里云跳板机把nginx.conf分发至nginx服务器;
  5. 生产环境:在阿里云跳板机上把operating压缩包分发至nginx服务器;
  6. 生产环境:在阿里云跳板机上重启nginx服务器;
  7. 生产环境:刷新阿里云CDN、并验证(如果没有CDN就直接验证);

PS:有些人可能会问,为什么不直接在生产环境的nginx服务器操作呢?一般情况下,公司业务在阿里云,业务服务器都不会配置公网IP,一般都是利用一台带公网IP的跳板机来管理这些业务服务器,然后在这台跳板机上安装ansible、saltstack等自动化运维配置工具来统一管理服务器。

测试环境配置验证

 由于公司的的业务都是在阿里云,你不可能直接在生产环境直接修改nginx.conf文件,一般都是先在测试环境实验一下,测试没问题然后在生产环境下修改配置并重启服务。
测试环境和生产环境都是一样的配置。

  1. 修改nginx.conf
[root@test html]# vim /usr/local/nginx/conf/nginx.conf
server {
    listen       80;              
    server_name  www.ganbing.com; 
    location / {
            root   html/web;
            index  index.html index.htm;
    }
    location  /h5/ {
            rewrite  ^.+h5/?(.*)$ /$1 break;
            include  uwsgi_params;
            proxy_pass   http://localhost:7080;
    }
    location  /javaes/ {
            rewrite  ^.+javaes/?(.*)$ /$1 break;
            include  uwsgi_params;
            proxy_pass   http://localhost:8888;
    }
    location ~ \.(js|css|html)$ {
            root   html/web;
            if_modified_since off;
            add_header Last-Modified "";
    }
    #下面这段location是新增加的内容
    location  ^~ /operating/ {          #区分大小写匹配operating
            root html;                  #operating的路径
            index index.html index.htm; #定义operating的首页索引文件
            access_log /usr/local/nginx/logs/operating.log; #把这个日志单独输出
    }
    location  /favicon.ico {
            log_not_found off;
            access_log off;
    }
}

PS:在上面的配置中,location ^~ /operating/ 这一段location是新增加的内容,注意root 根路径千万别写错了,我这里的nginx的目录在:/usr/local/nginx中,我把operating目录就放在/usr/local/nginx/html目录下面:

[root@test html]# pwd
/usr/local/nginx/html
[root@test html]# ls
boss  boss-admin  check  community  download  fastdfs.php  h5  operating  pic  regi  spider  web

PS:看到html目录下有很多静态目录吧,其中web目录就是www.ganbing.com的根目录,operating就是新增加的目录。

  1. 重启nginx服务,并验证
#先验证一下配置文件有没有问题
[root@test html]# /usr/local/nginx/sbin/nginx -t
ngx_http_fastdfs_set pid=19802
nginx: the configuration file /usr/local/nginx/conf/nginx.conf syntax is ok
nginx: configuration file /usr/local/nginx/conf/nginx.conf test is successful
#重新加载服务
[root@test html]# /usr/local/nginx/sbin/nginx -s reload

访问http://www.ganbing.com/operating 进行验证

也可以访问http://www.ganbing.com/ooperating/index.html 验证

在阿里云生产环境配置

  1. 登录跳板机(我这里的跳板机安装了ansible),上传operating压缩包,并分发至nginx服务器:
[root@manager02 ]#ansible nginxgroup -m copy -a 'src=/publish/operating.zip dest=/usr/local/nginx/html'

[root@manager02 ]#ansible nginxgroup -m shell -a 'cd /usr/local/nginx/html  && unzip -o operating.zip'

参数说明:

nginxgroup:定义好的nginx服务器的组名,在这个组里有3台nginx服务器。

-m copy :调用ansible中的copy模块;

src:源路径,也就是在ansible服务器中operating.zip的存放路径;

dest:目标路径,需要分发nginx服务器的路径;

  1. 分发nginx.conf文件至nginx服务器,并重启服务:
[root@manager02 ]#ansible nginxgroup -m copy -a 'src=/publish/nginx.conf dest=/usr/local/nginx/conf/

[root@manager02 ]#ansible nginxgroup -m shell -a '/usr/local/nginx/sbin/nginx -s reload

参数说明:
src=/publish/nginx.conf #跳板机nginx.conf的路径
dest=/usr/local/nginx/conf/ #需要被分发的nginx服务器nginx.conf存放目录的路径

  1. 刷新阿里云CDN,并验证:
    在阿里云的生产环境下:nginx同一域名下配置多个静态页面

CDN刷新你可以对URL或者目录进行刷新,按正规格式输入刷新的URL或目录即可。

刷新完CDN后,然后在浏览器访问测试是OK的,新增加的静态页面是可以访问的:

http://www.ganbing.com/operating/

小结

如果你不想把新增加的静态页面的日志单独输出的话,就不需要做任何配置,直接上传在根目录即可访问。