Trang web

Dùng Next.js để tạo trang web tĩnh, tận dụng hệ sinh thái của React.

Tên miền

Tên miền được sử dụng ở đây: https://tech-lunch.com.

K8S DevOps Cluster

Cluster này được thiết lập trên AWS, dùng cho mục đích phát triển và thử nghiệm. Với môi trường sản xuất, nên cân nhắc sử dụng EKS của AWS.

Gitlab Riêng

Đã triển khai GitLab riêng trên cluster K8S của Tech Lunch.

Sử dụng Docker để Build Site

Dockerfile

FROM node:14-alpine

ENV NODE_ENV=production

WORKDIR /app

COPY ./package.json /app/

RUN npm install --only=prod

Xây dựng Image Build

docker build -t aws.ecr.hub.techlunch/web-static:build .

Test Build Image

Xóa các thư mục `.next` và `node_modules`.

rm -rf .next node_modules

Chạy container:

docker run -it -v $(pwd):/app aws.ecr.hub.techlunch/web-static:build bash

Vào thư mục ứng dụng:

cd /app

Tạo liên kết mềm cho thư mục `node_modules` đã cache:

ln -sfn /app/node_modules node_modules

Thực hiện build:

npm run build

Push Image lên AWS ECR

Sau khi kiểm tra thành công, push image vào ECR để dùng trong pipeline CI. Đăng nhập ECR:

aws ecr get-login-password --region us-west-2 | docker login --username AWS --password-stdin 1234567890.dkr.ecr.us-west-2.amazonaws.com

Push Image:

docker push 1234567890.dkr.ecr.us-west-2.amazonaws.com/web-static:build

Cấu hình K8S Cluster

Tạo Namespace

kubectl create ns techlunch

Config Cert-Manager tự động cấp TLS Certificate

apiVersion: cert-manager.io/v1alpha2
kind: ClusterIssuer
metadata:
  name: letsencrypt-prod
spec:
  acme:
    email: tech@techlunch.com
    server: https://acme-v02.api.letsencrypt.org/directory
    privateKeySecretRef:
      name: letsencrypt-prod
    solvers:
    - http01:
        ingress:
          class: nginx

Deploy Nginx bằng Helm

Thêm repository Bitnami:

helm repo add bitnami https://charts.bitnami.com/bitnami

Cấu hình PVC với NFS:

apiVersion: v1
kind: PersistentVolume
metadata:
  name: techlunch-pv
spec:
  capacity:
    storage: 1Gi
  accessModes:
    - ReadWriteOnce
  nfs:
    path: /mnt/nfs/techlunch
    server: 192.168.1.100

Cấu hình values.yaml:

ingress:
  enabled: true
  hostname: techlunch.com
  annotations:
    kubernetes.io/ingress.class: "nginx"
    nginx.ingress.kubernetes.io/ssl-redirect: "true"

Triển khai:

helm install techlunch bitnami/nginx -f values-techlunch.yaml -n techlunch

Drone CI Config

Cấu hình Secrets:

drone secret add --name GIT_REPO_TOKEN --value yourtoken --image alpine/git

Cấu hình Pipeline:

steps:
  - name: Clone Repo
    image: alpine/git
    commands:
    - git clone $DRONE_REPO_URL .
    
  - name: Build Project
    image: 1234567890.dkr.ecr.us-west-2.amazonaws.com/web-static:build
    commands:
    - npm run build
    
  - name: Deploy to Cloud
    image: appleboy/drone-scp
    settings:
      host: [from_secret:host]
      username: [from_secret:username]
      password: [from_secret:password]
      target: /var/www/html/

Lên Cloud

Trigger Drone CI lần đầu:

git checkout -b deploy/cloud
git push --set-upstream origin deploy/cloud

Lần sau:

git checkout deploy/cloud
git merge main
git push