How to serve precompressed gzip/brotli files with .htaccess

Question

Im trying to serve precompressed gzip/brotli files for html, js and css. With the following code.

RewriteEngine on

    # Brotli
    # If the web browser accept brotli encoding… 
    RewriteCond %{HTTP:Accept-encoding} br
    # …and the web browser is fetching a probably pre-compressed file…
    RewriteCond %{REQUEST_URI} .*\.(css|html|js)
    # …and a matching pre-compressed file exists… 
    RewriteCond %{REQUEST_FILENAME}.br -s
    # …then rewrite the request to deliver the brotli file
    RewriteRule ^(.+) $1.br
    # For each file format set the correct mime type (otherwise brotli mime type is returned) and prevent Apache for recompressing the files
    RewriteRule "\.css\.br$" "-" [T=text/css,E=no-brotli,E=no-gzip]
    RewriteRule "\.html\.br$" "-" [T=text/html,E=no-brotli,E=no-gzip]
    RewriteRule "\.js\.br$" "-" [T=application/javascript,E=no-brotli,E=no-gzip]

    # Gzip
    # If the web browser accept gzip encoding… 
    RewriteCond %{HTTP:Accept-Encoding} gzip
    # …and the web browser is fetching a probably pre-compressed file…
    RewriteCond %{REQUEST_URI} .*\.(css|html|js)
    # …and a matching pre-compressed file exists… 
    RewriteCond %{REQUEST_FILENAME}.gz -s
    # …then rewrite the request to deliver the gzip file
    RewriteRule ^(.+) $1.gz
    # For each file format set the correct mime type (otherwise gzip mime type is returned) and prevent Apache for recompressing the files
    RewriteRule "\.css\.gz$" "-" [T=text/css,E=no-brotli,E=no-gzip]
    RewriteRule "\.html\.gz$" "-" [T=text/html,E=no-brotli,E=no-gzip]
    RewriteRule "\.js\.gz$" "-" [T=application/javascript,E=no-brotli,E=no-gzip]

    <FilesMatch "\.(css|html|js)\.br$">
        # Prevent mime module to set brazilian language header (because the file ends with .br)
        RemoveLanguage .br
        # Set the correct encoding type
        Header set Content-Encoding br
        # Force proxies to cache brotli & non-brotli files separately
        Header append Vary Accept-Encoding
    </FilesMatch>
    <FilesMatch "\.(css|html|js)\.gz$">
        # Serve correct encoding type
        Header set Content-Encoding gzip
        # Force proxies to cache gzip & non-gzip files separately
        Header append Vary Accept-Encoding
    </FilesMatch>

My Folderstructure looks like this:

• .htaccess
• index.php
• /css/
• /css/main.css
• /css/main.css.gz
• /css/main.css.br

But I get 404s when using the code above.

Answer 1

Setting the RewriteBase fixed it.

RewriteBase /

Answer 2

Writing this to help others. I had to add %{DOCUMENT_ROOT} in the RewriteCond to get it to work.

Essentially, change all RewriteCond to

RewriteCond %{DOCUMENT_ROOT}%{REQUEST_FILENAME}\.br -s