How to build an AWS Serverless portfolio.

Why use bloated WordPress and pay monthly fees to host a portfolio website when AWS gives you 1 million free lambda requests a month then charges $0.20 per 1m requests thereafter?

We’re using AWS, which means you need an AWS account. The Serverless Framework link provided above has a guide and video on how to set up your account.

Next, create the serverless project.

Open up the project in your IDE (I use PyCharm) and you’ll notice 3 new files

You can read through serverless.yml but go ahead and delete all the commented out yaml. Then, add 3 new lines to the provider block.

Turning off versionFunctions saves us from running out of lambda space. AWS limits the total size of all the deployment packages that can be uploaded per region to 75gb. Each time we deploy this project there would be a copy generated. We don’t want this. Git and gitlab-ci should save you from having to use versions in Lambda. There are reasons to use versions but not for this project.

memorySize defaults to 128mb which is the absolute lowest AWS allows. Using 128mb will cause slow cold startup times and weak performance as AWS allocates a relative amount of cpu power to the chosen memory. It’s actually cheaper to use 512 because you’re billed per 100 milliseconds which includes the cold startup time. Using AWS X-Ray on your lambdas will clearly describe the differences.

region can be any region you’d like.

In order for us to serve binary data like images, fonts, and our favicon Api Gateway needs to know that our Lambdas will return base64 encoded responses instead of the normal application/json. To do this we need to add two plugins to our project that automates this process.

In serverless.yaml there should be three new lines. Two of which will be the names of the plugins.

Add a new block of yaml to serverless.yml which is required for apigw to properly work. Again, this block will configure Api Gateway to receive base64 encoded responses.

On to our functions and endpoints. I mentioned earlier that we only need two functions. The first function is to render the index.html and the other is to render all the assets. This can be done in one function but one of my requirements is to have this aesthetically pleasing which includes having a pretty URL without index.html being required to access the site.

Your entire serverless.yml file should look like the following.

Python

Onto the Python code. Create a sub directory called src then move handler.py into src.

Before going any deeper into code we should deploy the project to see if it works. Run the following command to deploy this project to our dev stage.

Your output should be similar to the below. Serverless will output GET endpoints. Visit the one without {proxy+}. Your browser will show a bunch of JSON.

Tailing the Logs

If it has failed there’s a neat feature within serverless that allows you to tail the logs of a function.

The Repository

handler.py

builder.py

The concept of injecting the data into our html is as follows but on a large file.

WARNING: Anything that resides inside the ui directory can be accessed.

handler.py

The Response Payload

Api Gateway always requires 2 fields in a response payload. body & statusCode. Body must ALWAYS be a string and status code must be a valid http status code recognized by modern browsers.

We’ve added headers and isBase64Encoded.

Deploy and check

There you have it. You should now have this static website running in Lambda and Api Gateway. You can always extend this to load your resume info from an S3 bucket and make some some of the html element count in the resume section dynamic. No server costs!

Related posts:

We all attend events, at times, especially when going to an event without early notice, they do feel like a waste of time. however, you can generate real value if you approach them in the right way…