Skip to content

paulkusuma/simple-notes-app

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ย 

History

15 Commits
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 

Repository files navigation

๐Ÿš€ Simple Notes App โ€” DevOps CI/CD Pipeline

Build Status Docker Node License

Repository ini berisi implementasi CI/CD pipeline end-to-end untuk aplikasi containerized menggunakan Docker dan GitHub Actions.

Fokus utama proyek ini adalah praktik DevOps modern, bukan pada kompleksitas aplikasinya.
Pipeline memastikan bahwa setiap perubahan kode telah melalui proses:

  • Build container image
  • Unit test container
  • Integration test antar service
  • Security scanning
  • Artifact publishing ke container registry

Pipeline ini dirancang sebagai fondasi sebelum melanjutkan ke Continuous Deployment (CD) atau Kubernetes orchestration.


๐Ÿงฐ Tech Stack

Application

  • Node.js
  • Express.js
  • HTML / CSS / JavaScript

Containerization

  • Docker
  • Docker Compose

CI/CD

  • GitHub Actions

Security Tools

  • Trivy (Container Vulnerability Scanner)
  • Gitleaks (Secret Leak Detection)
  • npm audit (Dependency Vulnerability Scanner)

๐Ÿ—๏ธ CI/CD Architecture

Developer
โ”‚
โ”‚ git push
โ–ผ
GitHub Repository
โ”‚
โ–ผ
GitHub Actions CI Pipeline
โ”‚
โ”œโ”€โ”€ Checkout Source Code
โ”œโ”€โ”€ Build Docker Images
โ”œโ”€โ”€ Unit Test (Container)
โ”œโ”€โ”€ Integration Test (Docker Compose)
โ”œโ”€โ”€ Security Scan
โ”‚ โ”œโ”€โ”€ Dependency Scan
โ”‚ โ”œโ”€โ”€ Secret Scan
โ”‚ โ””โ”€โ”€ Container Vulnerability Scan
โ”‚
โ–ผ
Push Docker Images
Docker Registry
โ”‚
โ–ผ
GitHub Actions (CD)
โ”‚
โ–ผ
SSH โ†’ AWS EC2
โ”‚
โ–ผ
docker-compose pull
docker-compose down
docker-compose up -d
โ”‚
โ–ผ
๐Ÿš€ Application Running on AWS EC2

Pipeline memastikan bahwa hanya image yang telah tervalidasi yang akan dipublish ke registry.


๐Ÿ“‚ Project Structure

simple-notes-app
โ”‚
โ”œโ”€โ”€ backend
โ”‚ โ”œโ”€โ”€ src
โ”‚ โ”œโ”€โ”€ package.json
โ”‚ โ””โ”€โ”€ Dockerfile
โ”‚
โ”œโ”€โ”€ frontend
โ”‚ โ”œโ”€โ”€ index.html
โ”‚ โ”œโ”€โ”€ script.js
โ”‚ โ”œโ”€โ”€ style.css
โ”‚ โ””โ”€โ”€ Dockerfile
โ”‚
โ”œโ”€โ”€ docker-compose.yml
โ”‚
โ””โ”€โ”€ .github
    โ””โ”€โ”€ workflows
        โ””โ”€โ”€ ci-dev.yml
        โ””โ”€โ”€ cd-dev.yml

Folder .github/workflows berisi konfigurasi CI CD pipeline menggunakan GitHub Actions.


โš™๏ธ Prerequisites

Pastikan software berikut sudah terinstall sebelum menjalankan proyek:

  • Node.js >= 18
  • Docker
  • Docker Compose
  • Git
  • AWS EC2 Instance

Cek versi:

node -v
docker -v
docker compose version

๐Ÿ› ๏ธ Local Development Setup

Clone repository:

git clone https://github.com/USERNAME/simple-notes-app.git
cd simple-notes-app

Backend

cd backend
npm install
npm start

Server backend akan berjalan di:

http://localhost:3000

Frontend

cd frontend

Buka file: index.html atau jalankan server sederhana:

npx serve .

Frontend akan tersedia di: http://localhost:8080


๐Ÿณ Running with Docker

Cara paling mudah menjalankan seluruh stack adalah menggunakan Docker Compose.

Build dan jalankan container:

docker compose up --build

Akses service:

Frontend: http://localhost:8080

Backend API: http://localhost:3000

Stop service:

docker compose down

๐Ÿ”— API Structure Base URL

http://localhost:3000/api

Endpoint Documentation Method Endpoint Description

