Configure NGINX Sub-Directory Reverse Proxy for Wordpress

Let’s say we have one front-end NGINX server web.example.com, and one back-end NGINX server app.example.com that serve multiple api end point app.example.com/app1 and app.example.com/app2.

Now, we want to configure so that when our users visit our website, they are presented with content from different back-end server.

  1. web.example.com/app1 display content from app.example.com/app1

  2. web.example.com/app2 display content from app.example.com/app2

First, we need to configure our front-end NGINX server by specifying which back-end server to proxy pass to at different sub-directory.

server {
    listen       80;
    server_name  web.example.com;

    # You can specify your log file location
    access_log  /var/log/nginx/access/web.log  main;
    error_log /var/log/nginx/error/web.log warn;

    location /api1/ {
        proxy_pass http://app.example.com/app1/;

        proxy_buffering                 on;
        proxy_buffer_size               128k;
        proxy_buffers                   4 128k;
        proxy_busy_buffers_size         256k;
        proxy_temp_file_write_size      256k;
        proxy_connect_timeout   60s;


        port_in_redirect off;
        proxy_redirect off;

        proxy_set_header Host $host;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

        client_max_body_size 128M;
    }

    location /api2/ {
        proxy_pass http://app.example.com/app2/;

        proxy_buffering                 on;
        proxy_buffer_size               128k;
        proxy_buffers                   4 128k;
        proxy_busy_buffers_size         256k;
        proxy_temp_file_write_size      256k;
        proxy_connect_timeout   60s;


        port_in_redirect off;
        proxy_redirect off;

        proxy_set_header Host $host;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

        client_max_body_size 128M;
    }
}

Next, we need to configure our back-end server to serve api at different url.

server {
    listen       80;
    server_name  app.example.com

    # You should have all your sub-directories under one root directory.
    # In this case, my wordpress directory has app1 and app2 as sub-directories.
    root   /usr/share/nginx/wordpress/;
    index index.php index.html index.htm;

    location /app1 {
        try_files $uri $uri/ /app1/index.php?$query_string;
        port_in_redirect off;
    }

    location /app2 {
        try_files $uri $uri/ /app2/index.php?$query_string;
        port_in_redirect off;
    }

    error_page 404 /404.html;
    error_page 500 502 503 504 /50x.html;
    location = /50x.html {
        root /usr/share/nginx/html;
    }

    # You need to install and setup php-fpm.
    location ~ \.php$ {
        try_files $uri =404;
        fastcgi_pass unix:/var/run/php-fpm/php-fpm.sock;
        fastcgi_index index.php;
        fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
        include fastcgi_params;
    }
}

Make sure to restart both of your NGINX server after configuration!

Now, your users should be able to get access to two different application app1 at web.example.com/app1 and app2 at web.example.com/app2.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s