Complete steps for deploying the front and rear end split nginx configuration

preface

It is a truism that here I would like to talk about the separation of the front and back ends of my understanding. The simple separation is nothing more than the separation of the original mvc view layer into an Servlet service and the connection between Servlet and http. The view Servlet container here can be any one of the server-side services, Tomcat, Apache, Nginx, IIS, whatever. Here is a brief introduction to the commonly used Nginx example.

Demand analysis

Start with a wave of demand analysis.

Single project Single project means that one server deploys one front-end service, www.xxx.com = > Single 1 point of index.html. Multiple projects Project refers to the deployment server 1 multiple front-end service, make www. xxx. com/a = > a.html,www.xxx.com/b = > b.html, etc. Request proxy. cookie domain rewrite. cookie path rewrite.

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

Common configuration

server{
 listen 80; #  Configure port 
 server_name _; #  Configuration of the domain name 
 charset utf-8; #  coding 
 access_log /xxx/log/nginx_access.log main; #  Successful log 
 error_log /xxx/log/nginx_error.log error; #  The error log 
 index index.html; #  Search file order 
 set $root /xxx/nginx/; #  Variable Settings, set the public path 
 
 #  The rest of the location
}

Please manually go to /xxx/log/ nginx_access.log and /xxx/log/ nginx_error.log to create the corresponding file. An error may be reported on the first execution of nginx reload.

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

Single item configuration

The directory structure

nginx
|----- index.html
|----- user.html

location configuration

location / {
	root $root;
}

Ok, so the simplest configuration is based on the root path and that's it, you can just configure a path through location and then point to index.html in the $root folder.

Multi-project configuration

The directory structure

nginx
|----- a
    |----- index.html
|----- b
    |----- index.html

Multiple location configurations

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

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

location / {
  root $root;
}

The only difference between root and alias is the difference between root, which refers to the absolute matching path of the file, and alias, which refers to the relative matching. root can be configured in http, server and location, while alias can only be configured in location. I also added the regular ^~, when matching /a or /b, no matter what the path of location is, the real path 1 of the resource must be the path specified by alias. This way I can make /a, /b have a jump fixed path after having a matching to the path, which is very useful in an spa front-end project, since there is only one index.html file in the core file. This way I can always skip to index.html to make sure that when the browser manually refreshes, it doesn't look for resources in other server paths based on the root path. Then set the root path of spa and /b to match.

Why is there such a need? The front end is lightweight, and we use this mechanism to achieve savings in server and contract type business. Like hope admin. xxxx. com/a = > Operations management platform, admin. xxxx. com/b = > erp management desk 1 sample. All we have to do with admin is cut out the subpaths. Simple and lightweight.

Forward requests

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

Here is very simple, I through regular match/api the request, through proxy_pass attribute, the request directed to http: / / api xxx. com. Can be

Modify cookie domain

Sometimes for security reasons, we will set 1 fixed cookie domain property, which is not very friendly for nginx forwarding. There are solutions, of course, and they're simple.

location {
  proxy_cookie_domain < This domain domain> < Want to modify the domain>;
}

Modify cookie path

When we forward back to api interface, sometimes the api domain name cannot get cookie, besides domain, there is also the possibility of cookie path. The solution, of course, is simple

location {
  proxy_cookie_path < The path to this field > < The path you want to modify >;
}

The follow-up to optimize

This is just one of the simplest examples of nginx configuration. In addition, nginx is very powerful to enable gzip, cache Settings, plug-in to merge resource requests, 50x, 40x pages, judge mobile terminal, pc terminal jump and so on.

conclusion