GET	/health	Backend health check
GET	/api/notes	Retrieve all notes
POST	/api/notes	Create new note
PUT	/api/notes/:id	Update note
DELETE	/api/notes/:id	Delete note

Example Request Create note:

curl -X POST http://localhost:3000/api/notes \
-H "Content-Type: application/json" \
-d '{
  "title":"Belajar DevOps",
  "content":"Membuat CI/CD pipeline"
}'

Example response:

{
  "id": 1,
  "title": "Belajar DevOps",
  "content": "Membuat CI/CD pipeline"
}

๐Ÿ”‘ Environment Variables

Aplikasi menggunakan konfigurasi environment untuk menjalankan service.

Contoh .env:

PORT=3000
NODE_ENV=development
DB_PATH=./notes.db

Dalam environment container, konfigurasi ini biasanya didefinisikan melalui:

  • docker-compose.yml
  • environment variables pada container
  • CI/CD secret configuration

โš™๏ธ CI Pipeline Stages

Pipeline dijalankan setiap ada push ke branch dev.

1๏ธ Checkout Source Code GitHub Actions mengambil source code terbaru dari repository.

2๏ธโƒฃ Build Docker Images Pipeline membangun container image untuk dua service:

  • notes-backend
  • notes-frontend Contoh command:
docker build -t <docker-user>/notes-backend:<commit-sha> ./backend
docker build -t <docker-user>/notes-frontend:<commit-sha> ./frontend

Setiap image menggunakan Git commit SHA sebagai tag untuk memastikan versioning yang konsisten.

3๏ธโƒฃ Unit Test (Container Level) Container dijalankan secara individual untuk memastikan image dapat berjalan dengan benar. Contoh:

docker run -d -p 3000:3000 notes-backend:<tag>
docker run -d -p 8080:80 notes-frontend:<tag>

Validasi dilakukan dengan:

  • memastikan container dapat start
  • memeriksa log container
  • memastikan runtime environment valid

4๏ธโƒฃ Integration Test (Full Stack) Integration test dilakukan menggunakan Docker Compose. Pipeline menjalankan seluruh stack: frontend, backend, database. Contoh command:

docker compose up -d

Setelah service berjalan, pipeline menjalankan beberapa test endpoint.

Backend Health Check

docker exec notes-backend wget -qO- http://localhost:3000/health

Backend API Test

docker exec notes-backend wget -qO- http://localhost:3000/api/notes

Frontend Availability

curl -f http://localhost:8080

Jika salah satu test gagal, pipeline akan dihentikan.


๐Ÿ” Security Scanning

Pipeline menjalankan beberapa tahap security scanning.

Dependency Vulnerability Scan

Dependency backend discan menggunakan:

npm audit

Pipeline akan gagal jika ditemukan vulnerability dengan severity tinggi.

Secret Detection

Secret scanning dilakukan menggunakan Gitleaks. Tool ini mendeteksi kemungkinan kebocoran: API keys, tokens, password, credentials.

Container Vulnerability Scan

Image container discan menggunakan Trivy.

Contoh scanning command:

trivy image <image-name>

Scan akan memeriksa:

  • OS package vulnerabilities
  • language dependency vulnerabilities
  • container layer vulnerabilities

Pipeline akan gagal jika ditemukan vulnerability dengan severity:

  • CRITICAL
  • HIGH

๐Ÿ“ฆ Artifact Publishing

Jika semua tahap CI berhasil, pipeline akan mempublish Docker image ke registry.

Contoh:

docker push <docker-user>/notes-backend:<commit-sha>
docker push <docker-user>/notes-frontend:<commit-sha>

Image ini kemudian dapat digunakan untuk:

  • staging deployment
  • production deployment
  • Kubernetes workloads

โš™๏ธ CD Pipeline Stages

Pipeline Continuous Deployment (CD) bertanggung jawab untuk mendeploy aplikasi secara otomatis ke server cloud setelah pipeline CI berhasil. Pada proyek ini, deployment dilakukan ke instance Amazon EC2 menggunakan SSH automation dari GitHub Actions.

Workflow CD:

GitHub Actions (CI Success)
โ”‚
โ–ผ
Trigger CD Workflow
โ”‚
โ–ผ
SSH ke EC2 Server
โ”‚
โ”œโ”€โ”€ Login Docker Hub
โ”œโ”€โ”€ Pull latest image
โ”œโ”€โ”€ Stop container lama
โ”œโ”€โ”€ Run container baru
โ”‚
โ–ผ
Application Live di EC2

