DEV Community: Fabian

Development & Production Environments

Fabian — Wed, 22 Jul 2026 08:45:43 +0000

Goal:

The goal is to setup the above basic architecture.

What remains is roughly(chatgpt):

Containerise Next.js locally
Run that container on Hetzner
Confirm it works internally on the server.
Point Nginx at the container
Replace the temporary static page with the real app.
Introduce Docker Compose
Manage the app more cleanly and prepare separate dev and production services.
Add dev.mynextjsapp.com
Separate environment variables, port, and password protection.
Add production public/private mode
Nginx authentication during maintenance.
Create a repeatable deployment process
Initially manual: build image, move/push it, pull it on Hetzner, restart the intended service, verify, roll back if needed.
Optional automation later
GitHub Container Registry and GitHub Actions. These are not required to launch.

Containers

Fabian — Thu, 16 Jul 2026 21:23:03 +0000

Goal:

Containerize our next.js app!

But what does containerizing even means?

Best analogy that helped me understand:

Dockerfile = recipe Image = prepared meal Container = meal being served

Resources:

I will be following this guide


## Next.js with standalone output

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  output: "standalone",
};

export default nextConfig;

What problem are we solving with the above code?

Normally when we run npm run build our project folder keep everything and we get that infamous massive node_modules folder. Now imagine putting all that into your Docker Image.

What does output: "standalone" actually do?

"Standalone output (output: "standalone") makes Next.js build a self-contained output that includes only the files and dependencies needed to run the application."-1.1

In my own words, once that trimming process is done it creates a lightweight server.js file. No need for heavy next CLI tool commands; a simple:

node server.js

to run our app and same lightweight file is used for deployments.

Docker Images

dhi.io - Docker Hardened Images (DHIs). They are base images pre-configured, patched and scanned by Docker to strip out unnecessary software and security vulnerabilities.

we run docker login dhi.io because we have to login before being able to docker pull. The hardened images are found in Docker's private catalog.

The 3-Stage Dockerfile:

[ Stage 1: dependencies ] ──(passes node_modules)──> [ Stage 2: builder ] ──(passes standalone app)──> [ Stage 3: runner ]
 (Installs packages)                                  (Compiles Next.js)                                (Final tiny image)

Stage 1: Download all NPM packages safely and quickly

Stage 2: Turns source code into lightweight Next.js standalone bundle.

How it works? grabs the installed node_modules from Stage 1, copies over the app code and runs npm build.

Result: Because we configured output: "standalone" in our config, Next.js creates a minimal .next/standalone folder containing only the specific code needed to run in production.

Stage 3: Turns source code into lightweight Next.js standalone bundle.

Stage 1 and Stage 2 are discarded. All we have left is public/ (static images or fonts), .next/standalone (our mini Node sever), .next/static (compiled CSS/JS assets) which are

.yaml:

The package.json version for my container environment.

Success:

Docker WSL Install

Fabian — Thu, 16 Jul 2026 21:07:24 +0000

Goal:

Have docker run on WSL

A little hiccup on download

So we have two distros running on wsl at the same time. Both isolated running in parallel.

I've learned that "Docker Desktop runs Docker Daemon(server) inside its own hidden minimal WSL 2 distribution(called docker-desktop)"-chatgpt(yes its time we quote AI lol)

fix

but what happened under the hood 🧐

you would not be reading this blog if the above statement doesn't keep you up at night.

symlinks!... to the rescue, once again! we've touched on these in my previous post.

upon toggling WSL Integration on for Ubuntu-24.04 Docker Desktop which adds a symlink named docker inside my /usr/bin/ that points to Docker Desktop's CLI tools running in the background.

what's next?

Containerize our next.js app!

Nginx

Fabian — Thu, 16 Jul 2026 20:59:19 +0000

Goal:

Have nginx serve a custom static html file.

Nginx

The front-desk receptionist to my web traffic.

Path setup

I added a new path '/var/www/app' inside
sudo nano /etc/nginx/sites-available/app.mynextjsapp.com

Here we are adding our custom html file.

sites-available vs sites-enabled

sites-available: the folder where you keep all your websites active or inactive
sites-enabled: a folder containing symbolic links(see below) to point to the active files inside sites-available.

Symlinks

A symbolic link is essentially a Linux shortcut

The -s flag in ln -s stands for symbolic.

I need both paths to point to the same direction. Currently they are two seperate folders.

sudo ln -s /etc/nginx/sites-available/app.mynextjsapp.com /etc/nginx/sites-enabled/app.mynextjsapp.com

I am basically saying:
"Create a shortcut named app.mynextjsapp.com inside /sites-enabled/ that points directly to the real file inside /sites-available/."

that's it. done.

I just created two subdomains

app.mynextjsapp.com
dev.mynextjsapp.com (will use later)

which both point to the same IPv4 address of my hetzner cloud server. this will later achieve two functional environments on one hetzner bill plan.

Nginx with let's encrypt

I followed this cool guide

now app.mynextjsapp.com can be accessed on https :)

Creating a Hetzner Cloud Server

Fabian — Tue, 07 Jul 2026 14:44:33 +0000

Day 1 - Renting my first Hetzner Server

Today I created my first Hetzner server. I didn't know I am simply renting CPU, RAM and SSD... I spun up a Ubuntu VM on top.

Setting up a firewall

"a good firewall blocks everything"

Port 22 SSH (the remote control to my server on an unsecured network)

(will add later)
Port 80 HTTP (standard unencrypted network traffic)
Port 443 HTTPS (web traffic secure i.e the little lock icon in tab)
ICMP (let's me ping the server)

SSH

for default path we can find it using ssh cat ~/.ssh/id_ed25519.pub

I can ssh into my server using

ssh root@MY_SERVER

Main Lesson

before running software, I need to control access.

Next Steps

making sure everything is secure!

Why SRE?

Fabian — Tue, 07 Jul 2026 13:02:48 +0000

Google pAIr mentoring program

Out of 1,500 applicants 15 of us were selected to take part in google's pAIr program, the first in Dublin HQ.

The program is designed to empower you to excel in securing your dream role at Google.

Mentorship

Each of us was assigned a mentor. I was very fortunate to meet Neil who has been working in SRE at Google for over a decade.

Plan

The targeted skill development aspect of the program really stuck out to me. After discussing with Neil we both agreed on a two month plan for me to really up skill in software reliability engineering.

I decided to document the entire journey.