nginx config for external assets on local

readme.md

Setting Up a Proxy Configuration on Nginx for LocalWP Sites

This configuration will set up a proxy on Nginx to serve files from the production server when they are not available locally in the wp-content/uploads/ directory. This might be useful if you want to perform partial syncs using LocalWP.

Set Up Steps

1. Open Nginx Configuration File

   Open the Nginx configuration file for editing. This file is usually located at C:\Users\user\Local Sites\{{your-project}}\conf\nginx on Windows.

2. Add Proxy Configuration

   Add the following config to the nginx.conf.hbs file within the http block.

   http {
     # (...)
   
     # Define the cache path
     # Use / as path separator for Unix-based OS, and \\ for Windows OS
     proxy_cache_path "{{root}}\\wp-content\\cache" levels=1:2 keys_zone=nginx_cache:10m max_size=1g inactive=60m use_temp_path=off;
   
     # Log errors in debug mode
     # error_log "{{logs.errorLog}}" debug;
   
     # (...)
   }

   Now add the following config to the site.conf.hbs file within the server block. You must place this before any other location directives.

   server {
     # (...)
   
     # Replace missing local files in wp-content/uploads
     location ~* ^/wp-content/uploads/.*\.(?:js|css|jpe?g|gif|png|svg)$ {
         try_files $uri $uri/ @production;
     }
   
     location @production {
       resolver 8.8.8.8;
       proxy_ssl_server_name on;
       proxy_ssl_verify off;
   
       proxy_pass https://example.com$uri;
       add_header X-Served-By "Production-Proxy";
   
       # Cache configuration
       add_header X-Proxy-Cache $upstream_cache_status;
       proxy_cache nginx_cache;
       proxy_cache_valid 200 302 30m;
       proxy_cache_valid 404 5m;
       proxy_cache_use_stale error timeout updating invalid_header http_500 http_502 http_503 http_504;
       proxy_cache_background_update on;
     }
   
     # (...)
   }

3. Save and Close the File Save the changes and close the editor.

4. Reload Nginx Reload Nginx from the LocalWP dashboard to apply the new configuration.

Explanation

• location ~* ^/wp-content/uploads/.*\.(?:js|css|jpe?g|gif|png|svg)$: This block matches requests for specific file types in the wp-content/uploads directory.
• try_files $uri $uri/ @production: This directive tries to serve the requested file locally. If the file is not found, it passes the request to the @production location.
• location @production: This block defines the proxy settings for the production server.
  • resolver 8.8.8.8: Specifies the DNS resolver to use.
  • proxy_ssl_server_name on: Enables SSL server name indication.
  • proxy_ssl_verify off: Disables SSL certificate verification.
  • proxy_pass https://example.com$uri: Forwards the request to the production server.
  • add_header X-Served-By "Production-Proxy": Adds a custom header to the response.
  • proxy_cache nginx_cache: Enables caching.
  • proxy_cache_valid 200 302 30m: Sets cache validity times for 200 and 302 response codes to 30 minutes.
  • proxy_cache_valid 404 5m: Sets cache validity time for 404 response codes to 5 minutes.
  • proxy_cache_use_stale error timeout updating invalid_header http_500 http_502 http_503 http_504: Configures the use of stale cached responses for specified conditions.
  • proxy_cache_background_update on: Enables background updates of cached content.

nginx.conf.hbs

http {
  # (...)

  # Define the cache path
  proxy_cache_path "{{root}}\\wp-content\\cache" levels=1:2 keys_zone=nginx_cache:10m max_size=1g inactive=60m use_temp_path=off;

  # Log errors in debug mode
  # error_log "{{logs.errorLog}}" debug;

  # (...)
}

site.conf.hbs

server {
  # (...)

  # Replace missing local files in wp-content/uploads
  location ~* ^/wp-content/uploads/.*\.(?:js|css|jpe?g|gif|png|svg)$ {
      try_files $uri $uri/ @production;
  }

  location @production {
    resolver 8.8.8.8;
    proxy_ssl_server_name on;
    proxy_ssl_verify off;

    proxy_pass https://example.com$uri;
    add_header X-Served-By "Production-Proxy";

    # Cache configuration
    add_header X-Proxy-Cache $upstream_cache_status;
    proxy_cache nginx_cache;
    proxy_cache_valid 200 302 30m;
    proxy_cache_valid 404 5m;
    proxy_cache_use_stale error timeout updating invalid_header http_500 http_502 http_503 http_504;
    proxy_cache_background_update on;
  }

  # (...)
}