CentOS 6.9へのnginx1.14環境構築とnginxによるスマホ判別のページ遷移制御の実現方法

事前準備

以下のサイトを参考に、CentOS6.9の環境が事前に構築済みであること
Vagrant2.0.3を使ったCentOS6.9の環境構築

やっていること

• PCの場合/index.htmlにデフォルトでつながり、スマホの場合/SP/index.htmlにつながるように設定
• スマホ利用者でもPC版の画面を利用するケースがあるため、PCサイトへを選択した場合には、スマホユーザであってもPC側のサイトへアクセスできるようにする。（その逆も）

スマホに対応したWebアプリケーションを構築する方法として、サーバサイドの動的アプリケーションで、フィルター機能を実装してディスパッチする方法や、レスポンシブ対応するなど様々な実現方法があると思います。
今回は、nginxに頑張ってもらって、ディスパッチし、サーバーサイドでは利用者がPCだろうがスマホだろうが意識しなくて済むような仕組みにしたいなぁと思ってこんなことやってみました。

nginxの環境構築手順

面倒なのでrootにスイッチして以下の操作を実施

su -

TeraTermなどを使用してアクセスし、nginxをインストールするためyumのリポジトリを追加する。

※リポジトリを追加しない場合、かなり古いバージョンしか自動でインストールされない？

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からincludeされている設定ファイル

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
    #
}

/usr/share/nginx/htmlにサンプル用のHTMLを配置しスマホ判別が正しく動作するか検証

Chromeブラウザの「Toggle device toolbar」を使用して、nginxのTOPページやスマホのTOPページへ遷移し、deviceを切り替えながら動作確認する。

※サンプルのHTMLはGitHubへにアップしているのでそれを利用する。

/usr/share/nginx/htmlにサンプルHTMLをアップする

http://192.168.33.10/ にPCブラウザでアクセスする

iPhoneとして http://192.168.33.10/ にアクセス

nginxで判断する際、Cookieの情報も確認しているため、シークレットモードでChromeを起動し、iPhoneのユーザエージェントで http://192.168.33.10/ にアクセスして動作検証しました。