实现在CentOS 6.9上搭建nginx1.14环境并利用nginx实现基于手机判别的页面跳转控制的方法是什么？

1 年 ago

新, 韵

2 minutes

在CentOS 6.9上建立nginx1.14环境，实现基于nginx的手机判断页面跳转控制的方法。

事前准备

请参考以下网站，确保已预先配置好CentOS 6.9环境，并使用Vagrant 2.0.3来进行CentOS 6.9环境的构建。

我正在做的事情

スマホ利用者でもPC版の画面を利用するケースがあるため、PCサイトへを選択した場合には、スマホユーザであってもPC側のサイトへアクセスできるようにする。（その逆も）

作为构建适用于智能手机的Web应用程序的方法，我认为有多种实现方法，如在服务器端的动态应用程序中实现过滤器功能并将其分派，以及可响应式处理等方式。

这次，我努力让nginx完成分派，并希望在服务器端实现一种机制，使用户无论是使用PC还是智能手机都不需要意识到。所以我尝试了这样的方法。

搭建nginx环境的步骤

因为太麻烦了，所以切换到root，并执行下述操作。

su -

使用TeraTerm等工具进行访问，并添加yum库以安装nginx。

如果不添加存储库，只会自动安装相当旧的版本吗？

vim /etc/yum.repos.d/nginx.repo

[nginx]
name=nginx repo
baseurl=http://nginx.org/packages/centos/6/$basearch/
gpgcheck=0
enabled=1

请先确认可安装的nginx版本。

yum list --enablerepo=nginx | grep nginx

nginx.x86_64                                1.14.0-1.el6.ngx            nginx
nginx-debug.x86_64                          1.8.0-1.el6.ngx             nginx
nginx-debuginfo.x86_64                      1.14.0-1.el6.ngx            nginx
nginx-module-geoip.x86_64                   1.14.0-1.el6.ngx            nginx
nginx-module-geoip-debuginfo.x86_64         1.14.0-1.el6.ngx            nginx
nginx-module-image-filter.x86_64            1.14.0-1.el6.ngx            nginx
nginx-module-image-filter-debuginfo.x86_64  1.14.0-1.el6.ngx            nginx
nginx-module-njs.x86_64                     1.14.0.0.2.0-1.el6.ngx      nginx
nginx-module-njs-debuginfo.x86_64           1.14.0.0.2.0-1.el6.ngx      nginx
nginx-module-perl.x86_64                    1.14.0-1.el6.ngx            nginx
nginx-module-perl-debuginfo.x86_64          1.14.0-1.el6.ngx            nginx
nginx-module-xslt.x86_64                    1.14.0-1.el6.ngx            nginx
nginx-module-xslt-debuginfo.x86_64          1.14.0-1.el6.ngx            nginx
nginx-nr-agent.noarch                       2.0.0-12.el6.ngx            nginx
pcp-pmda-nginx.x86_64                       3.10.9-9.el6                base

用下列命令安装nginx：

yum -y install --enablerepo=nginx nginx-1.14.0

启动nginx，并进行一次运行确认。

service nginx start

只需一种选项：访问以下URL（在Vagrantfile中定义的IP地址），如果显示Welcom页面，则说明nginx安装成功。

http://192.168.33.10/ 的意思是什么？

修改nginx的定义以进行手机判断

编辑nginx的配置文件。

从/etc/nginx/nginx.conf中被包含的配置文件。

vim /etc/nginx/conf.d/default.conf

server {
    listen       80;
    server_name  localhost;

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

    # スマホの判定とredirectの判定結果を保持する変数の定義
    set $sp_redirect_cookie "";

    # スマホ判定
    if ($http_user_agent ~* "(android|iphone|ipod|ipad|windows phone|meego|KFAPWI)") {
        set $sp_redirect_cookie true;
    }

    # スマホのredirect判定
    if ($request_uri ~* "(^/$|^/index.html$)") {
        set $sp_redirect_cookie "${sp_redirect_cookie}_true";
    }

    # Cookieに保持されたサイト表示
    if ($cookie_siteview = 'pc') {
        set $sp_redirect_cookie "${sp_redirect_cookie}_pc";
    }

    # 判定結果をデバッグログ出力
    # set $dbg_v $sp_redirect_cookie;
    # access_log /var/log/nginx/debug.log debug_log_fmt;

    # スマホ 且つ PC版のTopページへのアクセス 且つ Cookie「siteview」に「pc」と設定されていない場合のみ
    # スマホ専用のTopページへ強制リダイレクトする。
    if ($sp_redirect_cookie = "true_true") {
        rewrite ^ http://192.168.33.10/SP$request_uri? redirect;
        break;
    }

    # 公開ディレクトリとしてHTMLリソースを配置する場所の定義
    location / {
        root   /usr/share/nginx/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   /usr/share/nginx/html;
    }

    # proxy the PHP scripts to Apache listening on 127.0.0.1:80
    #
    #location ~ \.php$ {
    #    proxy_pass   http://127.0.0.1;
    #}

    # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
    #
}

将用于示例的HTML配置在 /usr/share/nginx/html 中，以验证是否正确地检测移动设备的功能。

使用Chrome浏览器的“切换设备工具栏”功能，转到nginx的首页或手机的首页，并在切换设备的同时进行操作确认。
※示例的HTML文件已经上传到GitHub上，可以利用它。

将示例HTML上传到/usr/share/nginx/html

请使用电脑浏览器访问 http://192.168.33.10/

通过IP地址(http://192.168.33.10/)访问iPhone。

我使用Chrome的隐私模式，在iPhone的用户代理下，通过访问http://192.168.33.10/来进行验证操作。在判断时，还会检查Cookie的信息。