Merge pull request #13 from sparcs-kaist/infra/CD

Zabo-Boards CD 파이프라인 추가

.docker/.env.example

@@ -0,0 +1 @@
+SLACK_WATCHTOWER_WEBHOOK=

.docker/Dockerfile

@@ -0,0 +1,22 @@
+# Dockerfile for production build
+FROM node:18-alpine AS builder
+
+WORKDIR /app
+
+COPY . .
+
+RUN yarn --frozen-lockfile
+
+RUN yarn build
+
+FROM node:18-alpine
+
+WORKDIR /app
+
+COPY --from=builder /app/dist /app
+
+RUN yarn global add serve
+
+EXPOSE 80
+
+ENTRYPOINT ["serve", "-l", "80", "/app"]

.docker/docker-compose.yaml

@@ -0,0 +1,17 @@
+version: "3"
+
+services:
+  watch-tower:
+    image: containrrr/watchtower
+    volumes:
+      - /var/run/docker.sock:/var/run/docker.sock
+    command: --interval 30 --scope zabo-boards --cleanup
+    labels: [ "com.centurylinklabs.watchtower.scope=zabo-boards" ]
+  zabo-boards:
+    image: ghcr.io/sparcs-kaist/zabo-boards:latest
+    ports:
+      - 8888:80
+    labels:
+    - "com.centurylinklabs.watchtower.scope=zabo-boards"
+    - 'com.centurylinklabs.watchtower.lifecycle.pre-update=curl -X POST -H ''Content-type: application/json'' --data ''{"text":"[PROD] 업데이트를 위해 zabo-boards 서비스를 종료시켰습니다."}'' ${SLACK_WATCHTOWER_WEBHOOK}'
+    - 'com.centurylinklabs.watchtower.lifecycle.post-update=curl -X POST -H ''Content-type: application/json'' --data ''{"text":"[PROD] 업데이트 후 zabo-boards 서비스를 재시작하였습니다."}'' ${SLACK_WATCHTOWER_WEBHOOK}'

.env.production

@@ -0,0 +1,8 @@
+## VITE_API_SERVER_URL should end without "/"
+VITE_API_SERVER_URL=https://zabo.sparcs.org/api
+VITE_ANIMATION_DURATION=3200
+VITE_TRANSITION_INTERVAL=10000
+
+## put s3 url for initial content for zabo boards
+VITE_INIT_CONTENT1=https://sparcs-kaist-zabo-prod.s3.ap-northeast-2.amazonaws.com/zabo/zabo-136431583315238282https://sparcs-kaist-zabo-prod.s3.ap-northeast-2.amazonaws.com/zabo/zabo-136431583315238282
+VITE_INIT_CONTENT2=https://sparcs-kaist-zabo-prod.s3.ap-northeast-2.amazonaws.com/zabo/zabo-136431583315238282https://sparcs-kaist-zabo-prod.s3.ap-northeast-2.amazonaws.com/zabo/zabo-136431583315238282

.github/workflows/prod-build-image.yaml

@@ -0,0 +1,41 @@
+name: Build docker image on tag creation
+
+on:
+  push:
+    tags:
+      - "**"
+
+jobs:
+  build:
+    name: Build and push Image to ghcr
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - name: Setup Docker buildX
+        uses: docker/setup-buildx-action@v3
+      - name: Cache Docker layers
+        uses: actions/cache@v3
+        with:
+          path: /tmp/.buildx-cache
+          key: ${{runner.os}}-buildx-${{github.sha}}
+          restore-keys: |
+            ${{runner.os}}-buidx-
+      - name: Log in to Github Container Registry
+        run: echo ${{secrets.GITHUB_TOKEN}} | docker login ghcr.io -u USERNAME --password-stdin
+      - name: Build and Push Image
+        id: docker-build
+        uses: docker/build-push-action@v5
+        env:
+          IMAGE_TAG: ${{github.ref_name}}
+        with:
+          file: ./.docker/Dockerfile
+          push: true
+          tags: |
+            "ghcr.io/sparcs-kaist/zabo-boards:${{ env.IMAGE_TAG }}"
+            "ghcr.io/sparcs-kaist/zabo-boards:latest"
+          cache-from: type=local,src=/tmp/.buildx-cache
+          cache-to: type=local,dest=/tmp/.buildx-cache-new
+      - name: Remove old cache
+        run: |
+          rm -rf /tmp/.buildx-cache
+          mv /tmp/.buildx-cache-new /tmp/.buildx-cache

