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