DEV Community

Goon Nguyen
Goon Nguyen

Posted on • Edited on

I turned my company’s PC into my own “Vercel-like” platform

Why?

  • Because… why not? (it’s FREE, lol)
  • Utilize the power of my own PC to build web apps faster (with zero build time cost).
  • Kubernetes is hard & pushing developers to learn it even harder, well, I learned it so you don't have to.
  • Unlike Vercel, with Kubernetes cluster, I (and my teammates) can deploy ANY apps.

Requirements

  • A computer (obviously!) with Ubuntu Server OS
    • Specification at least: 2 core, 4GB memory
    • Recommendation: 4 core, 8GB memory (because MicroK8S will take around 2,5GB of memory to run, but you will also need some for your applications)
    • DigitalOcean has some droplets with good pricing tiers.
  • MicroK8S to spin up a Kubernetes cluster
  • Lastly, this magical open-source tool: Diginext

Architecture

In this case, I use my company’s PC (Ubuntu Server OS, 1TB SSD drive, 8 core, 32GB of memory)

diginext-vercel-like-architecture.drawio.png

Install MicroK8S & deploy Diginext Server

curl -sfL https://diginext.site/install/microk8s | sh -
Enter fullscreen mode Exit fullscreen mode

After it’s finished, you can try to access this URL: http://server-ip-address, if you can see the log in / sign up screen, then your cluster is ready!

For example: http://192.168.0.52

Create new account

Navigate to: http://server-ip-address then create a new account.

Create new account

Then create your first workspace

Give your workspace a name, leave public unchecked if you don't want other people to freely access your workspace, then submit & you’re good to go.

Connect Diginext CLI to your workspace

To be able to deploy webapp to your MicroK8S cluster from your computer, you will need to install Diginext CLI and connect it to your Diginext workspace.

Open the terminal and install Diginext CLI with:

(If you don’t have Node.js 18+ installed, get it first)

npm i @topgroup/diginext --location=global
Enter fullscreen mode Exit fullscreen mode

After it’s finished, you can use dx commands.

But first, let’s connect your Diginext CLI to the workspace:

dx login http://your-ip-address
# the browser will open up, copy & paste the access token here
# you will see a success message
Enter fullscreen mode Exit fullscreen mode

Deploy a static webapp

  • Diginext Server need permissions to pull the git repository and start building, so let’s navigate to http://server-ip-address/git and connect your Bitbucket or Github account.

    connect your Github account

  • Diginext Server also need a container registry to store the build image, I will use Docker Hub in this example. Navigate to http://your-ip-address/infrastructure/registry/ and connect your Docker Hub with username & password.

    connect your Docker Hub

  • When it’s done, back to your Terminal and create a new app with dx new command & fill in the form:

    • Project: Hello World
    • App: Static Site
    • Framework: pick “Static Site Framework”
    • Git provider: select the one you have connected recently.
  • Navigate to the directory: cd ./helloworld-staticsite and you will see the source code of the framework, nothing special here, just a static html files and a Dockerfile

  • Deploy to your MicroK8S cluster using this command: dx up
    It will request your Diginext Server to pull the git repo of the webapp, then build the container image from the Dockerfile, and deploy it the MicroK8S cluster.

    • Cluster: pick “Default Cluster”
    • Use generated domain: YES
    • Port: 80
  • Now check out the link in the Terminal to see the build & deploy process, something like this:

    build & deploy process

When it’s finished, click on the auto-generated link, you will see your web app now going live, woohoo!

👉 Since I have only set up this server for internal use, if you want to publish it on the internet, you may need to expose some ports on your internet router and configure traffic routing / security guards to your metal server. However, this is beyond the scope of this article.

What’s next?

Learn more about the stories of Diginext.

Top comments (0)