Pipeline ini memastikan bahwa:

  • Deployment hanya terjadi jika CI sukses
  • Server selalu menggunakan image terbaru
  • Deployment bersifat repeatable & otomatis

CD menggunakan event:

on:
  workflow_call:

Contoh pemanggilan dari CI:

jobs:
  deploy:
    needs: build
    uses: ./.github/workflows/cd-dev.yml

๐Ÿง  Data Persistence (IMPORTANT)

Database menggunakan Docker Volume:

volumes:
  postgres_data:

Data tidak hilang walaupun container dihapus Aman saat CI/CD redeploy


๐Ÿ” GitHub Secrets (WAJIB)

Agar CD bisa berjalan, kamu harus set secrets di GitHub: Secret Name Deskripsi

  • EC2_HOST Public IP EC2
  • EC2_USER Biasanya ubuntu
  • EC2_SSH_KEY Private key (tanpa .pem)
  • DOCKER_USER Username Docker Hub
  • DOCKER_PASS Password / Access Token

๐Ÿ–ฅ๏ธ Deployment Process (Step-by-Step)

CD akan menjalankan script berikut di server EC2:

cd ~/simple-notes-app
echo "${DOCKER_PASS}" | docker login -u "${DOCKER_USER}" --password-stdin
docker-compose pull
docker-compose down
docker-compose up -d

Penjelasan:

  1. Login Docker Hub Agar server bisa pull image private/public terbaru
  2. Pull Latest Image docker-compose pull Ambil image terbaru dari registry
  3. Stop Container Lama docker-compose down Menghindari conflict & memastikan clean state
  4. Start Container Baru docker-compose up -d Menjalankan versi terbaru aplikasi

โ˜๏ธ Deployment ke AWS EC2

Setup EC2:

  • Launch Ubuntu Instance
  • Install Docker & Docker Compose
  • Open port: 22 (SSH) 80 (HTTP)

Clone Project di EC2:

git clone https://github.com/USERNAME/simple-notes-app.git
cd simple-notes-app

Jalankan Aplikasi

docker-compose up -d

Akses:

http://<EC2-PUBLIC-IP>

๐Ÿณ Docker Compose di Server

โš ๏ธ Penting: Deployment menggunakan docker-compose yang ada di server EC2, bukan dari dalam image. Artinya:

  • Image hanya berisi aplikasi
  • Orkestrasi tetap dikontrol oleh server
backend:
  image: <docker-user>/notes-backend:dev
frontend:
  image: <docker-user>/notes-frontend:dev

๐Ÿ” FILE .env DI EC2 (WAJIB ADA)

Di server EC2:

nano .env

Isi:

POSTGRES_DB=
POSTGRES_USER=
POSTGRES_PASSWORD=

DB_HOST=
DB_PORT=
DB_NAME=
DB_USER=
DB_PASSWORD=

๐Ÿง  PENJELASAN PENTING

  1. Compose dibaca dari EC2, bukan dari image Yang dipakai saat deploy:
docker-compose up
  1. Image โ‰  Compose Komponen Fungsi Docker image isi aplikasi docker-compose cara menjalankan
  2. Kenapa pakai ENV? Supaya:
  • tidak hardcode password
  • bisa beda environment (dev/prod)
  • aman untuk repo publik

โ— Security Hardening

# Disable root login
sudo nano /etc/ssh/sshd_config
PermitRootLogin no
PasswordAuthentication no
sudo systemctl restart ssh

Diagram Network / Flow Nyata

User (Browser)
   โ†“
Public IP (EC2)
   โ†“
Nginx (Frontend Container :80)
   โ†“
Backend (Node.js :3000)
   โ†“
PostgreSQL (Internal Network)

๐Ÿ› ๏ธ Troubleshooting

# Cek container
docker ps
# Cek log backend
docker logs notes-backend
# Restart manual
docker-compose down && docker-compose up -d

Kenapa Docker Compose di Server?

  • Image = hanya aplikasi
  • Compose = cara menjalankan (orchestration)
  • Lebih fleksibel dibanding hardcode di CI/CD
  • Bisa scale ke Kubernetes nanti

๐Ÿ”ฎ Future Improvements

Pipeline ini dapat dikembangkan lebih lanjut dengan menambahkan:

  • Multi-environment deployment (dev, staging, prod)
  • Blue-Green Deployment
  • Kubernetes (EKS)
  • Load Balancer + HTTPS (Nginx + Certbot)
  • Monitoring (Prometheus + Grafana)
  • Auto rollback jika deployment gagal

About

Aplikasi Web Sederhana

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors