Infrastructure can be intimidating. There’s a reason AWS is the most popular cloud platform in the world – it’s complex. That complexity is what allows AWS to be so powerful, but it can also be a huge barrier for people who aren’t already working with similar tools. We’ve talked a lot about the value of knowing the AWS platform, but knowing where to start is a problem of its own. In this guide, I want to go back to the basics of web development and talk about how to use a microservice hosted on AWS. To do this, we’ll create a simple web page that uses a serverless contact form that allows your users to send you emails.
Who is this guide for?
When we talk about learning AWS, we often talk about how you can use it to launch a new career in systems administration or operations. Of course, the platform isn’t only for “backend” or “systems” work. Services like AWS Lambda need to be integrated into the front end, and because AWS is so widely used, it’s important for web developers to have some familiarity with how it works. This guide is for web developers who want to know more about microservice architecture, but aren’t ready to learn the whole AWS platform from the ground up.
The word microservice sounds complex, but you don’t need to be an expert to start working with them. However, you do need a few things to get started:
- An AWS account – You can create one for free here.
- A microservice to use – We previously posted a guide on creating a serverless contact form using AWS Lambda. That’s what we’ll be integrating into our page (and we recommend you follow that guide before this one), but the principles and concepts we talk about will apply to other microservices based on AWS Lambda and API Gateway as well.
What will we be making?
In this guide, we’ll be integrating an existing contact form microservice into a web page. Before getting started, make sure to follow our guide on creating a serverless contact form. That guide handles the “backend” setup on AWS, and this guide will explain how to integrate it into an existing site. When we’re done, you’ll have a contact form that calls an AWS Lambda function that allows your users to send you an email through a form on your site.
What is a microservice?
This question could take up a guide of its own, but it’s important to understand before we get started. Microservice architecture means that your infrastructure (the servers that host your app) is made up of small, mostly independent pieces that are each responsible for a specific task. When you write an application, you use functions to perform certain tasks and separate responsibilities within your codebase.To use a rough analogy, microservices are to infrastructure as functions are to your code.Let’s say your application crashes. If your codebase is large enough, it could take a ton of work to isolate and fix the issue – and you may not be able to bring your application back online until you do. With a microservice architecture – using separate infrastructure to handle different tasks – you can often leave the rest of the app running while you fix one particular issue. The problem is isolated and has little or no impact on the rest of your code.You may have heard terms like serverless or functions as a service. Lambda is Amazon’s implementation of these concepts, and a microservice architecture is one way that it can be used to improve your site or application.
Integrating your first microservice
Deploying to production
This setup is fine for testing, or if you just want to see how things work. If you’re ready to start using a serverless contact form on your own site, however, you’ll need to take a couple more steps.First of all, remove mode: ‘no-cors’ from your Request object. Normally, you can’t make cross-origin requests from your local computer since its origin is set to ‘null.’ Adding this option to the request allows us to test locally, but it’s not necessary to make calls from your own site. In fact, leaving it in production may prevent you from being able to accurately handle errors in the Fetch response – it will cause you to get an opaque (empty) response, and you won’t have access to things like HTTP status codes or error messages.Finally, change the “Access-Control-Allow-Origin” header in API Gateway to your domain name. To find this setting, open your “/ContactFormLambda” resource in the API Gateway console, click the Actions menu at the top of the page, and select Enable CORS. The last field on this page will allow you to set this header to the domain name of the site on which you’ll use your contact form:
So why does this matter?
We talked about the benefits of microservice architecture a little bit before – it separates your services so that if one fails, your entire application doesn’t go down. For example, you might create another microservice that reads from your database, in addition to your contact form. If one of these services crash, the other can continue to run without requiring you to log into your server and restart your app.Another benefit is development speed. A “normal” architecture requires more testing to ensure that new code doesn’t interfere with the existing application. With microservices, a contact email and a database read, for example, are totally independent. You can make changes to one service, test that service, and deploy it immediately. New services can be added at any point without stressing about whether they’ll cause a breaking change.Microservices, like the contact form we created, are also easy to integrate into static sites. Over the last few years, static site generators have become incredibly popular, and for good reason – they’re fast, maintainable, and make it relatively easy to create a nice-looking site without much code. Microservices allow you to run a backend without all the maintenance that can scare people away from unmanaged hosting. They also provide a nice middle ground when creating your site – maybe you don’t need a full PHP or Rails application, but a static site just doesn’t quite do enough. Microservices with AWS Lambda allow you to handle traditional “server-side” operations by creating scripts like the one above and embedding them into your static pages.
The connection between web development and a complex platform like AWS isn’t always immediately clear. AWS is often thought of as a service for administrators, but with a little bit of knowledge, it’s not too difficult to get started using it in your own projects.I want to clarify something – what we’ve created here is not a full microservice architecture. It’s just an example of how you might build one and only shows one component. But with AWS Lambda, creating more services like our contact form submission is easier than ever. Because Lambda offers functions as a service, you can focus more on the code and less on the infrastructure that runs it. You can follow our guide on creating a serverless contact form and modify it to perform other tasks for you – sending text messages with AWS Simple Notification Service (SNS) might be a good next step. AWS offers dozens of services, so if you look around, you’re sure to find something interesting to play with.The best way to learn is by doing. You can read all the documentation in the world, but until you get your hands dirty, it’s difficult to truly develop your skills. If this guide got you excited about the power of AWS, there are plenty of projects you can try out at little or no cost. The microservice we created here is covered under the AWS free tier – which applies to new AWS accounts for 12 months from the date they’re created. AWS also published a static web hosting guide that covers a $0.50 (yes, that’s cents) per month setup. What’s important is getting in there and using the services – the knowledge and skills will come with experience.Of course, if you want a more formal training program, that’s what we’re here for. Our mission is to help people of all skill levels learn cloud computing through real-world scenarios and hands-on training. Let us know in the comments if you have questions, or better yet, sign up for a free community account and find out where your cloud learning journey will take you.
While the scope of this guide was meant to be limited to microservice implementation, we used a few web technologies and concepts that might warrant some extra research. Here are a couple links to get a more in-depth look than we provided here:That’s So Fetch (credit to Jake Archibald)Understanding CORSAWS Lambda Deep Dive