Deploy Caddy Nextjs Apps with Vanity Subdomains

Deploying Caddy Next.js apps with Vanity Subdomains is a fantastic way to give your applications a professional touch. This approach allows you to create custom subdomains for each of your apps.

Caddy's built-in support for Next.js makes it easy to get started. By using Caddy's automatic TLS and routing features, you can simplify the deployment process and focus on what matters most - building your application.

With Vanity Subdomains, you can create a unique subdomain for each of your apps, such as blog.example.com or store.example.com. This not only improves the user experience but also makes your applications more scalable and maintainable.

Setting up Caddy is a breeze, and it's a great choice for handling a variety of use cases. It's fast, easy to use, and makes provisioning SSL certificates a snap with Let's Encrypt.

Caddy is designed to be easy to set up, and you can confirm this by running the version command after installation. You should see a version number displayed.

To configure Caddy, you'll need to create a Caddyfile in the root of your project. This is where you'll specify the email address used for provisioning SSL certificates, the address and port that Caddy will listen on, and how to reverse proxy requests to your Next.js app.

Setting up a web server can be a daunting task, but Caddy makes it surprisingly easy. Caddy is a web server designed to be easy to use and handle a wide variety of use cases.

To get started, you'll need to install Caddy and then run the version command to ensure it's installed correctly. You should see a version number displayed.

Create a Caddyfile in the root of your project, which is where you'll configure Caddy to handle requests. The first line of the Caddyfile should include an email address for provisioning SSL certificates using Let's Encrypt.

The second line specifies the address and port that Caddy will listen on, which in this case is port 80, the default port for HTTP. You can use the default port or specify a different one if needed.

To forward requests to your Next.js app, you'll need to configure Caddy to reverse proxy requests to port 3000. This means that when a request comes in, Caddy will forward it to your Next.js app and then return the response to the client.

If Caddy is already running, you can use the caddy reload --config Caddyfile command to reload the configuration.

Domain setup is a crucial step in getting your Next.js app online. To set up your domain, you'll need to create A and CNAME records in your DNS provider.

First, create an A record for your domain, such as acme.com, and point it to the IP address of your server. Your DNS records should look like this:

Now, go to http://acme.com and you should see your Next.js app running. However, if you try to access https://acme.com, you'll get an error because SSL is not set up yet.

Caddy makes it easy to provision SSL certificates on the fly using Let's Encrypt. All we need to do is add the following to our Caddyfile: tls auto.

Caddy can provision SSL certificates for domains that don't have one. This means that when a request comes in for a domain that doesn't have an SSL certificate, Caddy will automatically provision one for it.

To implement on-demand TLS, we need to define an endpoint that Caddy will send an HTTP request to ask if it has permission to obtain and manage a certificate for the domain in the handshake. This endpoint is defined in the Caddyfile.

The first time you access a domain with an on-demand TLS setup, it will take a few seconds to provision the SSL certificate. However, if you try to access it again, it will be much faster because Caddy will use the cached certificate.

Caddy's on-demand TLS feature allows us to have fine-grained control over which domains we want to allow to be used as vanity subdomains. This is achieved by defining an API endpoint in our Next.js app that will take a domain as a parameter, do some validation, and then return a response to Caddy.

If the response is 200, Caddy will provision an SSL certificate for the domain. If the response is anything else, Caddy will return an error.

Dynamic content and rendering are key features of Caddy and Next.js.

You can render different content based on the domain using the request headers to get the domain.

For example, if someone requests a specific domain, you can use the getServerSideProps function to get the domain from the request headers, and then render the content based on the domain.

This technique can be used to render a status page for example.com and a status page for acme.com.

Going to a specific domain, like https://acme.com, should display content specific to that domain, such as "Hello world from acme.com".

To set up Caddy with NextJS, you'll need to map localhost.example.com to localhost. Run the command `sudo echo "localhost.example.com localhost" >> /etc/hosts` and add the mapping to the end of this file.

You'll also need to configure Caddy to handle requests for your vanity subdomains. This involves specifying the internal TLS settings, reverse proxy, and mapping paths to your NextJS app. For example, you can add the following lines to your Caddyfile:

After configuring Caddy, you'll see a popup on MacOS to allow Caddy to provision a certificate in your operating system. Simply provide the password and hit Update Settings to complete the setup.

To set up your local development environment, you'll need to map your domain to localhost. This is done by running a command and adding a mapping to a file.

First, you'll need to run the command `sudo nano /etc/hosts` and add the mapping to the end of the file. A sample mapping would be `localhost.example.com localhost`.

This ensures that the Caddy server doesn't go to the public internet to get certificates, which is especially helpful in an enterprise environment where you may not have control over the domain.

The mapping also ensures that the home page path maps to localhost:3000, and that all assets under the _next folder are mapped to localhost:3000.

Here are the specific lines you'll need to add to the file:

Once you've added these lines, you'll see a popup on MacOS to allow Caddy to provision a certificate in your operating system. Just provide the password and hit Update Settings.

Deploying a Next.js app with a subpath can be a bit tricky, but don't worry, I've got you covered.

To deploy a Next.js app using Caddy and a subpath, you'll need to configure Caddy to route the app to a subpath like /beta. However, this can cause issues with loading styles, assets, and JavaScript files.

Everything is fine in local development, but you'll encounter troubles when deploying the app using Caddy. This is because Caddy is looking for files behind the root / instead of the subpath /beta.

You can try changing the assetPrefix to '/beta', but this won't work because the files aren't actually located at /beta/file. This is a common issue when deploying Next.js apps with subpaths.

A workaround is to proxy also /_next and /static, but this has its limitations. You can't run multiple Next.js apps like /beta and /alpha, and it doesn't fix the navigation between pages.

Here are some common issues to watch out for when deploying Next.js apps with subpaths:

So, what can you do to fix this? It looks like the issue is with the Next.js part, not Caddy. You'll need to find a solution that works within Next.js itself.