Shulou(Shulou.com)06/02 Report--

Preface

It's a clich é. Here we talk about the front and back end separation of my understanding. The simple separation is nothing more than peeling off the view layer of the original mvc, and an independent one becomes a Servlet service, and the Servlet is connected by http. The view Servlet container here can be any kind of server service, such as Tomcat, Apache, Nginx, IIS, etc. Here to the commonly used Nginx as an example to do a simple introduction.

Demand analysis

Let's start with a wave of demand analysis.

A single item item means that a server deploys a front-end service that makes www.xxx.com = > index.html a single point. Multi-project refers to the deployment of multiple front-end services on one server, so that www.xxx.com/a = > a.html.www.xxx.com b.html and so on. Request an agent. Cookie domain rewrite. Cookie path rewrite.

Tip: write conf.d/*.conf here so that the configuration can be processed separately.

Public allocation

Server {listen 80; # configure port server_name _; # configure domain name charset utf-8; # Encoding access_log / xxx/log/nginx_access.log main; # success log error_log / xxx/log/nginx_error.log error; # error log index index.html; # find file order set $root / xxx/nginx/; # variable setting, set common path # remaining location}

Please manually create the corresponding file under / xxx/log/nginx_access.log and / xxx/log/nginx_error.log. It is possible to execute nginx reload with an error the first time it executes.

The $root path of set is an absolute path, and access_log and error_log are also absolute paths.

Single project configuration

Directory structure

Nginx |-index.html |-user.html

Location configuration

Location / {root $root;}

All right, the simplest root-based configuration is fine, just configure a path through location, and then point to the file index.html in the $root folder.

Multi-project configuration

Directory structure

Nginx |-a |-index.html |-b |-index.html

Multiple location configuration

Location ^ ~ / a {alias $root/a;} location ^ ~ / b {alias $root/b;} location / {root $root;}

The only difference between a single project and a single project is that root differs from alias. Root refers to the absolute matching path of the file, while alias is a relative match. Root can be configured in http, server, and location, while alias can only be configured in location. This is the regular ^ ~ I added. When matching / an or / b, no matter what the path of location is, the real path of the resource must be the path specified by alias. In this way, I can let / a, / b have a jump fixed path after having a matching to path, which is very useful in spa-style front-end projects, because the core file actually has only one index.html file (the resource file says otherwise). In this way, I can always jump to index.html to ensure that when the browser refreshes manually, it will not look for resources in other paths of the server according to the root path. Then set that the root path of the spa and / b must match.

Why is there such a need? The front end is portable, and we use this mechanism in order to save server and cluster contract type business. Just like you want admin.xxxx.com/a = > Operations console, admin.xxxx.com/b = > erp console. All we have to do under the domain name admin is to cut out the subpath. Simple and light.

Request forwarding

Location ^ ~ / api {proxy_pass http://api.xxx.com/;}

This is very simple. I direct the request to http://api.xxx.com through the regular match / api request and the proxy_pass attribute. Can

Modify cookie domain

Sometimes for security reasons, we will set a certain domain property of cookie, which is very unfriendly for nginx forwarding. Of course, there is a solution, and it is also very simple.

Location {proxy_cookie_domain;}

Modify cookie path

When we forward it back to the api interface, sometimes the api domain name does not get cookie, and there is the possibility of cookie path in addition to domain. Of course, the solution is very simple.

Location {proxy_cookie_path;}

Follow-up optimization

This is only the simplest example of nginx configuration, and nginx is still very powerful to enable gzip, cache settings, plug-ins for merging resource requests, setting 50xMagne40x pages, judging mobile, pc hopping and other configurations.

Summary

The above is the whole content of this article. I hope the content of this article has a certain reference and learning value for everyone's study or work. Thank you for your support.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.