Merge pull request #10 from agung-learns/feature/gatsby

[Gatsby] Initialize Project, Dockerize, Kubernetes and Github Workflow

Author: agung96tm

README.md

@@ -5,6 +5,7 @@ Docker Implementation
 * React
   * [React](https://github.com/agung-learns/docker-implementation/tree/main/react/react-docker)
   * [NextJS](https://github.com/agung-learns/docker-implementation/tree/main/react/nextjs-docker)
+  * [Gatsby](https://github.com/agung-learns/docker-implementation/tree/main/react/gatsby-docker)
 * Vue
   * [NuxtJS](https://github.com/agung-learns/docker-implementation/tree/main/vue/nuxtjs-docker)
 * Angular

react/gatsby-docker/.dockerignore

@@ -0,0 +1,6 @@
+node_modules/
+.cache/
+
+public
+
+src/gatsby-types.d.ts

react/gatsby-docker/.env.example

@@ -0,0 +1 @@
+GATSBY_BASE_URL=http://localhost:8000

react/gatsby-docker/.github/workflows/main.yaml

@@ -0,0 +1,58 @@
+name: "CI"
+on:
+  pull_request:
+  push:
+    branches:
+      - main
+
+env:
+  SHA: ${{ github.sha }}
+  GKE_CLUSTER: deploy-learn
+  GKE_ZONE: asia-southeast1-b
+
+jobs:
+  build_push:
+    name: "Build & Push Image"
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: "Login to Docker Hub"
+        uses: docker/login-action@v2
+        with:
+          username: ${{ secrets.DOCKER_ID }}
+          password: ${{ secrets.DOCKER_PASSWORD }}
+
+      - name: "Build & Push"
+        run: |
+          docker build -t agung96tm/gatsby-app:latest -t agung96tm/gatsby-app:$SHA -f Dockerfile .
+          docker push agung96tm/gatsby-app:$SHA
+        env:
+          SHA: ${{ env.SHA }}
+
+  deploy:
+    name: "Deploy to Cluster"
+    runs-on: ubuntu-latest
+    needs: [ build_push ]
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - id: 'auth'
+        uses: 'google-github-actions/auth@v2'
+        with:
+          credentials_json: '${{ secrets.GCP_CREDENTIALS }}'
+
+      - name: 'Set up GKE credentials'
+        uses: 'google-github-actions/get-gke-credentials@v2'
+        with:
+          cluster_name: ${{ env.GKE_CLUSTER }}
+          location: ${{ env.GKE_ZONE }}
+
+      - name: 'Deploy to GKE'
+        run: |
+          kubectl apply -f deploy/k8s
+          kubectl set image deployment/app-deployment app=agung96tm/gatsby-app:$SHA
+        env:
+          SHA: ${{ env.SHA }}

react/gatsby-docker/.gitignore

@@ -0,0 +1,6 @@
+node_modules/
+.cache/
+public
+src/gatsby-types.d.ts
+
+.env

react/gatsby-docker/Dockerfile

@@ -0,0 +1,38 @@
+# Stage 1: Install dependencies
+FROM node:20-alpine as deps
+
+WORKDIR /app
+
+COPY package*.json ./
+
+# Install build tools and Python for native dependencies
+RUN apk add --no-cache python3 g++ make
+
+RUN npm ci
+RUN npm install
+
+
+FROM node:20-alpine as development
+
+ENV GATSBY_TELEMETRY_DISABLED 1
+
+WORKDIR /app
+COPY --from=deps /app/node_modules ./node_modules
+COPY . .
+
+
+FROM node:20-alpine as build
+
+WORKDIR /app
+COPY --from=deps /app/node_modules ./node_modules
+COPY . .
+
+RUN npm run build
+
+# Stage 4: Production environment
+FROM nginx:1.27.0-alpine as production
+
+COPY --from=build /app/public /usr/share/nginx/html
+EXPOSE 80
+
+CMD ["nginx", "-g", "daemon off;"]

react/gatsby-docker/README.md

@@ -0,0 +1,28 @@
+Gatsby with Docker
+================================
+
+
+### How to Run
+
+#### Docker
+```shell
+cp .env.example .env
+docker compose up --build
+```
+
+#### Kubernetes
+```shell
+kubectl apply -f deploy/k8s
+```
+
+### Contributors
+<table>
+  <tr>
+    <td align="center">
+      <a href="https://www.linkedin.com/in/agung96tm/">
+        <img src="https://avatars.githubusercontent.com/u/1901484?v=4" width="100px;" alt=""/><br />
+        <b>Agung Yuliyanto</b><br>
+      </a>
+    </td>
+  </tr>
+</table>

react/gatsby-docker/deploy/k8s/app-deployment.yaml

@@ -0,0 +1,21 @@
+apiVersion: apps/v1
+kind: Deployment
+metadata:
+  name: gatsby-deployment
+spec:
+  replicas: 3
+  selector:
+    matchLabels:
+      component: gatsby-app
+  template:
+    metadata:
+      labels:
+        component: gatsby-app
+      containers:
+        - name: app
+          image: agung96tm/gatsby-app
+          ports:
+            - containerPort: 3000
+          env:
+            - name: GATSBY_BASE_URL
+              value: 'https://www.linkedin.com/in/agung96tm'

react/gatsby-docker/deploy/k8s/app-service.yaml

@@ -0,0 +1,11 @@
+apiVersion: v1
+kind: Service
+metadata:
+  name: gatsby-service
+spec:
+  type: ClusterIP
+  selector:
+    component: gatsby-app
+  ports:
+    - port: 80
+      targetPort: 80

react/gatsby-docker/deploy/k8s/ingress-service.yaml

@@ -0,0 +1,18 @@
+apiVersion: networking.k8s.io/v1
+kind: Ingress
+metadata:
+  name: gatsby-ingress-service
+  annotations:
+    nginx.ingress.kubernetes.io/rewrite-target: /$1
+spec:
+  rules:
+    - host: gatsby.agung96tm.com
+      http:
+        paths:
+          - path: /
+            pathType: Prefix
+            backend:
+              service:
+                name: gatsby-service
+                port:
+                  number: 80