feat(*): setup auto deploy (#44)

.github/workflows/aws-deploy.yml

@@ -0,0 +1,111 @@
+name: Build and Deploy to AWS
+
+on:
+  push:
+    branches:
+      - main
+
+env:
+  # root env
+  POSTGRES_PORT: ${{ secrets.POSTGRES_PORT }}
+  POSTGRES_USER: ${{ secrets.POSTGRES_USER }}
+  POSTGRES_PASSWORD: ${{ secrets.POSTGRES_PASSWORD }}
+  POSTGRES_DB: ${{ secrets.POSTGRES_DB }}
+  REDIS_PORT: ${{ secrets.REDIS_PORT }}
+  REDIS_PASSWORD: ${{ secrets.REDIS_PASSWORD }}
+  # client env
+  VITE_API_URL: ${{ secrets.VITE_API_URL }}
+  VITE_SOCKET_URL: ${{ secrets.VITE_SOCKET_URL }}
+  VITE_FIREBASE_APP_ID: ${{ secrets.VITE_FIREBASE_APP_ID }}
+  VITE_FIREBASE_API_KEY: ${{ secrets.VITE_FIREBASE_API_KEY }}
+  VITE_FIREBASE_AUTH_DOMAIN: ${{ secrets.VITE_FIREBASE_AUTH_DOMAIN }}
+  VITE_FIREBASE_PROJECT_ID: ${{ secrets.VITE_FIREBASE_PROJECT_ID }}
+  VITE_FIREBASE_STORAGE_BUCKET: ${{ secrets.VITE_FIREBASE_STORAGE_BUCKET }}
+  VITE_FIREBASE_MESSAGE_SENDER_ID: ${{ secrets.VITE_FIREBASE_MESSAGE_SENDER_ID }}
+  VITE_FIREBASE_MEASUREMENT_ID: ${{ secrets.VITE_FIREBASE_MEASUREMENT_ID }}
+  # server env
+  APP_URL: ${{ secrets.APP_URL }}
+  DATABASE_URL: ${{ secrets.DATABASE_URL }}
+  REDIS_URL: ${{ secrets.REDIS_URL }}
+  ACCESS_TOKEN_SECRET: ${{ secrets.ACCESS_TOKEN_SECRET }}
+  REFRESH_TOKEN_SECRET: ${{ secrets.REFRESH_TOKEN_SECRET }}
+  FIREBASE_PROJECT_ID: ${{ secrets.FIREBASE_PROJECT_ID }}
+  FIREBASE_PRIVATE_KEY_ID: ${{ secrets.FIREBASE_PRIVATE_KEY_ID }}
+  FIREBASE_PRIVATE_KEY: ${{ secrets.FIREBASE_PRIVATE_KEY }}
+  FIREBASE_CLIENT_EMAIL: ${{ secrets.FIREBASE_CLIENT_EMAIL }}
+  FIREBASE_CLIENT_ID: ${{ secrets.FIREBASE_CLIENT_ID }}
+  FIREBASE_AUTH_URI: ${{ secrets.FIREBASE_AUTH_URI }}
+  FIREBASE_TOKEN_URI: ${{ secrets.FIREBASE_TOKEN_URI }}
+  FIREBASE_AUTH_PROVIDER_X509_CERT_URL: ${{ secrets.FIREBASE_AUTH_PROVIDER_X509_CERT_URL }}
+  FIREBASE_CLIENT_X509_CERT_URL: ${{ secrets.FIREBASE_CLIENT_X509_CERT_URL }}
+  MAILER_EMAIL: ${{ secrets.MAILER_EMAIL }}
+  MAILER_PASSWORD: ${{ secrets.MAILER_PASSWORD }}
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v3
+
+      - name: Install client dependencies
+        working-directory: ./client
+        run: |
+          yarn install
+          export VITE_API_URL=$VITE_API_URL
+          export VITE_SOCKET_URL=$VITE_SOCKET_URL
+          export VITE_FIREBASE_APP_ID=$VITE_FIREBASE_APP_ID
+          export VITE_FIREBASE_API_KEY=$VITE_FIREBASE_API_KEY
+          export VITE_FIREBASE_AUTH_DOMAIN=$VITE_FIREBASE_AUTH_DOMAIN
+          export VITE_FIREBASE_PROJECT_ID=$VITE_FIREBASE_PROJECT_ID
+          export VITE_FIREBASE_STORAGE_BUCKET=$VITE_FIREBASE_STORAGE_BUCKET
+          export VITE_FIREBASE_MESSAGE_SENDER_ID=$VITE_FIREBASE_MESSAGE_SENDER_ID
+          export VITE_FIREBASE_MEASUREMENT_ID=$VITE_FIREBASE_MEASUREMENT_ID
+
+      - name: Install server dependencies
+        working-directory: ./server
+        run: |
+          yarn install
+          export APP_URL=$APP_URL
+          export DATABASE_URL=$DATABASE_URL
+          export REDIS_URL=$REDIS_URL
+          export ACCESS_TOKEN_SECRET=$ACCESS_TOKEN_SECRET
+          export REFRESH_TOKEN_SECRET=$REFRESH_TOKEN_SECRET
+          export FIREBASE_PROJECT_ID=$FIREBASE_PROJECT_ID
+          export FIREBASE_PRIVATE_KEY_ID=$FIREBASE_PRIVATE_KEY_ID
+          export FIREBASE_PRIVATE_KEY=$FIREBASE_PRIVATE_KEY
+          export FIREBASE_CLIENT_EMAIL=$FIREBASE_CLIENT_EMAIL
+          export FIREBASE_CLIENT_ID=$FIREBASE_CLIENT_ID
+          export FIREBASE_AUTH_URI=$FIREBASE_AUTH_URI
+          export FIREBASE_TOKEN_URI=$FIREBASE_TOKEN_URI
+          export FIREBASE_AUTH_PROVIDER_X509_CERT_URL=$FIREBASE_AUTH_PROVIDER_X509_CERT_URL
+          export FIREBASE_CLIENT_X509_CERT_URL=$FIREBASE_CLIENT_X509_CERT_URL
+          export MAILER_EMAIL=$MAILER_EMAIL
+          export MAILER_PASSWORD=$MAILER_PASSWORD
+
+      - name: Build client image
+        working-directory: ./client
+        run: docker build -t thdeathz/kanjigami-prod:client-${{github.run_number}} -t thdeathz/kanjigami-prod:client-latest .
+
+      - name: Build server image
+        working-directory: ./server
+        run: docker build -t thdeathz/kanjigami-prod:server-${{github.run_number}} -t thdeathz/kanjigami-prod:server-latest .
+
+      - name: Build nginx image
+        working-directory: ./nginx
+        run: docker build -t thdeathz/kanjigami-prod:nginx-${{github.run_number}} -t thdeathz/kanjigami-prod:nginx-latest .
+
+      - name: Login to Docker Hub
+        uses: docker/login-action@v1
+        with:
+          username: ${{ secrets.DOCKER_USERNAME }}
+          password: ${{ secrets.DOCKER_PASSWORD }}
+
+      - name: Push Docker Images to Docker Hub
+        run: |
+          docker push thdeathz/kanjigami-prod:client-${{github.run_number}}
+          docker push thdeathz/kanjigami-prod:client-latest
+          docker push thdeathz/kanjigami-prod:server-${{github.run_number}}
+          docker push thdeathz/kanjigami-prod:server-latest
+          docker push thdeathz/kanjigami-prod:nginx-${{github.run_number}}
+          docker push thdeathz/kanjigami-prod:nginx-latest

client/.dockerignore

@@ -1,3 +1,4 @@
+dev-dist
 node_modules
 
 Dockerfile

client/README.md

@@ -1,44 +1,25 @@
-# React + Typescript
-
-## Features
-
-- Ant Design (Antd) and Tailwind CSS for user interface.
-- Redux Toolkit for state management.
-- RTK Query for making API calls.
-
-## Getting Started
-
-Install the dependencies:
-
-```bash
-yarn
-```
-
-Create a `.env` file in the client folder and add the following variables:
-
-```bash
-VITE_NODE_ENV=
-VITE_API_URL=<your-api-url>
-```
-
-Start the client:
-
-```bash
-yarn dev
-```
-
-The client will start running at `http://localhost:3000`.
-
 ## Folder Structure
 
 ```
+├── public                 # Static files (favicon, robots.txt, etc.)
 ├── src
-│   ├── @types             # Contains global types
-│   ├── app                # Contains redux store and rtk query configuration
-│   ├── components         # Contains reusable components
-│   ├── config             # Contains enum variable
-│   ├── features           # Contains feature modules (e.g., Redux slices)
-│   └── hooks              # Contains custom hook
-├── App.tsx                # Entry point of the application
-└── README.md              # This file
+│   ├── @types             # Global types
+│   ├── app                # Redux store and rtk query configuration
+│   ├── assets             # Static assets (images, fonts, etc.)
+│   ├── components         # Reusable components
+│   ├── config             # Enum variables, constants, and configuration
+│   ├── features           # Feature modules (e.g., Redux slices)
+│   │   ├── auth           # Auth feature module
+│   │   │   ├── @types               # Types for auth feature module
+│   │   │   ├── components           # Components for auth feature module
+│   │   │   ├── store
+│   │   │   │   ├── authService.ts   # Auth service to call API
+│   │   │   │   └── authSlice.ts     # Auth state and reducer
+│   │   │   ├── utils                # Utility functions for auth feature module
+│   │   │   └── ...tsx               # Pages for auth feature module
+│   │   └── ...
+│   ├── hooks              # Global custom hooks
+│   └── utils              # Utility functions
+├── App.tsx                # Application route setup
+└── main.tsx               # Entry point
 ```

client/src/features/battle/components/OngoingBattle/index.tsx

@@ -106,7 +106,6 @@ function OngoingBattle({ eventId, refetch }: PropsType) {
       </div>
 
       <div className="basis-1/4">
-        <>{console.log('==> joined users', joinedUser)}</>
         {!isFirstRoundStarted ? (
           <>
             <Button type="primary" className="mb-4 w-full" onClick={onJoinLobby}>

deploy/client.Dockerfile

@@ -0,0 +1,15 @@
+FROM node:18-alpine as build
+
+WORKDIR /app
+
+COPY package.json yarn.lock ./
+
+RUN yarn install --frozen-lockfile
+
+COPY . .
+
+EXPOSE 3000
+
+RUN yarn build
+
+CMD ["yarn", "preview"]

deploy/nginx/nginx.conf

@@ -0,0 +1,30 @@
+# Defining a server group called `client` that has one server in it called `client` on port `3000`.
+upstream client {
+  server client:3000;
+}
+
+# Defining a server group called `server` that has one server in it called `server` on port `5000`.
+upstream server {
+  server server:3030;
+}
+
+# Listening on port 80 and redirecting requests to the client and server.
+server {
+  listen 80;
+  listen [::]:80;
+
+  proxy_http_version 1.1;
+  proxy_set_header Upgrade $http_upgrade;
+  proxy_set_header Connection 'upgrade';
+  proxy_set_header Host $host;
+  proxy_cache_bypass $http_upgrade;
+
+  location / {
+      proxy_pass http://client;
+  }
+
+  location /server {
+      rewrite /server/(.*) /$1 break;
+      proxy_pass http://server;
+  }
+}

deploy/server.Dockerfile

@@ -0,0 +1,14 @@
+FROM node:18-alpine as build
+
+WORKDIR /app
+
+COPY package.json yarn.lock ./
+
+RUN yarn install --frozen-lockfile
+
+COPY . .
+
+EXPOSE 80
+
+RUN yarn build
+

docker-compose.prod.yml

@@ -0,0 +1,84 @@
+services:
+  nginx:
+    image: thdeathz/kanjigami-prod:nginx-latest
+    restart: always
+    depends_on:
+      - client
+      - server
+    ports:
+      - '80:80'
+
+  server:
+    image: thdeathz/kanjigami-prod:server-latest
+    restart: unless-stopped
+    tty: true
+    command: >
+      yarn prisma migrate reset --force &&
+      yarn seed &&
+      yarn prod
+    environment:
+      - NODE_ENV=production
+      - APP_URL=${APP_URL}
+      - DATABASE_URL=${DATABASE_URL}
+      - REDIS_URL=${REDIS_URL}
+      - ACCESS_TOKEN_SECRET=${ACCESS_TOKEN_SECRET}
+      - REFRESH_TOKEN_SECRET=${REFRESH_TOKEN_SECRET}
+      - FIREBASE_PROJECT_ID=${FIREBASE_PROJECT_ID}
+      - FIREBASE_PRIVATE_KEY_ID=${FIREBASE_PRIVATE_KEY_ID}
+      - FIREBASE_PRIVATE_KEY=${FIREBASE_PRIVATE_KEY}
+      - FIREBASE_CLIENT_EMAIL=${FIREBASE_CLIENT_EMAIL}
+      - FIREBASE_CLIENT_ID=${FIREBASE_CLIENT_ID}
+      - FIREBASE_AUTH_URI=${FIREBASE_AUTH_URI}
+      - FIREBASE_TOKEN_URI=${FIREBASE_TOKEN_URI}
+      - FIREBASE_AUTH_PROVIDER_X509_CERT_URL=${FIREBASE_AUTH_PROVIDER_X509_CERT_URL}
+      - FIREBASE_CLIENT_X509_CERT_URL=${FIREBASE_CLIENT_X509_CERT_URL}
+      - MAILER_EMAIL=${MAILER_EMAIL}
+      - MAILER_PASSWORD=${MAILER_PASSWORD}
+    links:
+      - postgres
+      - redis
+    depends_on:
+      - postgres
+      - redis
+
+  client:
+    image: thdeathz/kanjigami-prod:client-latest
+    restart: unless-stopped
+    tty: true
+    environment:
+      - NODE_ENV=production
+      - VITE_API_URL=${VITE_API_URL}
+      - VITE_SOCKET_URL=${VITE_SOCKET_URL}
+      - VITE_FIREBASE_APP_ID=${VITE_FIREBASE_APP_ID}
+      - VITE_FIREBASE_API_KEY=${VITE_FIREBASE_API_KEY}
+      - VITE_FIREBASE_AUTH_DOMAIN=${VITE_FIREBASE_AUTH_DOMAIN}
+      - VITE_FIREBASE_PROJECT_ID=${VITE_FIREBASE_PROJECT_ID}
+      - VITE_FIREBASE_STORAGE_BUCKET=${VITE_FIREBASE_STORAGE_BUCKET}
+      - VITE_FIREBASE_MESSAGE_SENDER_ID=${VITE_FIREBASE_MESSAGE_SENDER_ID}
+      - VITE_FIREBASE_MEASUREMENT_ID=${VITE_FIREBASE_MEASUREMENT_ID}
+    depends_on:
+      - traefik
+      - server
+
+  redis:
+    image: redis:7.2-alpine
+    restart: unless-stopped
+    volumes:
+      - ./.data/redis:/data
+    command: >
+      redis-server
+      --requirepass ${REDIS_PASSWORD:-redis}
+    ports:
+      - ${REDIS_PORT:-6379}:6379
+
+  postgres:
+    image: postgres:11-alpine
+    restart: unless-stopped
+    volumes:
+      - ./.data/postgres:/var/lib/postgresql/data
+    environment:
+      - POSTGRES_USER=${POSTGRES_USER:-postgres}
+      - POSTGRES_PASSWORD=${POSTGRES_PASSWORD:-postgres}
+      - POSTGRES_DB=${POSTGRES_DB:-postgres}
+    ports:
+      - ${POSTGRES_PORT:-5432}:5432

server/.dockerignore

@@ -1,3 +1,4 @@
+dist
 node_modules
 
 Dockerfile