Last week I introduced
mujik, the capstone project that I am working on with my mates, Atharva and Gaurav. It is coming on rather well but we were weirdly asked to implement the entire UI for our project (at least re-create the mockups even if it is not functional). In the span of a week, we worked tirelessly to create the majority of our front end and surprisingly… it came out rather well. At least to our expectations.
Nothing Lasts Forever (Bye Vercel!)
We were all on board with the workflow I laid out in the last post; a CI/CD pipeline built with Github Actions and deployed to AWS ECS. We eventually decided to stick with Vercel. It was definitely a godsend when it came to giving immediate feedback to one another while we were developing. Well our free Pro Trial on Vercel is coming to an end and now we have to fork over $20 per member. I left a little bit of a cliffhanger last time when I mentioned…
Because of this, we are sticking to Vercel and when the need arises I will have to come up with a creative solution to create a reverse proxy which will point to the IP of our latest container through some magic with our GitHub Actions. Again, fun!
The time has now come to perform that magic trick. The problem to solve is the ability to preview builds of separate branches of our front end web app and have them hosted somewhere for everyone to see. For example, let’s say we have the
main branch hosted at
mujik.aloo.pw and a new branch
settingsPage was created by someone who is creating a new settings page for the app. I would like to be able to preview it at
I want to have all this functionality for as little money as possible. I am going to attempt to create something like this with my VPS that I have with Hetzner. It costs me about $4 a month, and it will sure beat paying $20 per member, a month. I’ll have to pay with my time though…
Laying out a solution
Since we have our code repository hosted on Github, I am going to make the use the webhooks provided. Every time an
event occurs a
POST request is made to a URL of our choosing. There is a list of events available here and we are specifically interested in the
delete events are called every time a branch or tag is created/deleted. So here’s what I am thinking the series of steps I need to take in order to have a “preview” of that branch up at the domain of my choosing.
This doesn’t seem too bad and we can just plug in
Jenkins here to make things easy but I am sure things are gonna get hairy when I try and implement this. The workflow should be about the same for when a
push event occurs. With just removing the step to create a
.conf file and restarting
nginx. As for when a
delete event occurs, simply deleting the
.conf files along with the directory in
/var/www should suffice.
However, now I have another problem. I now need to make sure that my VPS has all of the tools needed to build all of my artifacts and keep it up to date. Well this is where I would bring in Docker but for now let’s see what we can do. I almost forgot to mention how to handle the sub-domains. That can be easily solved by creating an alias for
*.cooldev.com to whatever the IP address of your VPS may be.
I am now going to actually start working on this and will report whether I was successful or just decided to fork over money to the people over at Vercel anyway. Guess we will see in part 2!
Note: While writing this I came across something that may solve this problem for me. It is an open source, self-hostable project called staticdeploy and it looks quite promising. I will look into it but I will try implementing my own solution for fun and see what I can come up with.