On the CentOS server, nginx distinguishes the mobile phone from the Computer Browser and enters the corresponding site.

Source: Internet
Author: User
Tags centos server

On the CentOS server, nginx distinguishes the mobile phone from the Computer Browser and enters the corresponding site.
This article describes how to use nginx to distinguish between PCs and mobile phones to access different websites. It is physically isolated from two sets of websites (one set of mobile terminals and one set of PCs ), in this way, the content on pc and mobile can be different. A mobile website does not need to contain a lot of content, as long as it contains necessary text and smaller images, this will save more traffic. The advantage will certainly increase the difficulty. The difficulty is that you need to maintain two sets of environments and automatically identify your physical devices and jump to the corresponding website, when an error is identified, You can manually switch back to the correct website.
Simple server implementation
There are two sets of website code, one is/usr/local/website/web, and the other is/usr/local/website/mobile. You only need to modify the configuration file of nginx. nginx uses UA to determine whether to access different content from different clients.
The disadvantage of this method is that the mobile terminal and PC end use the same domain name, and there is a black hat suspect, and UA is not always accurate, if the judgment is wrong, you cannot manually modify the website type.
The key Nginx configuration is as follows:

Location/{# default PC-side access content root/usr/local/website/web; # if it is mobile-side access content if ($ http_user_agent ~ "(MIDP) | (WAP) | (UP. browser) | (Smartphone) | (Obigo) | (Mobile) | (AU. browser) | (wxd. mms) | (WxdB. browser) | (CLDC) | (UP. link) | (KM. browser) | (UCWEB) | (SEMC \-Browser) | (Mini) | (Symbian) | (Palm) | (Nokia) | (Panasonic) | (MOT \-) | (SonyEricsson) | (NEC \-) | (Alcatel) | (Ericsson) | (BENQ) | (BenQ) | (Amoisonic) | (Amoi \-) | (Capitel) | (PHILIPS) | (SAMSUNG) | (Lenovo) | (Mitsu) | (Motorola) | (SHARP) | (WAPPER) | (LG \-) | (LG /) | (EG900) | (CECT) | (Compal) | (kejian) | (Bird) | (BIRD) | (G900/V1.0) | (Arima) | (CTL) | (TDG) | (Daxian) | (DAXIAN) | (DBTEL) | (Eastcom) | (EASTCOM) | (PANTECH) | (Dopod) | (Haier) | (HAIER) | (KONKA) | (KEJIAN) | (LENOVO) | (Soutec) | (SOUTEC) | (SAGEM) | (SEC \-) | (SED \-) | (EMOL \-) | (INNO55) | (ZTE) | (iPhone) | (Android) | (Windows CE) | (Wget) | (Java) | (curl) | (Opera) ") {root/usr/local/website/mobile;} index index.html index.htm ;}
Recommended nginx differences between mobile phone and PC Access methods
With frontend js and backend nginx, js sets the cookie to set the current page to be accessed.

Add the js Code for setting cookies. This code needs to be placed on all pages of mobile websites and PC websites.
function createCookie(name, value, days, domain, path) {  var expires = '';  if (days) {    var d = new Date();    d.setTime(d.getTime() + (days*24*60*60*1000));    expires = '; expires=' + d.toGMTString();  }  domain = domain ? '; domain=' + domain : '';  path = '; path=' + (path ? path : '/');  document.cookie = name + '=' + value + expires + path + domain;}function readCookie(name) {  var n = name + '=';  var cookies = document.cookie.split(';');  for (var i = 0; i < cookies.length; i++) {    var c = cookies[i].replace(/^\s+/, '');    if (c.indexOf(n) == 0) {      return c.substring(n.length);    }  }  return null;}function eraseCookie(name, domain, path) {  setCookie(name, '', -1, domain, path);}
The following configuration is added for nginx to determine whether access is performed on a mobile or PC based on UA and cookie.
if ($http_user_agent ~* '(Android|webOS|iPhone|iPod|BlackBerry)') {  set $mobile_request '1';}if ($http_cookie ~ 'mobile_request=full') {  set $mobile_request '';}if ($mobile_request = '1') {  rewrite ^.+ http://m.lvtao.net$uri;}
Add a PC link to the Mobile Page
When a user comes in by default, the user first determines the UA. If the user accesses the mobile phone, the user enters the mobile phone version. However, the user may incorrectly enter the mobile phone version or need more information to enter the PC version, then you need to put code on the mobile page so that you can switch from the mobile version to the web version and keep the settings for the next visit.
<A onclick = "setCookie ('iphone _ mode', 'full', 1, 'lvtao. net')" href = "http://www.lvtao.net"> Computer edition </a>
If you do not access the website correctly, click the PC link to go to the PC website. If you access the website again within 24 hours, you will remember the type settings of the website you visited last time.

Add a link to the mobile phone version of the PC website
Add the following link to your PC website so that you can switch to your mobile website.
<A onclick = "deleteCookie ('mobile _ mode', 'lvtao. net');" href = "http://m.lvtao.net"> mobile </a>
The complete nginx configuration, of course, removes the configuration unrelated to the functions in this article. It is not an available configuration, but an overall framework for everyone.

PC website Configuration
upstream app_server {  server 0.0.0.0:9001;}server {  listen 80;  server_name www.lvtao.net;  root /path/to/main_site;  # ...  location / {    proxy_set_header X-Real-IP $remote_addr;    # ...    if ($http_user_agent ~* '(Android|webOS|iPhone|iPod|BlackBerry)') {      set $mobile_request '1';    }    if ($http_cookie ~ 'mobile_request=full') {      set $mobile_request '';    }    if ($mobile_request = '1') {      rewrite ^.+ http://m.lvtao.net$uri;    }    # serve cached pages ...    if (!-f $request_filename) {      proxy_pass http://app_server;      break;    }  }}
Mobile Configuration
upstream m_app_server {server 0.0.0.0:9001;}server {  listen 80;  server_name m.lvtao.net;  root /path/to/mobile_site;  # ...  location / {    proxy_set_header X-Real-IP $remote_addr;    # ...    if ($http_user_agent ~* '(Android|webOS|iPhone|iPod|BlackBerry)') {      set $mobile_request '1';    }    if ($http_cookie ~ 'mobile_request=full') {      set $mobile_request '';    }    if ($mobile_request != '1') {      rewrite ^.+ http://www.lvtao.net$uri;    }    # serve cached pages ...    if (!-f $request_filename) {      proxy_pass http://m_app_server;      break;    }  }}

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.