Merge pull request #347 from boostcampwm-2022/develop

Release v1.0.4

.github/workflows/backend-dev-cd.yml

@@ -66,7 +66,7 @@ jobs:
           username: ${{ secrets.BACKEND_DEV_REMOTE_SSH_ID }}
           password: ${{ secrets.BACKEND_DEV_REMOTE_ADMIN_KEY }}
           port: ${{ secrets.BACKEND_DEV_REMOTE_SSH_PORT }}
-          source: 'backend/docker-compose.yml,backend/nginx/dev/nginx.conf,backend/scripts/dev-deploy.sh'
+          source: 'backend/docker-compose.yml,backend/nginx/dev/conf/nginx.conf,backend/scripts/dev-deploy.sh'
           target: 'moyeomoyeo'
 
       - name: deploy

README.md

@@ -39,11 +39,43 @@
 
 <br></br>
 
+# ✨ 주요 기능
+
+[👉🏻 시연영상 보러가기](https://www.youtube.com/watch?v=FR3IAFBxvO4)
+
+<table>
+    <tr>
+      <td align="center" width="25%">모집게시글 목록 조회</td>
+      <td align="center" width="25%">모집 게시글 등록</td>
+      <td align="center" width="25%">모집 신청 참가/취소</td>
+      <td align="center" width="25%">모집 성사 알림, 오픈채팅방 링크</td>
+    </tr>
+    <tr>
+      <td><img src="https://user-images.githubusercontent.com/67570061/207778404-43ffe050-fdeb-41a0-a77e-db3977ab4a1c.gif"/></td>
+      <td><img src="https://user-images.githubusercontent.com/67570061/207778608-54e0a59a-5998-413b-8650-c9a8839a4179.gif"/></td>
+      <td><img src="https://user-images.githubusercontent.com/67570061/207778658-2bf27fc2-b55c-4621-8776-f8c72c8ca9ea.gif"/></td>
+      <td><img src="https://user-images.githubusercontent.com/67570061/207779175-1ca1f5f6-0cf4-4b96-bfa2-cbbe1cb494e3.gif"/></td>
+    </tr>
+    <tr>
+      <td>무한 스크롤을 통한 페이지네이션이 적용되어 있으며, 필터링이 가능합니다.</td>
+      <td>원하는 모임 모집 게시글을 작성할 수 있습니다.</td>
+      <td>모집중인 모임에 참가 신청/취소 할 수 있습니다.</td>
+      <td>모집이 완료되면 알림이 발송되며, 오픈채팅방 링크를 통해 모임 채팅방에 참여할 수 있습니다.</td>
+    </tr>
+ </table>
+
+
 
-# 🫵 프로젝트 포인트
+<br></br>
 
 
-강조하고 싶은 것들
+# 🫵 프로젝트 포인트
+
+- 중복 게시글 조회 방지를 위해 페이지네이션 방식 변경 및 쿼리 개선을 진행했습니다. [👉🏻보러가기](https://boostcamp-wm.notion.site/feat-2a1dd8ea684d44ebb7176d5efbbc8aeb)
+- `custom hook`, `error class`, `ErrorBoundary`를 이용하여 API 핵심 로직과 에러 처리의 관심사를 분리하였고,<br/>사용자에게 적절한 오류 화면을 보여주도록 했습니다. [👉🏻보러가기](https://boostcamp-wm.notion.site/957e4b7034d64d0c8fa59f47e58c112d)
+- 성능 및 사용자 경험 개선을 위해 이미지 최적화와 SSR, Blur, Skeleton을 적용 했습니다. [👉🏻보러가기](https://boostcamp-wm.notion.site/e959fbc871514fb29a407dfe3f2447b9)
+- 컴포넌트의 체계적인 설계와 문서화를 통해 개발자 경험을 향상시키고자 스토리북을 도입했습니다. [👉🏻보러가기](https://boostcamp-wm.notion.site/a54eb762007f4ec185ee008a396d7a82)
+- CI/CD 파이프라인을 구축하고 지속적으로 개선했습니다. CI 시간을 약 40s 단축했습니다. [👉🏻보러가기](https://boostcamp-wm.notion.site/CI-CD-e6f15386baa34b238884678928ff3c61)
 
 <br></br>
 

backend/docker-compose.yml

@@ -6,14 +6,12 @@ services:
     image: nginx
     restart: always
     volumes:
-      - ./nginx/dev:/etc/nginx/conf.d
+      - ./nginx/dev/conf:/etc/nginx/conf.d
       - /letsencrypt/certbot/conf:/etc/letsencrypt
       - /letsencrypt/certbot/www:/var/www/certbot
     ports:
       - 80:80
       - 443:443
-    depends_on:
-      - moyeo-server
     networks:
       - backbone
     command: '/bin/sh -c ''while :; do sleep 6h & wait $${!}; nginx -s reload; done & nginx -g "daemon off;"'''
@@ -31,17 +29,6 @@ services:
       - backbone
     entrypoint: "/bin/sh -c 'trap exit TERM; while :; do certbot renew; sleep 12h & wait $${!}; done;'"
 
-  moyeo-server:
-    container_name: moyeo-server
-    image: ${DOCKER_SERVER_IMAGE}
-    environment:
-      NODE_ENV: development
-    ports:
-      - 3000:3000
-    command: npm run start:dev
-    networks:
-      - backbone
-
   moyeo-db:
     container_name: moyeo-db
     image: mysql:8.0
@@ -61,6 +48,28 @@ services:
     networks:
       - backbone
 
+  moyeo-server-green:
+    container_name: moyeo-server-green
+    image: ${DOCKER_SERVER_IMAGE}
+    environment:
+      NODE_ENV: development
+    expose:
+      - 3000
+    command: npm run start:dev
+    networks:
+      - backbone
+
+  moyeo-server-blue:
+    container_name: moyeo-server-blue
+    image: ${DOCKER_SERVER_IMAGE}
+    environment:
+      NODE_ENV: development
+    expose:
+      - 3000
+    command: npm run start:dev
+    networks:
+      - backbone
+
 networks:
   backbone:
     driver: bridge

backend/local/nginx.conf

@@ -11,4 +11,10 @@ server {
         proxy_pass http://backend-server;
         proxy_http_version 1.1;
     }
+
+    location = /v1/sse {
+        proxy_pass http://backend-server;
+        proxy_http_version 1.1;
+        proxy_read_timeout 600s;
+    }
 }

backend/nginx/dev/nginx.conf → backend/nginx/dev/conf/nginx.conf

@@ -1,6 +1,6 @@
 
 upstream backend-server {
-    server moyeo-server:3000;
+    server moyeo-server-blue:3000;
 }
 
 server {
@@ -35,4 +35,10 @@ server {
         proxy_pass http://backend-server;
         proxy_http_version 1.1;
     }
+
+    location = /v1/sse {
+        proxy_pass http://backend-server;
+        proxy_http_version 1.1;
+        proxy_read_timeout 600s;
+    }
 }

backend/nginx/prod/nginx.conf

@@ -35,4 +35,10 @@ server {
         proxy_pass http://backend-server;
         proxy_http_version 1.1;
     }
+
+    location = /v1/sse {
+        proxy_pass http://backend-server;
+        proxy_http_version 1.1;
+        proxy_read_timeout 600s;
+    }
 }

backend/package.json

@@ -15,7 +15,7 @@
     "start:prod": "node dist/main",
     "start:local": "docker compose -f docker-compose.local.yml up -d --build",
     "stop:local": "docker compose -f docker-compose.local.yml down",
-    "reload:local": "docker compose -f docker-compose.local.yml up --force-recreate -d",
+    "reload:local": "docker compose -f docker-compose.local.yml up -d --build",
     "lint:fix": "eslint \"{src,apps,libs,test}/**/*.ts\" --fix",
     "lint": "eslint \"{src,apps,libs,test}/**/*.ts\"",
     "test": "env-cmd -f .env.test jest",

backend/scripts/dev-deploy.sh

@@ -12,8 +12,45 @@ echo -e $4 > .env
 
 echo "create .env"
 
-# docker down
-docker compose down --rmi all --remove-orphans
-
-# docker up
-docker compose up -d --build
+RUNNING_APPLICATION=$(docker ps | grep moyeo-server-blue)
+DEFAULT_CONF="./nginx/dev/conf/nginx.conf"
+
+if [ -n "$RUNNING_APPLICATION" ];then
+	echo "green Deploy..."
+	docker compose pull moyeo-server-green
+	docker compose up -d moyeo-server-green
+	docker rmi $(docker images -f "dangling=true" -q)
+
+	while [ 1 == 1 ]; do
+		echo "green health check...."
+		REQUEST=$(docker exec moyeo-nginx curl http://moyeo-server-green:3000)
+		echo $REQUEST
+		if [ -n "$REQUEST" ]; then
+			break ;
+		fi
+		sleep 3
+	done;
+
+	sed -i 's/moyeo-server-blue/moyeo-server-green/g' $DEFAULT_CONF
+	docker exec moyeo-nginx service nginx reload
+	docker compose stop moyeo-server-blue
+else
+	echo "blue Deploy..."
+	docker compose pull moyeo-server-blue
+    docker compose up -d moyeo-server-blue
+	docker rmi $(docker images -f "dangling=true" -q)
+
+	while [ 1 == 1 ]; do
+		echo "blue health check...."
+                REQUEST=$(docker exec moyeo-nginx curl http://moyeo-server-blue:3000)
+                echo $REQUEST
+		if [ -n "$REQUEST" ]; then
+            break ;
+        fi
+		sleep 3
+    done;
+
+	sed -i 's/moyeo-server-green/moyeo-server-blue/g' $DEFAULT_CONF
+    docker exec moyeo-nginx service nginx reload
+	docker compose stop moyeo-server-green
+fi

backend/src/app.module.ts

@@ -1,7 +1,5 @@
 import { MiddlewareConsumer, Module, NestModule } from '@nestjs/common';
 import { EventEmitterModule } from '@nestjs/event-emitter';
-import { AppController } from './app.controller';
-import { AppService } from './app.service';
 import { AppConfigModule } from '@config/app/config.module';
 import { ApiSuccessLoggerMiddleware } from '@middleware/api-success-logger.middleware';
 import { ApiExceptionLoggerMiddleware } from '@middleware/api-exception-logger.middleware';
@@ -17,6 +15,8 @@ import { GroupApplicationModule } from '@app/group-application/group-application
 import { NotificationModule } from '@app/notification/notification.module';
 import { CommentModule } from '@app/comment/comment.module';
 import { AppConfigService } from '@common/config/app/config.service';
+import { SseModule } from '@common/module/sse/sse.module';
+import { SseController } from '@src/sse.controller';
 
 @Module({
   imports: [
@@ -33,15 +33,15 @@ import { AppConfigService } from '@common/config/app/config.service';
     GroupApplicationModule,
     NotificationModule,
     CommentModule,
+    SseModule,
   ],
-  controllers: [AppController],
-  providers: [AppService],
+  controllers: [SseController],
 })
 export class AppModule implements NestModule {
-  constructor(private readonly appConfigSerivce: AppConfigService) {}
+  constructor(private readonly appConfigService: AppConfigService) {}
 
   configure(consumer: MiddlewareConsumer) {
-    if (!this.appConfigSerivce.isTest()) {
+    if (!this.appConfigService.isTest()) {
       consumer
         .apply(ApiSuccessLoggerMiddleware, ApiExceptionLoggerMiddleware)
         .forRoutes('*');

backend/src/app/group-article/dto/group-article-register-request.dto.ts

@@ -32,6 +32,7 @@ export class GroupArticleRegisterRequest {
     required: true,
   })
   @IsString()
+  @Length(1)
   contents: string;
 
   @ApiProperty({
@@ -66,6 +67,7 @@ export class GroupArticleRegisterRequest {
     description: '썸네일 이미지가 저장되어있는 주소(url)',
     required: true,
   })
+  @Length(1)
   @IsUrl()
   thumbnail: string;
 
@@ -75,5 +77,6 @@ export class GroupArticleRegisterRequest {
     required: false,
   })
   @IsString()
+  @Length(1)
   chatUrl: string;
 }

backend/src/app/group-article/group-article.controller.ts

@@ -144,7 +144,7 @@ export class GroupArticleController {
 
   @Get('search')
   @Version('2')
-  @ApiSuccessResponse(HttpStatus.OK)
+  @ApiSuccessResponse(HttpStatus.OK, V2SearchGroupArticlesResponse)
   async searchV2(@Query() query: V2SearchGroupArticlesRequest) {
     const result = await this.groupArticleRepository.searchV2({
       limit: query.limit,

backend/src/app/notification/dto/notification-sse.dto.ts

@@ -0,0 +1,23 @@
+import { MessageEvent } from '@nestjs/common';
+import { GetUserNotificationResult } from '@app/notification/dto/get-user-notification-result.dto';
+import { UserNotification } from '@app/notification/entity/user-notification.entity';
+import { randomUUID } from 'crypto';
+
+export class NotificationSse implements MessageEvent {
+  id: string;
+  data: GetUserNotificationResult;
+  type: string;
+
+  retry: number;
+
+  static async from(userNotification: UserNotification) {
+    const notificationSse = new NotificationSse();
+    notificationSse.id = randomUUID();
+    notificationSse.data = await GetUserNotificationResult.from(
+      userNotification,
+    );
+    notificationSse.type = 'NOTIFICATION';
+    notificationSse.retry = 3 * 1000;
+    return notificationSse;
+  }
+}