.gitignore

@@ -81,11 +81,10 @@ web_modules/
 # dotenv environment variable files
 .env
 .env.development
-.env.production
 .env.development.local
 .env.test.local
-.env.production.local
 .env.local
+.docker/.env.production
 
 # parcel-bundler cache (https://parceljs.org/)
 .cache

README.md

@@ -1,27 +1,51 @@
-# React + TypeScript + Vite
+# Zabo Boards
 
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+## About
+Zabo Boards helps **KAIST students based** individuals or clubs advertising themselves via TV screen in open space.
+While this service is open for public, **only approved groups** are able to post images.
+Please submit your request in order to create a new group via our website.
 
-Currently, two official plugins are available:
+This project is being maintained by [SPARCS KAIST](https://github.com/sparcs-kaist)
 
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+We're expecting our users post there recruiting announcements, performance schedules, and any other events advertisments.
+However, there's no strict restrictions on contents that users upload.
 
-## Expanding the ESLint configuration
+Please contact us to get more detailed information.
 
-If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
+If you're looking for backend codes, you can find it in [here](https://github.com/sparcs-kaist/zabo-server-nodejs)
 
-- Configure the top-level `parserOptions` property like this:
+## Table of Contents
 
-```js
-   parserOptions: {
-    ecmaVersion: 'latest',
-    sourceType: 'module',
-    project: ['./tsconfig.json', './tsconfig.node.json'],
-    tsconfigRootDir: __dirname,
-   },
+## Prerequisites
+
+**You'll need to have Node 18.18.2 in local development and production machine**
+
+You can use [fnm](https://github.com/Schniz/fnm). That's all you need.
+
+```shell
+$ node -v // v18.18.2
 ```
 
-- Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked`
-- Optionally add `plugin:@typescript-eslint/stylistic-type-checked`
-- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list
+## Getting Started
+
+### Running Development Server
+
+Run server
+```shell
+$ cp .env.example .env.development // copy config 
+
+$ vim .env.development // setup configuration
+
+$ yarn // Installing dependencies
+
+$ yarn dev // used vite for project configuration. yarn dev will run vite development server
+```
+
+### Running Production Server
+```shell
+$ // check if there is a zabo-boards package in sparcs-kaist organization
+$ git clone https://github.com/sparcs-kaist/zabo-boards.git // clone repo
+$ cp .env.example .env.production // copy config 
+$ docker compose -p zabo-boards -f .docker/docker-compose.yaml up -d // run zabo boards server
+
+```

package.json

@@ -6,6 +6,9 @@
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build",
+    "prod": "docker compose -p zabo-boards -f .docker/docker-compose.yaml --env-file .docker/.env.production",
+    "prod:up": "yarn prod up -d",
+    "prod:down": "yarn prod down",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview",
     "prettier": "prettier --write --config .prettierrc -u",
@@ -22,15 +25,17 @@
     "@react-spring/web": "^9.7.3",
     "@reduxjs/toolkit": "^1.9.7",
     "@types/node": "^20.8.10",
-    "axios": "^1.5.1",
+    "axios": "^1.6.8",
     "dayjs": "^1.11.10",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-qr-code": "^2.0.12",
     "react-redux": "^8.1.3",
     "react-transition-group": "^4.4.5",
     "redux-thunk": "^2.4.2",
+    "serve": "^14.2.3",
     "usehooks-ts": "^2.9.1",
+    "vite": "^5.2.10",
     "vite-tsconfig-paths": "^4.2.1"
   },
   "devDependencies": {
@@ -54,7 +59,6 @@
     "lint-staged": "^14.0.1",
     "prettier": "3.0.3",
     "sass": "^1.69.0",
-    "typescript": "^5.0.2",
-    "vite": "^4.4.5"
+    "typescript": "^5.0.2"
   }
 }