👷 PHASE를 prod, beta, local로 분리 (#279)

.github/workflows/deplay_dev.yaml → .github/workflows/deploy_dev.yaml

@@ -17,7 +17,7 @@ jobs:
       - name: 'SSH command'
         uses: 'nick-fields/retry@v2'
         with:
-          timeout_minutes: 2
+          timeout_minutes: 5
           max_attempts: 3
           retry_wait_seconds: 1
           retry_on: 'error'
@@ -32,7 +32,7 @@ jobs:
             source ~/.nvm/nvm.sh
 
             npm install
-            npm run build:develop
+            npm run build:beta
             pm2 reload 0"
 
 # https://stackoverflow.com/a/63771750

README.md

@@ -2,37 +2,50 @@
 
 ![](https://github.com/user-attachments/assets/39a28dbf-8ce8-4c3c-9222-abdddd22b934)
 
-https://cse.snu.ac.kr
+안녕하세요👋 서울대학교 컴퓨터공학부 홈페이지의 프론트엔드 레포입니다.
 
-서울대학교 컴퓨터공학부 홈페이지의 프론트엔드 레포입니다.
+- 2023.07: 🎉 CSEREAL 프로젝트 시작
+- 2024.04: 🚀 [cse.snu.ac.kr](https://cse.snu.ac.kr) 도메인으로 배포
+- 2024.08: 🧇 동아리 행사 '굽기'에서 기술/디자인 발표
 
 ## Getting started
 
-최상위에 `.env.local` 파일을 추가합니다. 시리얼 구글 계정으로 https://developers.kakao.com 에 로그인해 JavaScript 키를 env에 추가합니다.
+### 준비
 
-```
-NEXT_PUBLIC_KAKAO_MAP_API_KEY=...
-```
+`nvm use`로 `.nvmrc`에 명시된 노드 버전을 사용합니다. 해당 노드 버전이 설치되어있지 않다면 `nvm install`로 설치합니다.
 
-`nvm use`로 명시된 노드 버전을 사용합니다. 필요시 `nvm install`합니다. 이후 `npm install`로 패키지를 설치하고 husky를 초기화합니다.
+이후 `npm install`로 패키지를 설치하고 husky를 초기화합니다.
 
-```
+```sh
 nvm use
 npm install
 ```
 
-마지막으로 원하는 `npm` 명령어를 실행합니다.
+### Phase
 
-```
-npm run dev
-```
+3개의 phase로 관리합니다.
 
-## 주요 사용 기술
+- prod
+  - https://cse.snu.ac.kr
+  - main branch
+  - 수동 배포
+- beta
+  - https://cse-dev-waffle.bacchus.io/
+  - develop branch
+  - PR 머지시 자동 배포
+- local
+  - 로컬 개발/테스트 전용
 
-- Next.js 14 App router
-- tailwind
-- express
-- typescript
+### 카카오 지도
+
+[찾아오는 길](https://cse.snu.ac.kr/about/directions) 페이지에서 카카오 지도를 사용합니다. 카카오 지도가 올바르게 표시되려면 API Key를 추가해야합니다.
+
+최상위 경로에 `.env.local` 파일을 추가합니다. 시리얼 구글 계정으로 https://developers.kakao.com 에 로그인해 JavaScript 키를 env에 추가합니다.
+
+```sh
+# .env.local
+NEXT_PUBLIC_KAKAO_MAP_API_KEY=fc1e3ad82010475381daf9846e627fdd
+```
 
 ## 컨벤션
 
@@ -53,12 +66,13 @@ npm run dev
 
 ### 브랜치
 
-- `develop`에서 브랜치를 파 작업합니다.
+- `develop`에서 브랜치를 만들어 작업합니다.
 - 이후 PR 리뷰 후 approve가 되면 `develop`으로 **squash merge**합니다. 머지 직후 github action에서 https://cse-dev-waffle.bacchus.io/ 로 자동 배포됩니다.
-- 테스트가 완료되면 main으로 머지합니다(어떻게?). 이후 배포는 수동으로 진행합니다.
+- 테스트가 완료됐다고 판단되면 `develop`에서 `main`으로 머지합니다. prod 배포는 수동으로 진행합니다.
 - 브랜치명은 `{타입}/{브랜치명}` 으로 작성합니다.
   - 타입: feat, fix, chore, style, refactor
-- PR 제목은 [gitmoji](https://gitmoji.dev/)를 활용해 작성합니다.
+- PR 제목은 귀여운 [gitmoji](https://gitmoji.dev/)를 활용해 작성합니다.
+  - 이모지 찾기 귀찮다고요? [Raycast](https://www.raycast.com/)의 [깃모지 plugin](https://www.raycast.com/ricoberger/gitmoji)을 써보세요.
 
 ### 커밋
 
@@ -77,7 +91,6 @@ npm run dev
 
 ## Maintainers
 
-- @yeolyi
-  - https://yeolyi.com
-  - https://instagram.com/yeolyii
-- @Limchansol
+- [@yeolyi](https://github.com/yeolyi)
+  - [컴공 홈페이지 개발기](https://www.instagram.com/p/C6hJ8UlyVQS)
+- [@Limchansol](https://github.com/limchansol)

app/[locale]/layout.tsx

@@ -98,8 +98,13 @@ function BuildVersion() {
   return (
     <div className="fixed right-0 top-0 z-50 bg-[royalblue] p-2 text-sm font-semibold text-white">
       <p>Beta Version: {buildVersion}</p>
-      <Link className="text-white underline" href="https://cse.snu.ac.kr">
-        공식 홈페이지 가기
+      <Link
+        className="text-white underline"
+        href="https://cse.snu.ac.kr"
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        👉 공식 홈페이지 가기
       </Link>
     </div>
   );

package.json

@@ -3,10 +3,13 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "TZ=Asia/Seoul LANG=ko_KR.UTF-8 TIME=ko_KR.UTF-8 NODE_ENV=development node server.mjs",
-    "build": "next build",
-    "build:develop": "BUILD_VERSION=$(date +%Y%m%d%H%M%S) next build",
-    "start": "TZ=Asia/Seoul LANG=ko_KR.UTF-8 TIME=ko_KR.UTF-8 NODE_ENV=production node server.mjs",
+    "dev": "PHASE=local node server.mjs",
+    "build:local": "PHASE=local next build",
+    "start:local": "PHASE=local NODE_ENV=production node server.mjs",
+    "build:beta": "PHASE=beta next build",
+    "start:beta": "PHASE=beta NODE_ENV=production node server.mjs",
+    "build:prod": "PHASE=prod next build",
+    "start:prod": "PHASE=prod NODE_ENV=production node server.mjs",
     "prepare": "husky",
     "postbuild": "next-sitemap"
   },
@@ -22,7 +25,6 @@
     "autolinker": "^4.0.0",
     "autoprefixer": "10.4.14",
     "bezier-easing": "^2.1.0",
-    "dayjs": "^1.11.9",
     "es-toolkit": "^1.27.0",
     "express": "^4.19.2",
     "file-loader": "^6.2.0",

server.mjs

@@ -1,8 +1,29 @@
+import { execSync } from 'child_process';
 import express from 'express';
 import next from 'next';
 
-const PORT = 3000;
-const IS_DEV = process.env.NODE_ENV !== 'production';
+const port = 3000;
+const isDev = process.env.NODE_ENV === 'development';
+const phase = process.env.PHASE;
+
+process.env.TZ = 'Asia/Seoul';
+process.env.LANG = process.env.TIME = 'ko_KR.UTF-8';
+
+switch (phase) {
+  case 'prod':
+    process.env.BASE_URL = 'http://localhost:8080/api';
+    break;
+  case 'beta':
+    process.env.BUILD_VERSION = execSync('git rev-parse --short HEAD').toString();
+    process.env.BASE_URL = 'http://localhost:8080/api';
+    break;
+  case 'local':
+    process.env.BASE_URL = 'https://cse-dev-waffle.bacchus.io/api';
+    break;
+  default:
+    console.error(`PHASE 환경변수는 prod, beta, local 중 하나여야합니다: ${phase}`);
+    process.exit(1);
+}
 
 /**
  * 리액트 내부적으로 사용하는 POST /reservations/seminar-room/301-417 등의 API를
@@ -28,7 +49,7 @@ const override500 = (res) => {
 };
 
 const startServer = async () => {
-  const nextServer = next({ dev: IS_DEV, port: PORT });
+  const nextServer = next({ dev: isDev, port: port });
   const handleRequest = nextServer.getRequestHandler();
   await nextServer.prepare();
 
@@ -62,9 +83,9 @@ const startServer = async () => {
     return handleRequest(req, res);
   });
 
-  app.listen(PORT, () => {
-    console.log(`PORT: ${PORT}`);
-    console.log(`IS_DEV: ${IS_DEV}`);
+  app.listen(port, () => {
+    console.log(`PORT: ${port}`);
+    console.log(`IS_DEV: ${isDev}`);
   });
 };