Migrating Caddyfile from v1 to v2

Help
1

1. Caddy version (caddy version):

v2.1.1

2. How I run Caddy:

a. System environment:

AWS linux AMI EC2 instance (default instance type)

b. Command:

caddy start

d. My complete Caddyfile or JSON config:

burrowhq.com {
    root * /home/ec2-user/burrow/build
    file_server
    reverse_proxy /api/* localhost:5000
    try_files {path} /index.html
}

http://burrowhq.com {
    redir https://burrowhq.com
}

3. The problem I’m having:

I’m trying to use an older v1 Caddyfile I used on an older project:

robcorn.dev {
	root /home/ec2-user/personal/ui/build
	rewrite / {
		if {path} not_starts_with /api
		to {path} {path}/ /index.html
	}
	proxy /api localhost:5000
}

The v2 Caddyfile is returning the index.html file, but the browser seems to be unable to resolve the bundle files.

I basically want to do 2 things:

  • serve a react bundle from /home/ec2-user/burrow/build
  • reverse proxy all /api/* calls to localhost:5000

4. Error messages and/or full log output:

Browser errors:

Uncaught SyntaxError: Unexpected token '<' main.03e4ac8c.chunk.js:1 
Uncaught SyntaxError: Unexpected token '<' manifest.json:1 
Manifest: Line: 1, column: 1, Syntax error.

5. What I already tried:

I tried a number of variations of Caddyfile directives in the past 24 hours, but I think I have a knowledge gap here. Thanks in advance for any help!

6. Links to relevant resources:

Caddy for React Forum Thread

2

My hunch is that your try_files rewrite is being applied to your API requests as well possibly? That’s the main difference between your v1 and v2 configs. To exclude it, you should wrap it in a handle with a not matcher:

@notApi not path /api/*
handle @notApi {
    try_files {path} {path}/ /index.html
}

FYI, you don’t need that second site block for the HTTP->HTTPS redirect, Caddy will make this happen automatically:

If it’s still not working, you can enable the debug global option at the top of your Caddyfile to have some extra info appear in the logs to help show what’s going on:

2 Likes
3

Thank you for the quick reply!

I modified my Caddyfile to this:

{
	debug
}

burrowhq.com {
    root * /home/ec2-user/burrow/my-app/build
    @notApi not path /api/*
    handle @notApi {
        try_files {path} {path} /index.html
    }
    file_server
}

But I’m still unable to get this to work for https//burrowhq.com (haven’t tried the reverse proxy part yet, but it’s not serving the javascript bundle correctly). The index.html file is being served correctly, but it seems like when requesting other files in static, index.html is being returned as well (from investigating on the Chrome Network tab).

I added the debug part and got these logs:

2020/08/16 14:53:01.055	DEBUG	http.handlers.rewrite	rewrote request	{"request": {"method": "GET", "uri": "/", "proto": "HTTP/2.0", "remote_addr": "100.26.166.233:37472", "host": "burrowhq.com", "headers": {"Accept-Encoding": ["gzip"], "User-Agent": ["Go-http-client/2.0"]}, "tls": {"resumed": false, "version": 772, "ciphersuite": 4865, "proto": "h2", "proto_mutual": true, "server_name": "burrowhq.com"}}, "method": "GET", "uri": "/index.html"}
2020/08/16 14:54:01.090	DEBUG	http.handlers.rewrite	rewrote request	{"request": {"method": "GET", "uri": "/", "proto": "HTTP/2.0", "remote_addr": "100.26.166.233:37472", "host": "burrowhq.com", "headers": {"Accept-Encoding": ["gzip"], "User-Agent": ["Go-http-client/2.0"]}, "tls": {"resumed": false, "version": 772, "ciphersuite": 4865, "proto": "h2", "proto_mutual": true, "server_name": "burrowhq.com"}}, "method": "GET", "uri": "/index.html"}
2020/08/16 14:55:01.125	DEBUG	http.handlers.rewrite	rewrote request	{"request": {"method": "GET", "uri": "/", "proto": "HTTP/2.0", "remote_addr": "100.26.166.233:37472", "host": "burrowhq.com", "headers": {"Accept-Encoding": ["gzip"], "User-Agent": ["Go-http-client/2.0"]}, "tls": {"resumed": false, "version": 772, "ciphersuite": 4865, "proto": "h2", "proto_mutual": true, "server_name": "burrowhq.com"}}, "method": "GET", "uri": "/index.html"}
2020/08/16 14:55:08.375	DEBUG	http.handlers.rewrite	rewrote request	{"request": {"method": "GET", "uri": "/", "proto": "HTTP/2.0", "remote_addr": "96.239.119.109:52469", "host": "burrowhq.com", "headers": {"Accept-Language": ["en-US,en;q=0.9"], "If-Modified-Since": ["Sun, 16 Aug 2020 14:35:56 GMT"], "Upgrade-Insecure-Requests": ["1"], "Sec-Fetch-Mode": ["navigate"], "Sec-Fetch-Dest": ["document"], "Accept-Encoding": ["gzip, deflate, br"], "Sec-Fetch-User": ["?1"], "If-None-Match": ["\"qf5v7w1r8\""], "User-Agent": ["Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/84.0.4147.125 Safari/537.36"], "Accept": ["text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9"], "Purpose": ["prefetch"], "Sec-Fetch-Site": ["none"]}, "tls": {"resumed": false, "version": 772, "ciphersuite": 4865, "proto": "h2", "proto_mutual": true, "server_name": "burrowhq.com"}}, "method": "GET", "uri": "/index.html"}
2020/08/16 14:56:01.160	DEBUG	http.handlers.rewrite	rewrote request	{"request": {"method": "GET", "uri": "/", "proto": "HTTP/2.0", "remote_addr": "100.26.166.233:37472", "host": "burrowhq.com", "headers": {"Accept-Encoding": ["gzip"], "User-Agent": ["Go-http-client/2.0"]}, "tls": {"resumed": false, "version": 772, "ciphersuite": 4865, "proto": "h2", "proto_mutual": true, "server_name": "burrowhq.com"}}, "method": "GET", "uri": "/index.html"}

Please let me know if I can provide any more context here and thanks again for the help!

Btw removed the redundant redirect from http => https, good callout!

4

Can you run tree on your /home/ec2-user/burrow/my-app/build directory? You may need to install tree if you don’t already have it installed. It’ll show the file/directory structure of your project. It’s hard to know what to suggest without having a good idea of how that looks.

In the logs you posted, I’m only seeing GET requests to /, and nothing else. Do you have more logs you can show?

5

Actually, when I load https://burrowhq.com/ I’m not seeing any errors in the JS console, and the network tab shows that the assets requested do give proper results (.css gives actual CSS, .js gives actual JS) so it seems to work now?

6

You’re right, I realized there was an issue with the build folder. This is now working as expected. Thank you so much for all the help!

In case anyone else is going down a similar route this is the Caddyfile I ended up with:

burrowhq.com {
    root * /home/ec2-user/burrow/cra-client/build
    @notApi not path /api/*
    handle @notApi {
        try_files {path} {path} /index.html
    }
    reverse_proxy /api/* localhost:5000
    file_server
}
1 Like
7

This topic was automatically closed after 30 days. New replies are no longer allowed.