DEV Community: satriaherman

Deploy Your Apps with 0 downtime Part 1 (Blue-Green Deployment)

satriaherman — Thu, 21 May 2026 08:25:54 +0000

Overview

Have you ever experienced your app can't be accessed whenever you release a new version of your app?. In this series, we'll explore how to deploy updates with zero downtime, starting with one of the most reliable strategies — Blue-Green Deployment.

When we deploy an application on Cloud provider like AWS, Azure or GCP, we usually do like this:

Shutting down the app
compiled new version code
Start app again

Looks like there's no problem with steps above until we noticed that our app is getting down or can't be accessed during the deployment process. we call this situation as downtime.

In this article we will learn how to prevent that using a one of deployment strategies called Blue-Green Deployment.

What it is Blue-Green Deployment?

Blue-Green Deployment is a strategy which we will switch the traffic from previous version instances(blue) to another identical new release instances(green) which are running on production environment. To achieve this goal, load balancer is playing crucial function to switching traffic

In this tutorial, we will use docker as a container manager and nginx as load balancer. We will deploy nextjs app and simulate it to achieve 0 downtime by using blue green deployment

Before we started, make sure you already install software bellow:

Notes: make sure you are familiar with linux environment

Install Docker and Nginx

open wsl and type bellow to install nginx

sudo apt install nginx

after nginx installed we will install docker,nodejs and git

sudo apt install docker nodejs git

after you installed the tools above, please create directory following image bellow

Setup Docker

We will use docker compose to run the app and nginx inside the container. so on Dockerfile, write this code

FROM node:20-alpine

WORKDIR /app

COPY package*.json ./

RUN npm install

COPY . .

RUN npm run build

EXPOSE 3000

CMD ["npm", "start"]

Before Implement Blue Green Deployment

Before we start to setup the blue green deployment. i will show you the deployment before implement Blue Green deployment. i will write the docker-compose.yml like this.

services:
  app:
    build: ./app
    container_name: app
    ports:
      - "5001:3000"


  nginx:
    image: nginx:latest
    container_name: nginx-bluegreen
    ports:
      - "80:80"
    volumes:
      - ./nginx/nginx.conf:/etc/nginx/nginx.conf
      - ./nginx/active_backend.conf:/etc/nginx/conf.d/active_backend.conf

and for nginx.conf

events {}

http {



    server {
        listen 80;

        location / {
            proxy_pass http://host.docker.internal:5001;

            proxy_http_version 1.1;

            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection "upgrade";

            proxy_set_header Host $host;
        }
    }
}

and then i will write the deployment script on deploy.sh

#!/bin/bash

set -e

echo "================================="
echo "Starting Deployment..."
echo "================================="

echo ""
echo "[1/5] Building container..."

docker compose build app

echo ""
echo "[2/5] Stopping old container..."

docker compose stop app

echo ""
echo "[3/5] Removing old container..."

docker compose rm -f app

echo ""
echo "[4/5] Starting new container..."

docker compose up -d --no-deps app

echo ""
echo "[5/5] Running health check..."

sleep 5

