Can I point a subdirectory URL to a different IP/Server? [closed]

Question

I have a React website at "domain.com," which is hosted on an AWS nginx server. The website frontend was developed using React, and the backend was developed using Python and Django. I also have a WordPress blog website that is hosted on a different AWS nginx Ubuntu server with an IP of http://11.222.333.444/.

I need to load the WordPress website fully from the URL "domain.com/blog" (like as a sub-directory). Is it possible? I think it is possible by creating a directory called "blog" on the domain.com server, but we can't create that due to some security issues. So we need to work the domain.com on a server, and domain.com/blog should load a WordPress website from a different server. I tried to customize the Nginx configuration by adding

location /blog {...//code//...}

This loads the WordPress website on the domain.com/blog/ URL, but not fully. It shows only the homepage and all the links on the WordPress website are still on the IP. There are some CORS and HTTPS issues, too. How can we run both websites without any issues, as I mentioned? Is there any option to do that?

Please let me know if there is any solution.

Thanks in advance.

Answer 1

To integrate a WordPress blog hosted on a separate server into your main React website under the path domain.com/blog, you'll need to update your Nginx configuration. The key is to use Nginx as a reverse proxy to forward requests from domain.com/blog to your WordPress server. Here's a detailed approach:

• Summary: Configure Nginx to reverse proxy requests to domain.com/blog to the WordPress server, ensuring to handle potential CORS and HTTPS issues.
• Nginx Configuration Snippet:

server {
    listen 80;
    server_name domain.com;

    location / {
        # Configuration for serving the React app
    }

    location /blog {
        proxy_pass http://11.222.333.444;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}

In this configuration:

• The proxy_pass directive forwards requests to your WordPress server.
• The proxy_set_header directives ensure that the WordPress server receives the correct host and protocol information, which is crucial for correctly generating links and handling HTTPS.

Make sure to replace http://11.222.333.444 with the actual IP address of your WordPress server. If your WordPress server is using HTTPS, change the proxy_pass URL to https://.

After updating the Nginx configuration, restart the Nginx service for the changes to take effect. This setup should resolve the issues with loading only the homepage and incorrect link URLs, as well as address potential CORS and HTTPS issues.

Update based on comment

You need to adjust both the WordPress configuration and potentially the Nginx configuration. This is often due to the way WordPress generates URLs for assets and internal links.

• Summary: Modify the WordPress wp-config.php file and potentially adjust the Nginx configuration to ensure correct asset loading.

• WordPress and Nginx Configuration Adjustments:

1. WordPress Configuration: In your wp-config.php file, set the WP_HOME and WP_SITEURL constants to ensure WordPress generates correct URLs for assets and links:

define('WP_HOME', 'http://example.com/blog');
define('WP_SITEURL', 'http://example.com/blog');

2. Nginx Configuration: Ensure that the Nginx configuration properly rewrites URLs for assets. You might need to add specific rules for handling static content:

location /blog {
    proxy_pass http://11.222.333.444;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection 'upgrade';
    proxy_set_header Host $host;
    proxy_cache_bypass $http_upgrade;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto $scheme;

    # Additional rules for handling static content
    location ~* \.(js|css|png|jpg|jpeg|gif|ico)$ {
        expires max;
        log_not_found off;
    }
}

Make sure to replace http://example.com/blog and http://11.222.333.444 with your actual domain and WordPress server IP. The additional Nginx location block within /blog is for caching static files (like images and stylesheets) to improve performance.

After making these changes, restart the WordPress and Nginx servers to apply the updates. This should resolve the issue with assets not loading correctly.