Complete steps for Nginx proxy front-end and back-end separation projects with the same domain name

The front-end and back-end projects are separated, and the front-end and back-end share a domain name. The front-end and back-end projects are distinguished by the URL prefix after the domain name.

Take the vue + php project as an example. Directly go 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. Transfer to the front end for processing location /
 {
  # The static directory after front-end packaging alias /home/wwwroot/default/vue-demo/dist/;
 }

 # 2. Transfer to the backend for processing location /api/ {
  try_files $uri $uri/ /index.php?$query_string;
 }

 # 3. Finally, PHP is transferred to fpm here
 location ~ [^/]\.php(/|$)
 {
  # Backend 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. Processing backend static resources location /public/ {
  alias /home/wwwroot/default/demo/public/uploads/;
 }

 #error_page 404 /404.html;

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

Simple explanation

• When the domain name is followed by the prefix /api/, it will be forwarded to the backend for processing;
• When the /uploads/ prefix is ​​added after the domain name, the static resources on the backend are accessed.
• Due to the principle of accurate location matching, all visits other than the above will be forwarded to the first location to access the front-end page.
  

For example:

Access article list interface

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

Access uploaded images

GET upload/2022/web/xxx.jpg

Visit the front-end homepage

GET https://demo.com/

Visit the article page

GET https://demo.com/posts

PS: There must be a / at the end of the alias path.

Summarize

This is the end of this article about the Nginx proxy same domain name front-end and back-end separation project. For more related Nginx proxy same domain name front-end and back-end separation project content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!