Complete steps for the Nginx agent to separate the project from the front and back end of the domain name

  • 2020-12-16 06:20:08
  • OfStack

The front end separates the project and the back end shares one domain name. Distinguish between front and back end items by the url prefix after the domain name.

Take the vue + php project for example. Go directly to the nginx configuration of the server module.


server
 {
 listen 80;
 #listen [::]:80 default_server ipv6only=on;
 server_name demo.com; #  Configure project domain name 
 index index.html index.htm index.php;

 # 1. Forward to front-end processing 
 location /
 {
  #  Static directories packaged from the front end 
  alias /home/wwwroot/default/vue-demo/dist/;
 }

 # 2. Forward to back-end processing 
 location /api/ {
  try_files $uri $uri/ /index.php?$query_string;
 }

 # 3. In the end php Pass it on here fpm
 location ~ [^/]\.php(/|$)
 {
  #  The back-end project directory 
  root /home/wwwroot/default/demo/public/;
  #fastcgi_pass 127.0.0.1:9000;
  fastcgi_pass unix:/tmp/php-cgi.sock;
  fastcgi_index index.php;
  include fastcgi.conf;
  include pathinfo.conf;
 }

 # 4. Handle static resources on the back end 
 location /public/ {
  alias /home/wwwroot/default/demo/public/uploads/;
 }

 #error_page 404 /404.html;

 access_log /home/wwwlogs/access.log main;
}

Simple explanation

If the /api/ prefix exists after the domain name, it will be transferred to the back end. Access static resources on the back end when the /uploads/ prefix exists behind the domain name. Due to the location precision matching principle, all visits other than the above will be forwarded to the first location access front page.

Such as:

Access the article list interface


GET https://demo.com/api/posts

Access the uploaded images


GET https://demo.com/uploads/xxx.jpg

Visit the front page


GET https://demo.com/

Visit the article page


GET https://demo.com/posts

PS: The end 1 of the alias path must have /.

conclusion


Related articles: