Nignx는 PC와 휴대폰에 맞게 웹사이트를 구성합니다.

여러 기기에서의 웹사이트 호환성을 고려하여 많은 웹사이트에는 모바일 버전과 컴퓨터 버전이 모두 있습니다. 동일한 웹 사이트 URL에 접속할 때 서버는 사용자가 컴퓨터에서 접속하고 있음을 인식하면 사용자가 휴대폰에서 접속하는 경우 컴퓨터 버전의 페이지를 엽니다.

1. 클라이언트 기기 유형을 결정합니다

PC와 모바일 기기에 맞게 웹사이트를 구현하려면 먼저 정확한 판단이 가능해야 합니다. HTTP 요청 헤더에 있는 User-Agent는 클라이언트의 브라우저 유형을 구분할 수 있으며, User-Agent를 통해 클라이언트의 장치를 확인할 수 있습니다.

PC이든 휴대폰이든 운영체제와 브라우저가 다양하기 때문에 스스로 판단하기는 쉽지 않습니다. 다행스럽게도 User-Agent를 통해 PC와 휴대폰을 구별할 수 있는 오픈소스 외국 솔루션이 있는데, 이를 직접 사용할 수 있습니다. 이 기사에서는 Nginx를 사용합니다. 웹사이트에서 Nginx 구성을 다운로드하면 됩니다.

Nginx는 위의 구성을 통해 HTTP 요청의 User-Agent를 획득하고 정규식을 사용하여 모바일 장치를 일치시킵니다.

2. 기기에 따라 다른 페이지를 적용

먼저 PC 버전과 모바일 버전의 웹사이트 두 세트를 준비하고, 기기의 사전 판단을 통해 다른 버전으로 역방향 프록시를 수행합니다. :

set $mobile_rewrite do_not_perform;

if ($http_user_agent ~* "(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino") {
  set $mobile_rewrite perform;
}

if ($http_user_agent ~* "^(1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-)") {
  set $mobile_rewrite perform;
}

if ($mobile_rewrite = perform) {
  # 手机
}

역방향 프록시가 필요하지 않은 정적 페이지인 경우 Proxy_pass를 루트로 교체하세요.

3. 모바일 버전을 PC 버전에 연결

후 모바일 버전의 경우 기기의 오판으로 인해 PC 버전을 열어야 하거나, 사용자가 더 많은 정보를 얻고자 하는 경우에는 페이지를 열어야 할 수도 있습니다. 모바일 버전 페이지 하단에는 일반적으로 PC 버전 링크가 있습니다:

location / {
	proxy_pass http://192.168.20.1;  # 电脑版
	if ($mobile_rewrite = perform) {
		proxy_pass http://192.168.20.2;  # 手机版
	}
}

location / {
	root /html/pc;
	if ($mobile_rewrite = perform) {
		root /html/mobile;
	}
}

'PC 버전'을 클릭하면 JavaScript를 사용하여 쿠키를 설정할 수 있습니다. " link 이 기능을 구현하려면:

동시에 Nignx에 판단을 추가하세요. 이 쿠키가 포함된 경우 PC 버전으로 진입하세요.
4. 디버깅

위 구성을 완료한 후 Chrome 브라우저를 통해 휴대폰을 시뮬레이션할 수 있습니다.

<a href="http://xxx.com/"  = 'gotopc=true'">电脑版</a>

if ($http_cookie ~ 'gotopc=true') {
	set $mobile_rewrite do_not_perform;
}

마지막으로 완전한 Nginx 구성이 제공됩니다.

위 내용은 관련 내용을 포함하여 PC와 휴대폰에 적용할 수 있는 Nignx 구성 웹사이트를 소개하고 있어 PHP 튜토리얼에 관심이 있는 친구들에게 도움이 되기를 바랍니다.

server {  
	listen 80;
	
	set $mobile_rewrite do_not_perform;
	
	if ($http_user_agent ~* "(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino") {
		set $mobile_rewrite perform;
	}
	
	if ($http_user_agent ~* "^(1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-)") {
		set $mobile_rewrite perform;
	}
	
	if ($http_cookie ~ 'gotopc=true') {
		set $mobile_rewrite do_not_perform;
	}
	
	location / {
		proxy_pass http://192.168.20.1;  # 电脑版
		if ($mobile_rewrite = perform) {
			proxy_pass http://192.168.20.2;  # 手机版
		}
	}
}