Moving to Vercel

31/08/2022,

Lilly Helbling

Heroku has recently removed their free tier and while I wasn't a customer with them, it seems like lots of people on my Twitter feed were. Because of that, more of these "Platform as a service" providers started to come to my attention. I thought it can't hurt to see what all the noise was about and as my website is built with NextJS I thought it would be good to take a look at Vercel.

Setup

I was mentally already preparing for a long afternoon that would probably have nothing to show. After all, I did just spend the last 6 months or so really getting familiar with, and enjoying the benefits of managing things like Docker yourself. To read more about this journey, see my previous post about my Raspberry Pi homeserver.
But my god was I surprised. I went onto their website, looked at their pricing options to evaluate if the free tier would even be worth it, and less than 5 minutes later I had my website deployed!
I was genuinely shocked. Other than tweets and link previews not working as they require API keys that I hadn't provided yet, everything was in working order. It even set up SSL certificates for me! I created a new branch on git, pushed to it, and before I even switched to my browser window again, a build was already in progress. This was quicker than any GitHub self-hosted action runner or Jenkins agent would manage.
Honestly speaking, even though I have less control over what's happening under the hood, particularly with how middleware functions turn into serverless functions, it's such a smooth experience that I can justify the trade-offs. No server needs setting up, docker doesn't have to be installed, you don't need to sit and wait for an image to be built to then redeploy, and you don't even have to manage SSL certificates. It links in directly to your GitHub account to view your repositories, optional settings such as custom build scripts or environment variables can be passed in through easily, and using your existing custom domains is as simple as changing a single DNS entry.

Build only what you need

As nice as it is that vercel deploys every branch for you when you push to it, that also means that you can end up wasting pipeline minutes from your free-tier allowance.
Additionally, I don't think that non-production environments get torn down after a certain timeframe. While that is not an issue billing-wise as it follows a serverless pricing model, I could see myself getting easily confused between stale deployments.
There isn't quite a straightforward solution to this - I do hope that they will be able to add an allow-listing scheme per branch. There is a way to work around this, but it's not as straightforward as it should be.
In the project settings, under "Git" you can specify an "Ignore Build Step" script, which can point to a script that's part of your repository.

This script gets run every time a new deployment is queued. If it exits with a code 1 the build will continue, otherwise it will be aborted. There are a few different variables available at runtime which are described in the docs. Using this method, you can put together your own allow-list in the form of rules. While this offers advanced functionality, it's also the sort of feature that should primarily be handled through a GUI. Advanced users could then still create their own scripts if they wish to.

vercel.sh

#!/bin/bash echo "VERCEL_GIT_COMMIT_REF: $VERCEL_GIT_COMMIT_REF" if [ "$VERCEL_GIT_COMMIT_REF" == "main" ]; then echo "✅ - Building and deploying to helbling.uk" exit 1; elif [ "$VERCEL_GIT_COMMIT_REF" == "develop" ]; then echo "✅ - Building and deploying to dev.helbling.uk" exit 1; else echo "🛑 - Build cancelled" exit 0; fi

Moving to production

So this all sounds amazing, but what do you have to do to get this ready for production? First, I added a subdomain so that I can use my develop branch as a staging environment.
This gives me a way to make sure everything is in working order before promoting this to production. You can easily do this by binding a domain to a certain branch in the GUI which is a very welcome feature.

I enabled analytics just to make sure that the site is performing as it should, added my API keys as environment variables, and then promoted the environment to production.

Honestly, it was as easy as that. I couldn't believe it. I'm still incredibly happy that I learned all the underlying DevOps skills. It's a good skill to have, and it will absolutely come in helpful when things eventually go wrong. And it's not like I won't be using it anymore - Vercel will never be able to work for my home server.

Would I recommend this to professionals? Yes, I could absolutely see the use case where a startup wants to reduce its time-to-market and offer its developers a great building environment.
or individuals, if you have a project that needs hosting and don't want to worry about DevOps, billing or any potential burdens like that, Vercel is the way to go! I was very scepticable if solutions like it could be a feasible replacement to managing small-scale infrastructure yourself, but after around 2h in an afternoon I completely understand its value and appeal.
I wouldn't say it's a universal replacement, these solutions do have their limitations with the technologies they support and odds are you would still need to set up a database yourself somewhere. You would also be turning down an opportunity to get into DevOps and learn more about infrastructure in a low-risk environment. But with that in mind, if your tech stack is supported and you don't want to get your hands dirty, they are a great and cheap solution!