Article

The $4 Server

When I discovered Virtual Private Servers (VPS) were only $4 I had to find out if it really was possible to quickly and easily host projects for cheap instead of paying services like Vercel to do it. Turns out, it’s not that bad… Only if you have a step by step instruction manual on how to do it.

This is a compilation of those instructions that I have been using to host fullstackbrett .

1. Create VPS

I used Digital Ocean. In Digital Ocean you create a droplet.

For authentication, use SSH Keys.

On your local machine run the following:

ssh-keygen -f digitalocean

cat .ssh/id_rsa_digitalocean.pub

Copy and Paste this key into the SSH Key Box on Digital Ocean

2. SSH into the remote machine

mkdir .ssh

touch .ssh/authorized_keys

Copy the local machine .ssh/id_rsa.pub to the remote machine .ssh/authorized_keys

3. Using Docker w/ Next.js in the VPS

Add the following to your next.config.js

const nextConfig = {
  output: "standalone"
}

Create Dockerfile and .dockerignore

Run locally:

docker run -p 3000:3000 <repo-name>

Github Package Registry

github.com/<username> → Settings → Developer Settings → Personal Access Tokens → Tokens (classic)
Generate New Token → Generate New Token (classic)
- Note = project-name
- Expiration
- write:packages, read:packages, delete:packages selected
Generate Token
- Copy the personal access token (PAT) generate and save for later use

Build Docker Image and Upload to Github Package Registry

Build Image: docker build . --platform linux/amd64 -t ghcr.io/<username>/<reponame>
Login to Docker Registry: docker login ghcr.io
- Username: github-username
- Password: Personal Access Token (PAT) generated previously
docker push ghcr.io/<username>/<reponame>
Docker image should be showing in Packages Github tab

5. Running Docker Image on Digital Ocean Droplet

Check that Docker is installed with systemctl is-active docker
If it returns inactive
- Install Docker using apt-get install docker.io
- Rerun systemctl is-active docker to confirm active
Test docker with docker run hello-world
Login to Docker Registry: docker login ghcr.io
- Username: <github-username>
- Password: Personal Access Token (PAT) generated previously
Start container with docker run -d -p 3000:3000 --name <container-name> --restart always ghcr.io/<github-username>/<repo-name>

6. Setup SSL

Use certbot

Follow steps for Nginx → Linux (Snap)

7. Enable Firewall on Digital Ocean Droplet using ufw

See apps using ufw app list
Allow OpenSSH ufw allow OpenSSH
- If using nginx ufw allow "Nginx Full"
Enable ufw enable
See new rules ufw status
- This shows the only ports open

8. Setup Dockerfile (Supabase Edition)

Dockerfile:

FROM node:18-alpine AS base

# Install dependencies only when needed
FROM base AS deps
# Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3 to understand why libc6-compat might be needed.
RUN apk add --no-cache libc6-compat
WORKDIR /app

# Install dependencies based on the preferred package manager
COPY package.json yarn.lock* package-lock.json* pnpm-lock.yaml* ./
RUN \
  if [ -f yarn.lock ]; then yarn --frozen-lockfile; \
  elif [ -f package-lock.json ]; then npm ci; \
  elif [ -f pnpm-lock.yaml ]; then corepack enable pnpm && pnpm i --frozen-lockfile; \
  else echo "Lockfile not found." && exit 1; \
  fi


# Rebuild the source code only when needed
FROM base AS builder
WORKDIR /app
COPY --from=deps /app/node_modules ./node_modules
COPY . .

ARG NEXT_PUBLIC_SUPABASE_ANON_KEY
ARG NEXT_PUBLIC_SUPABASE_URL
ARG SUPABASE_SERVICE_ROLE_KEY
ENV NEXT_PUBLIC_SUPABASE_ANON_KEY=$NEXT_PUBLIC_SUPABASE_ANON_KEY
ENV NEXT_PUBLIC_SUPABASE_URL=$NEXT_PUBLIC_SUPABASE_URL
ENV SUPABASE_SERVICE_ROLE_KEY=$SUPABASE_SERVICE_ROLE_KEY

# Next.js collects completely anonymous telemetry data about general usage.
# Learn more here: https://nextjs.org/telemetry
# Uncomment the following line in case you want to disable telemetry during the build.
# ENV NEXT_TELEMETRY_DISABLED 1

RUN \
  if [ -f yarn.lock ]; then yarn run build; \
  elif [ -f package-lock.json ]; then npm run build; \
  elif [ -f pnpm-lock.yaml ]; then corepack enable pnpm && pnpm run build; \
  else echo "Lockfile not found." && exit 1; \
  fi

# Production image, copy all the files and run next
FROM base AS runner
WORKDIR /app

ENV NODE_ENV production