STATUS=$(curl -s -o /dev/null -w "%{http_code}" http://localhost/api/health-check)

if [ "$STATUS" != "200" ]; then
    echo "Deployment failed!"
    exit 1
fi

echo ""
echo "================================="
echo "Deployment Success!"
echo "================================="

the i will running the container using docker compose

docker compose up

and now when i visit http://localhost the page will showing

now i will run ./deploy.sh to simulate the deployment process. when i refresh the page many times, i got the 502 bad gateway we called this as downtime

the downtime occur because i need to stop the container while i building new image version. so, the page will unavailable for some time. to prevent the downtime we need to create 2 app, one for active app and one for standby app. so when new release detected, we will rebuild the standby app, do the healthy check to make sure the app is healthy, then when app is detected as healthy app, we switch the traffic to new release app. here's the ilustration

Implement Blue Green

To Implement the Blue Green deployment, we will change our deployment mechanism like this:

deploy 2 services called app_blue and app_green
configure the nginx to route the traffic to app_blue
write the current active app to "blue"
new deployment detected
rebuild app_green
do health check the app_green
if healthy switch traffic to app_green
write the current active app to "green"

Create Healthy Check Route

Inside the nextjs app, we will create a route to indicates that the application is running well and healthy

open app/api/health-check/route.ts and write the code below:

export async function GET() {
  return Response.json({
    ok: true
  })
}

run your app

npm run dev

then test the script by running

curl http://localhost:3000/api/health-check

it should return

{"ok":true}

after that, we will setup the docker compose to running 2 nextjs app and nginx as load balancer.

services:
  app_blue:
    build: ./app
    container_name: app-blue
    ports:
      - "5001:3000"

  app_green:
    build: ./app
    container_name: app-green
    ports:
      - "5002:3000"

  nginx:
    image: nginx:latest
    container_name: nginx-bluegreen
    ports:
      - "80:80"
    volumes:
      - ./nginx/nginx.conf:/etc/nginx/nginx.conf
      - ./nginx/active_backend.conf:/etc/nginx/conf.d/active_backend.conf

on code above, we created 2 services for apps that running on port 5001and 5002. and we created nginx services as a load balancer that will switch the traffic everytime when the new deployment found.

Setup Nginx

open nginx folder on the root folder and create nginx.conf

events {}

http {

    include /etc/nginx/conf.d/active_backend.conf;

    server {
        listen 80;

        location / {
            proxy_pass http://active_backend;

            proxy_http_version 1.1;

            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection "upgrade";

            proxy_set_header Host $host;
        }
    }
}

In nginx.conf, we forward all requests to the active backend defined in active_backend.conf, which is imported from the nginx folder.

on active_backend.conf we will write this configuration file

upstream active_backend {
    server host.docker.internal:5001;
}

on active_backend.conf we created the upstream named active_backend. the active_backend is route all request to localhost:5001 that running under the docker container. so we must define host.docker.internal:5001

Store Current Active App

To store current active app. we will create new file called active_slot which is contain txt content

green

Deployment Script

We will create file deploy.sh to simulate our deployment script including :

check the active app
rebuild the standby app
hit the health check of new release app
switching the traffic to new release app

#!/bin/bash

set -e

ACTIVE=$(cat active_slot)

if [ "$ACTIVE" = "blue" ]; then
    TARGET="green"
    TARGET_PORT=5002
    TARGET_SERVICE="app_green"
else
    TARGET="blue"
    TARGET_PORT=5001
    TARGET_SERVICE="app_blue"
fi

echo "============================"
echo "Current Active : $ACTIVE"
echo "Deploy Target  : $TARGET"
echo "============================"

echo ""
echo "[1/5] Rebuilding $TARGET_SERVICE..."

docker compose build $TARGET_SERVICE
docker compose up -d --no-deps $TARGET_SERVICE

echo ""
echo "[2/5] Waiting app startup..."

sleep 10

echo ""
echo "[3/5] Running health check..."

for i in {1..20}
do
    STATUS=$(curl -s -o /dev/null -w "%{http_code}" http://localhost:$TARGET_PORT/api/health-check)

    if [ "$STATUS" = "200" ]; then
        echo "Health check success!"
        break
    fi

    echo "Retry $i..."
    sleep 3
done

if [ "$STATUS" != "200" ]; then
    echo "Health check failed!"
    exit 1
fi

echo ""
echo "[4/5] Switching nginx traffic..."

cat > nginx/active_backend.conf <<EOF
upstream active_backend {
    server host.docker.internal:$TARGET_PORT;
}
EOF

docker exec nginx-bluegreen nginx -s reload

echo "$TARGET" > active_slot

echo ""
echo "[5/5] Deployment success!"
echo ""
echo "Active slot now: $TARGET"

look at

docker compose build $TARGET_SERVICE
docker compose up -d --no-deps $TARGET_SERVICE

because we are running 2 services from same image we need to add

--no-deps

options to prevent the docker restart the active app while it rebuild the image. so the active app can still running.

edit page.tsx and run the deploy.sh. now the downtime is gone while we deploy new version in our app

Never Put Sensitive Data in Your JWT Payload

satriaherman — Fri, 14 Nov 2025 03:34:36 +0000

Overview

Do you use JWT for your Authentication?. What the data do you store in the JWT payload?. some non-sensitive data like user_id or sensitive data like password?. If you storing sensitive data in your JWT Payload you should stop it from now.

In this article i will give you the reason why you shouldn't store sensitive data in your JWT payload

What is JSON Web Token?

Json Web Token(JWT) is an open standard used for transmitting data between applications in JSON format. JWT is digitally signed in the backend app, so the data cannot be modified by other parties.

JWT Structure

by default, JWT structure consists 3 part. Header, Payload dan Signature. Every part is separated by dot symbols (.). So, it will looks like

header.payload.signature

And Here's the example of JSON Web Token

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNzA4MzQ1MTIzLCJleHAiOjE3MDgzNTUxMjN9.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c

Header

Header is containing information the type of token and signing algorithm which is encoded in base64.

when you go to base64-decode and decode this header

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9

it will showing

{"alg":"HS256","typ":"JWT"}

Payload

Basically Payload is the data that you want to send or people call it claims. claims is divided into 2 type public claims and private claims

Registered Claims

registered claims is type of claims that already registered by jwt.io which recognized as a global standard. the example of registered claims are:

iss
sub
aud
exp
nbf
iat
jti

to see full registered claims, you can visit this link

Public Claims

Public Claims is common claims that created by developer. this claims is usually used by most developers. Developers recommended to register this claims to IANA JWT registry to avoid the collision between claims that has same meaning

Private Claims

Private Claims is custom claims which used by developer to share information between parties and already agree by each parties. This Claims usually used to share information that not included in registered claims and public claims

Now, try to decode the payload on base64-decode

eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNzA4MzQ1MTIzLCJleHAiOjE3MDgzNTUxMjN9

And this is what you got

{"sub":"1234567890","name":"John Doe","iat":1708345123,"exp":1708355123}

Looks, the data can be decoded easily!!!. This is the reason why you you should not storing sensitive data in your JWT Payload

Signature

Signature is used to Verify if the data is coming from valid parties. This is what makes JWT is secure. let me explain

Signature is containing encoded header, the encoded payload and a secret. they are signed using algorithm that defined in header.

For example, we are using HMACSHA256 algorithm to sign the signature. The system will created the signature like this

HMACSHA256(
  base64UrlEncode(header) + "." +
  base64UrlEncode(payload),
  secret)

When we send jwt token to backend, the backend will verify if the token has valid signature. with this concept, the hacker cannot abuse the system by modifying the payload. without secret key the hacker cannot generate the valid signature

Conclusion

Payload in JWT can be decoded and accessible for public. so, be aware with the data that you sent in payload.

Hacker cannot generate valid signature without secret key. Make sure your secret key is safe

How Race Conditions Can Break Your System?

satriaherman — Thu, 06 Nov 2025 04:47:02 +0000

Overview

Singleton, is a one of most popular design pattern. The main purpose is to saving memory by reuse and sharing one instance rather than create a new one. It sounds like a great concept, but it could be a "Boomerang" if we implement that concept in the wrong case.

Helo, i am Satria. Currently i'm working on Tech Company as a Software Engineer. In this article i will share about my experience in implementing Singleton Design Pattern in the wrong case. So, let's go.

Problem Started

The Incident is started when i created an application to manage the budgeting system in our company. It is using PostgreSQL as a Database Management System. The application that i built is a part of Company's Super App.

When I looked at the code in the Super App, i notice that everytime when we need to query to database, we always use the same database connection and database session that declared as a global variable. here's the sample code

embed engine = create_engine(url)
Session = sessionmaker(bind=engine)
db = Session()

Everytime we need to querying to database, we always use db variable. For the first time, i thought

Hmm, This is good. we can reduce the memory usage

Everything going well when i test and debug the application by myself. But the problem occuring when i entering the UAT Process. A lot of issues coming from users in day 1,and 60% of issues is about Inconsistency Data. on the next day the same issue is still coming. and Users put the comment like this

Why my proposal data is not found?, Why my proposal data is different than i created before, why the approval process is stuck?

Resolving The Problem

At First i thought that the problem is coming from relationship between the table. So, i double-checked on the model and database schema. But, i found no problem with that. i also check the query to database, and still didn't find the problem, the query is fine.

I tried all flow of the application again, and still didn't find t the problem. I’m really stressed out by this issue, I spent 3 days just trying to find the problem. On day 3, i remember that my application is using same database session for all query. And when i check on entry point file, our app is using 4 worker and every worker can running up to 50 threads. That's caused the race condition because one database session is used by more than one Thread. So, i tried to refactor my code and create new database session in every function.

def create_proposal():
  db_session = Session()
  try{
   ....
  except:
   db_session.rollback()
  finally:
   db_session.close()

After i refactoring the code like above, The related issue is gone. And my application is ready to serve on Production.

Conclusion

Singleton is a good concept to reduce memory usage. but not all type of instances is good to use singleton. In this case, database connection is suitable to use Singleton, because the data doesn't change everytime it's used. But implementing a Singleton for a database session is a bad practice, because a database session can change every time it is used.

Manipulasi DOM Di Reactjs

satriaherman — Thu, 11 Nov 2021 07:49:49 +0000

Halo semua, apa kabar nih?. Semoga kabarnya baik-baik saja. Kali ini gw akan membahas tentang "gimana caranya manipulasi DOM di Reactjs?".

Pendahuluan

Sebelumnya gw mau kasih tau kalo React menggunakan Virtual DOM dalam memanipulasi element HTML nya. Nah sih virtual DOM itu?. Virtual DOM adalah sebuah copy dari DOM yang memiliki property yang sama seperti DOM aslinya. Singkatnya gini jika kita membuat sebuah component dengan nama "Button" di React, maka React akan merender Component Button tersebut kedalam element HTML dan juga membuat Copy dari Element Button itu. nah copy dari element Button ini lah yang disebut "Virtual DOM". Nah pasti ada yang nanya?.

"Bang kenapa harus buat copy element itu dulu?, kan udah ada element yang di render?

Nah ini adalah cara react untuk meminimalisir interaksi antar DOM yang tidak perlu. Misal jika kita punya 10 element list. dan kita ingin mengupdate list yang ketiga saja. Maka browser akan mengupdate semua list yang ada. ini akan berdampak pada performa website kita, karena kita mengupdate DOM yang sebenarnya tidak diperlukan. Untuk inilah Virtual DOM hadir sebagai penyelesaian dari masalah ini. Dengan Virtual DOM kita akan meminimalisir terjadinya interaksi antar DOM yang tidak perlu. Virtual DOM akan mengecek perubahan yang ada lalu melakukan update pada DOM yang berubah saja. Sehingga component lain yang tidak dirubah tidak akan diupdate dan dirender ulang.

ilustrasi Virtual DOM

Memanipulasi Virtual DOM

Nah untuk memanipulasi Virtual DOM di Reactjs kita bisa memakai 2 cara yaitu :

Menggunakan State
Menggunakan Ref

kedua cara diatas akan kita praktekkan dalam kesempatan kali ini

1 Menggunakan State

Untuk manipulasi Virtual DOM menggunakan state ini hanya bisa memanipulasi properti sederhana seperti mengganti class dan id.

contoh :

di app.js kita inisialisasikan dulu state nya

const [background, setBackground] = useState('red')

lalu kita buat component button yang akan mentrigger perubahan state nya

return (
    <div className="App">
      <button className={background} onClick={changeBackground}>
        change Background
      </button>
    </div>
  )

setelah itu kita buat function changeBackground untuk menghandle button ketika di klik

const changeBackground = () => {
    if(background === 'red'){
      setBackground('blue')
    }
    else{
      setBackground('red')
    }
  }

lalu di app.css kita buat style untuk class nya

red{
  background: red;
}

.blue{
  background: rgb(99, 99, 255);
}

hasilnya akan seperti dibawah

1 Menggunakan Ref

Cara yang kedua adalah menggunakan ref atau singkatan dari reference. ref ini adalah sebuah referensi yang mengarah ke element HTML pada react.

Jika kita ingin memanipulasi element Virtual DOM maka kita tidak langsung memanipulasi elementnya, tapi yang kita manipulasi adalah ref dari element tersebut. Oke langsung saja kita praktekkan

definisikan sebuah ref menggunakan useRef jika menggunakan class component pakai createRef

const buttonRef = useRef();

lalu letakkan buttonRef diatas ke element yang ingin kita beri referensi

 <button className={background} ref={buttonRef} onClick={changeBackground}>
        change Background
</button>

(masih menggunakan kodingan yang tadi ya). nah setelah itu di function changeBackground() kita coba memodifikasi element buttonnya menggunakan ref. sebagai contoh saya akan mengubah textContent dari button ketika di click. jadi saya tuliskan seperti ini

const changeBackground = () => {
    if(background === 'red'){
      setBackground('blue')
      buttonRef.current.textContent = 'Berubah biru'
    }
    else{
      setBackground('red')
      buttonRef.current.textContent = 'Berubah Merah'
    }
  }

nah hasilnya jika kita mengklik button maka background dan tulisan dalam button akan berubah

Sekian dulu Tutorial dari saya. Jika ada salah kata mohon dimaafkan. Jika ada pertanyaan silahkan hubungi
Whatsapp Instagram

Wassalamu'alaikum Warahmatullahi Wabarakatuh

Reactjs Overview - (EchLus Community - Part 1)

satriaherman — Thu, 11 Nov 2021 07:17:39 +0000

Halo kawan - kawan kali ini saya akan sharing materi tentang "Reactjs Overview". ini merupakan seri sharing session batch tentang Reactjs.

Overview Materi

Di batch ini kita akan belajar tentang

Install and Setup Reactjs
Basic Props and State
React Hooks
React State Management
Communicating With Server
Esbuild

1. Install dan Setup Reactjs

Pada proses instalasi kita bisa melihatnya di Sini. untuk instalasinya sebenarnya ada dua cara. yakni dengan menggunakan CDN. atau dengan menggunakann Create React App(CRA).

Untuk kesempatan kali ini saya akan menginstall React menggunakan CRA. oke langsung saja ke tutorial.

Buka Terminal atau CMD. lalu jalankan npx i create-react-app belajar_react . npx sendiri kepanjangan dari node package execute. yang mana jika dijalankan maka akan mengeksekusi package yang sudah maupun belum kita install. dengan menggunakan npx kita tidak perlu menginstall CRA ke dalam local computer kita.

D:\programming\belajar Javascript\react>npx create-react-app belajar_react

Creating a new React app in D:\programming\belajar Javascript\react\belajar_react.

Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template...

[  ................] - fetchMetadata: sill resolveWithNewModule scheduler@0.20.2 checking installable stat

tunggu prosesnya sampai selesai

jika sudah selesai ketik perintah cd belajar_react. lalu ketik perintah code . agar membuka project kita di Visual Studio.