Isolating Components and Domains: Redirecting One AWS Amplify App to Another Subdomain

In the world of modern web development, keeping components isolated, maintaining clean codebases, and leveraging CI/CD pipelines are essential practices. But what if you want to maintain multiple repositories for different components while presenting them seamlessly under a single domain?

For example, in my use case, I have a portfolio website that I use to showcase some of my work. That website is a standalone Next.js application deployed using AWS Amplify. I then wanted to add a blog to the website to share my learnings and tutorials, but did not want to build it into the original application. I build this blog as a Headless WordPress application that I also deploy with AWS Amplify.

In this article, we’ll explore how to redirect one AWS Amplify app to the subdomain of another, allowing you to keep your components separate while presenting a unified user experience.

Why Separate Repositories?

Before diving into the technical aspects, let’s briefly discuss why you might want to keep components in separate repositories:

1. Isolation: Each component or service can have its own repository, enabling developers to work independently without interfering with other parts of the application.
2. Scalability: As your application grows, you can scale individual components without affecting the entire system.
3. CI/CD Flexibility: Separate repositories allow you to set up dedicated CI/CD pipelines for each component, making it easier to manage and deploy changes. AWS Amplify has a CICD component built in.

Step 1: Set Up Your Amplify Apps

Assuming you have already set up the Amplify apps for your components, ensure that they are correctly configured and deployed to their respective domains. You won’t be able to use the Amplify-provided domain, so you may need to see that up. In my example, I use softwareengineerportfolio.com as my primary domain.

Step 2: Add the Domain for the Subdomain Amplify App

1. At this point you should have two Amplify apps. Navigate to the app that you’ll want deployed to a subdomain of the other. For example, if you have softwareengineerportfolio.com and want to deploy an app to blog.softwareengineerportfolio.com, navigate to the app for the blog subdomain.
2. Navigate to Domain Management on the left panel.
3. Click on Add domain.
4. Add the domain of the first Amplify app. In my case, softwareengineerportfolio.com.
5. You should now see the domain listed in the Custom Domain section. You should now see the button for “Manage subdomains.”
6. Click Manage Subdomains.
7. Click the Add button.
8. Add a subdomain and click Update. In my example, I use “blog” as the subdomain.

Step 3: Testing and Monitoring

Ensure that the new subdomain works as expected by visiting the subdomain in a browser.

Conclusion:

By following these steps, you’ve successfully set up a subdomain redirection mechanism that allows you to keep components isolated in separate repositories while presenting them seamlessly under a single domain. This approach not only helps you manage your application’s complexity but also leverages the power of AWS Amplify for flexible, scalable, and isolated component development.

Now, you can continue to develop and scale your components independently, maintaining clean codebases and efficient CI/CD pipelines, all while providing a unified user experience.

Remember, the key to success lies in thoughtful planning, effective DNS configuration, and robust Lambda function development.

Happy building!