ARG NEXT_PUBLIC_SUPABASE_ANON_KEY
ARG NEXT_PUBLIC_SUPABASE_URL
ARG SUPABASE_SERVICE_ROLE_KEY
ENV NEXT_PUBLIC_SUPABASE_ANON_KEY=$NEXT_PUBLIC_SUPABASE_ANON_KEY
ENV NEXT_PUBLIC_SUPABASE_URL=$NEXT_PUBLIC_SUPABASE_URL
ENV SUPABASE_SERVICE_ROLE_KEY=$SUPABASE_SERVICE_ROLE_KEY

# Uncomment the following line in case you want to disable telemetry during runtime.
# ENV NEXT_TELEMETRY_DISABLED 1

RUN addgroup --system --gid 1001 nodejs
RUN adduser --system --uid 1001 nextjs

COPY --from=builder /app/public ./public

# Set the correct permission for prerender cache
RUN mkdir .next
RUN chown nextjs:nodejs .next

# Automatically leverage output traces to reduce image size
# https://nextjs.org/docs/advanced-features/output-file-tracing
COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static

USER nextjs

EXPOSE 3000

ENV PORT=3000

# server.js is created by next build from the standalone output
# https://nextjs.org/docs/pages/api-reference/next-config-js/output
CMD HOSTNAME="0.0.0.0" node server.js

9. Setup Github Actions

<repository-name> → Settings → Secrets and Variables → Actions
Setup Repository Secrets

DO_HOST: Droplet IP Address
DO_USERNAME: root
GHCR_PAT: PAT generated in step 3.3
SSH_PRIVATE_KEY: Private Key from step 1 (cat .ssh/id_rsa_digitalocean)
NEXT_PUBLIC_SUPABASE_ANON_KEY: from supabase
NEXT_PUBLIC_SUPABASE_URL: from supabase
SUPABASE_SERVICE_ROLE_KEY: from supabase

Create File: .github/workflows/docker-build-push.yaml

name: Docker Build, Push, and Deploy

on:
  push:
    branches: [main]
  pull_request:
    branches: [main]
  workflow_dispatch:

env:
  REGISTRY: ghcr.io
  IMAGE_NAME: ${{ github.repository }}

jobs:
  build-push-deploy:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout code
        uses: actions/checkout@v3

      - name: Log in to GitHub Container Registry
        uses: docker/login-action@v2
        with:
          registry: ${{ env.REGISTRY }}
          username: ${{ github.actor }}
          password: ${{ secrets.GHCR_PAT }}

      - name: Build and push Docker image
        uses: docker/build-push-action@v4
        with:
          context: .
          push: true
          tags: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}:latest
          platforms: linux/amd64
          build-args: |
            NEXT_PUBLIC_SUPABASE_ANON_KEY=${{ secrets.NEXT_PUBLIC_SUPABASE_ANON_KEY }}
            NEXT_PUBLIC_SUPABASE_URL=${{ secrets.NEXT_PUBLIC_SUPABASE_URL }}
            SUPABASE_SERVICE_ROLE_KEY=${{ secrets.SUPABASE_SERVICE_ROLE_KEY }}

      - name: Deploy to DigitalOcean
        env:
          SSH_PRIVATE_KEY: ${{ secrets.SSH_PRIVATE_KEY }}
          DO_HOST: ${{ secrets.DO_HOST }}
          DO_USERNAME: ${{ secrets.DO_USERNAME }}
        run: |
          echo "$SSH_PRIVATE_KEY" > private_key && chmod 600 private_key
          ssh -o StrictHostKeyChecking=no -i private_key ${DO_USERNAME}@${DO_HOST} '
            docker pull ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}:latest
            docker stop shipfast-test || true
            docker rm shipfast-test || true
            docker run -d -p 3000:3000 --name shipfast-test --restart always ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}:latest
          '

BONUS: Nginx Setup

Install Nginx
1. Inside your remote machine install nvm
  - e.g. curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.1/install.sh | bash
2. Run source ~/.bashrc to get nvm working
3. Install node using nvm install --lts
4. Install Nginx using apt-get install nginx
Update Nginx Config
1. cd /etc/nginx/
2. Create a file to contain your site configuration using touch sites-available/<project-name>
3. Add the following to your file /etc/nginx/sites-available/<project-name>

server {
  listen 80;
  server_name IP_ADDR;
  location / {
    proxy_pass http://localhost:3000;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection 'upgrade';
    proxy_set_header Host $host;
    proxy_cache_bypass $http_upgrade;
  }
}

Note: Update IP_ADDR with your ip address or domain name and update proxy_pass with correct internal port

Create symbolic link using ln -s /etc/nginx/sites-available/<project-name> /etc/nginx/sites-enabled/<project-name>

Check that everything is configured correct with nginx -t

Restart nginx using service nginx restart

Enable Firewall for Nginx
1. See apps using ufw app list
2. Allow OpenSSH and Nginx
  - ufw allow OpenSSH
  - ufw allow "Nginx Full"
3. Enable ufw enable
4. See new rules ufw status verbose
  - This shows the only ports available

More Resources