1. react 디렉터리 구조

my-app/
│
├── public/                # 정적 파일들을 저장합니다.
│   ├── index.html         # 메인 HTML 파일입니다.
│   └── favicon.ico        # 웹사이트의 파비콘 아이콘입니다.
│
├── src/                   # 소스 코드를 저장하는 디렉터리입니다.
│   ├── components/        # 재사용 가능한 UI 컴포넌트들을 저장합니다.
│   │   ├── Layout/        # 레이아웃과 관련된 컴포넌트들입니다.
│   │   ├── Button/        # 버튼과 관련된 컴포넌트들입니다.
│   │   ├── Form/          # 폼과 관련된 컴포넌트들입니다.
│   │   ├── ListItem/      # 리스트 아이템과 관련된 컴포넌트들입니다.
│   │   └── Popup/         # 팝업과 관련된 컴포넌트들입니다.
│   │
│   ├── pages/             # 페이지 컴포넌트들을 저장합니다.
│   │
│   ├── services/          # API 호출이나 외부 서비스 로직을 저장합니다.
│   │
│   ├── contexts/          # React context를 사용한 전역 상태 관리 로직을 저장합니다.
│   │
│   ├── assets/            # 이미지, 폰트 등의 정적 리소스를 저장합니다.
│   │
│   ├── styles/            # SCSS 스타일 파일들을 저장합니다.
│   │
│   ├── utils/             # 유틸리티 함수를 저장합니다.
│   │
│   │
│   ├── mocks/             # 가짜 API 응답이나 테스트 데이터를 저장합니다.
│   │   └── users.js       # 사용자 데이터의 목업입니다.
│   │
│   ├── tests/             # 테스트 코드를 저장합니다.
│   │
│   ├── index.js           # 애플리케이션의 엔트리 포인트입니다.
│   └── App.js             # 메인 App 컴포넌트입니다.
│
├── .storybook/             # Storybook 설정 파일을 저장하는 디렉터리입니다.
│   ├── main.js             # Storybook의 기본 설정 파일입니다.
│   └── preview.js          # 컴포넌트 미리보기를 커스터마이징하는 파일입니다.
│
├── stories/                # Storybook 스토리 파일을 저장하는 디렉터리입니다.
│   ├── Button.stories.js   # Button 컴포넌트의 스토리 파일입니다.
│   └── ...
│
├── package.json           # 프로젝트의 의존성과 스크립트를 정의합니다.
├── README.md              # 프로젝트에 대한 설명을 담은 README 파일입니다.
└── ...

2. express 디렉터리 구조

my-express-app/
│
├── routes/                 # 라우터 파일들을 저장합니다.
│   ├── index.js            # 기본 라우트를 정의합니다.
│   └── users.js            # 사용자 관련 라우트를 정의합니다.
│
├── controllers/            # 컨트롤러를 저장합니다.
│   ├── indexController.js  # 'index' 경로의 컨트롤러입니다.
│   └── userController.js   # 'user' 경로의 컨트롤러입니다.
│
├── services/               # 서비스 로직을 저장합니다.
│   └── userService.js      # 사용자 관련 서비스 로직입니다.
│
├── models/                 # 데이터 모델 파일들을 저장합니다.
│
├── utils/                  # 유틸리티 함수를 저장합니다.
│   └── helpers.js          # 다양한 유틸리티 함수를 포함합니다.
│
├── middleware/             # 미들웨어 파일들을 저장합니다.
│
├── tests/                  # 테스트 코드를 저장합니다.
│   ├── unit/               # 유닛 테스트 코드를 저장합니다.
│   └── integration/        # 통합 테스트 코드를 저장합니다.
│
├── docs/                   # 문서화 관련 파일들을 저장합니다.
│   ├── api/                # API 문서를 저장합니다.
│   └── setup.md            # 개발 환경 설정 문서입니다.
│
├── app.js                  # 앱 설정과 미들웨어를 정의합니다.
│
├── package.json            # 프로젝트의 의존성과 스크립트를 정의합니다.
│
└── README.md               # 프로젝트에 대한 설명을 담은 README 파일입니다.

3. nest 디렉터리 구조

src/
|-- app.controller.ts             # 기본 컨트롤러 파일
|-- app.controller.spec.ts        # 기본 컨트롤러 테스트 파일
|-- app.module.ts                 # 기본 모듈 파일
|-- app.service.ts                # 기본 서비스 파일
|-- app.service.spec.ts           # 기본 서비스 테스트 파일
|-- main.ts                       # 애플리케이션의 엔트리 포인트
|-- common/                       # 공통 코드 폴더
|   |-- interfaces/               # 공통 인터페이스
|   |   |-- user.interface.ts
|   |   |-- product.interface.ts
|-- modules/                      # 모듈 폴더
|   |-- users/                    
|   |   |-- dto/                  
|   |   |   |-- create-user.dto.ts
|   |   |-- user-validator.ts     # 사용자 관련 컴포넌트(서비스나 공통 로직)
|   |   |-- user-validator.spec.ts # 컴포넌트 테스트 파일
|   |   |-- users.controller.ts  
|   |   |-- users.controller.spec.ts
|   |   |-- users.module.ts      
|   |   |-- users.service.ts     
|   |   |-- users.service.spec.ts 
|   |-- products/                 
|   |   |-- dto/                  
|   |   |   |-- create-product.dto.ts
|   |   |-- product-validator.ts   # 제품 관련 컴포넌트(서비스나 공통 로직)
|   |   |-- product-validator.spec.ts # 컴포넌트 테스트 파일
|   |   |-- products.controller.ts
|   |   |-- products.controller.spec.ts
|   |   |-- products.module.ts  
|   |   |-- products.service.ts 
|   |   |-- products.service.spec.ts  
|-- middlewares/                  # 미들웨어 폴더
|   |-- logger.middleware.ts
|   |-- logger.middleware.spec.ts # 미들웨어 테스트 파일
|-- utils/                        # 유틸리티 폴더
    |-- helpers.ts
    |-- helpers.spec.ts           # 유틸리티 테스트 파일

4. next 디렉터리 구조(v12)

my-next-app/
│
├── .next/                     # 빌드 생성 디렉터리
│   ├── cache/
│   └── ...
│
├── api-lib/                   # API 호출과 관련된 로직 라이브러리
│   ├── userApi.js
│   └── postApi.js
│
├── assets/                    # 다양한 미디어 자원을 저장하는 디렉터리
│   ├── images/
│   └── icons/
│
├── docs/                      # 필요한 참고문서를 저장하는 디렉터리
│   ├── Frontend/
│   ├── Backend/
│   └── Design/
│
├── components/                # 재사용 가능한 UI 컴포넌트를 저장하는 디렉터리
│   ├── Header.js
│   ├── Footer.js
│   └── ...
│
├── hooks/                     # 커스텀훅을 저장하는 디렉터리
│   ├── useTimeFormat.js
│   └── ...
│
├── lib/                       # 외부 라이브러리 또는 프로젝트 내부에서 사용하는 유틸리티 함수
│   ├── util.js
│   └── helper.js
│
├── page-components/           # 특정 페이지에서만 사용되는 컴포넌트를 저장하는 디렉터리
│   ├── HomePageComponents/
│   └── AboutPageComponents/
│
├── pages/                     # 페이지 컴포넌트 및 API 라우트를 저장하는 디렉터리
│   ├── _app.js
│   ├── _document.js
│   ├── index.js
│   └── api/                   # API를 저장하는 디렉터리
│       └── user.js
│
├── styles/                    # scss, 스타일을 저장하는 디렉터리
│   ├── globals.scss
│   ├── Home.module.scss
│   └── ...
│
├── mocks/                     # 더미 객체를 저장하는 디렉터리 (api 연결 전에 테스트)
│   ├── handler.js
│   └── ...
│
├── public/                    # 정적 파일을 저장하는 디렉터리
│   ├── favicon.ico
│   └── logo.png
│
├── package.json               # 프로젝트의 의존성과 스크립트를 정의하는 파일
└── README.md                  # 프로젝트에 대한 정보 및 사용 방법을 설명하는 파일

이런 식으로 프로젝트별로 디렉터리 구조를 나눌 수 있고 보편적으로 많이 사용하는 구조도 존재합니다.

프로젝트마다 다양한 방식으로 컴포넌트를 설계합니다. 회사에서 좀 더 큰 프로젝트를 할 때 팀원들 간 컴포넌트, 아키텍처, 컨벤션을 설정하여 프로젝트에 알맞은 구조를 설계하는 방식이 제일 좋을 것 같습니다. 이렇게 컴포넌트 구조에는 정답이 없다 보니, 여러 가지 패턴들이 많습니다. 그래서 다양한 문서를 참고해서 자신에게 맞는 방법으로 설계해 보는 연습이 필요합니다.

1. express DB 연결

1. mongoose 추가(DB 커넥트 모듈 추가)

   npm install mongoose

2. 코드 추가

   const mongoose = require("mongoose");
   

require("dotenv").config();

mongoose.connect(${process.env.DATABASE_URL}, { useNewUrlParser: true, useUnifiedTopology: true, });

const db = mongoose.connection;

db.on("error", console.error.bind(console, "MongoDB connection error:")); db.once("open", function () { console.log("Connected to MongoDB"); });

app.get("/", (req, res) => { res.send(자동 배포 확인); });

3. DB_URL 시크릿 추가
```bash
docker inspect -f '{{range .NetworkSettings.Networks}}{{.IPAddress}}{{end}}' mongodb

DATABASE_URL = mongodb://172.17.0.2:27017/test

4. 배포 확인

2. nest DB 연결

1. mongodb 모듈 추가(DB 커넥트 모듈 추가)

   npm install @nestjs/mongoose mongoose

2. 코드 추가

   import { Module } from '@nestjs/common';
   import { AppController } from './app.controller';
   import { AppService } from './app.service';
   import { ConfigModule, ConfigService } from '@nestjs/config';
   import { MongooseModule } from '@nestjs/mongoose';
   @Module({
   imports: [
    ConfigModule.forRoot(),
    MongooseModule.forRootAsync({
      imports: [ConfigModule],
      useFactory: async (configService: ConfigService) => ({
        uri: configService.get<string>('DATABASE_URL'),
        useNewUrlParser: true,
        useUnifiedTopology: true,
      }),
      inject: [ConfigService],
    }),
   ],
   controllers: [AppController],
   providers: [AppService],
   })
   export class AppModule {}

3. DB_URL 시크릿 추가

4. 배포 확인

3. Nextjs api DB 연결

1. 코드 추가

   const router = useRouter();
   async function addMeetupHandler(enteredMeetupData) {
   const response = await fetch("/api/new-meetup",{            // 1.
    method:"POST",
    body: JSON.stringify(enteredMeetupData),
    headers:{
      "Content-Type":"application/json"
    }
   });
   const data = await response.json();
   router.replace("/");
   }
   return(
   <NewMeetupForm onAddMeetup={addMeetupHandler}/>            // 2.
   )

2. DB_URL 시크릿 추가

3. 배포 확인

1. 보안

비밀번호 및 액세스 키: 코드 내에 직접 비밀번호나 API 키 같은 민감한 정보를 작성하는 것은 큰 보안 위험을 가지고 있습니다. 이 정보가 외부에 노출되면, 악의적인 사용자들이 그 정보를 이용해 손상을 줄 수 있습니다. 환경 변수를 사용하면 이러한 중요한 정보를 코드 밖으로 분리시키며, 코드 자체는 공개적으로 공유하더라도 민감한 데이터는 보호할 수 있습니다.

2. 설정의 일관성과 유연성

다양한 환경에서의 사용: 개발, 스테이징, 및 프로덕션과 같이 다양한 환경에서 동작하는 애플리케이션의 경우, 각 환경마다 설정값이 다를 수 있습니다. 환경 변수를 사용함으로써 동일한 코드베이스를 유지하면서, 각 환경의 특성에 맞는 설정값을 적용할 수 있습니다.

3. 코드의 재사용

코드의 재사용성 증가: 환경 변수를 통해 설정값을 외부에서 주입받을 수 있게 만듦으로서, 코드는 좀 더 범용적으로 사용될 수 있습니다. 즉, 동일한 코드를 다양한 프로젝트나 환경에서 재사용할 수 있으며, 각기 다른 환경 변수 설정으로 다르게 동작하게 할 수 있습니다.

4. 유지보수

유지보수의 용이성: 환경 변수를 사용함으로써, 설정값을 변경해야 할 경우 코드 자체를 수정하지 않고 환경 변수만 업데이트하면 됩니다. 이렇게 함으로써 유지보수가 용이해지며, 코드 변경 없이도 설정의 수정이 가능합니다. GitHub Actions과 환경 변수 GitHub에서 제공하는 CI/CD 도구인 "GitHub Actions"에서도 환경 변수를 설정하고 사용하는 것은 중요합니다. GitHub Actions의 워크플로우에서 환경 변수를 설정하면, 실행되는 각 작업이나 단계에서 이 변수들을 사용할 수 있게 됩니다. 이는 위에서 언급한 보안, 설정의 일관성, 코드의 재사용, 및 유지보수 측면에서의 이점들을 모두 가져올 수 있습니다.

이러한 장점들로 환경 변수를 설정하는 것이 굉장히 유용하고 생산적인 걸 알 수 있습니다. 다음으로 환경 변수를 설정하는 방법을 알아보겠습니다.

Github Secrets 설정하기

1. GitHub 저장소의 "Settings"로 이동합니다.
2. 왼쪽 메뉴에서 "Secrets and variables" 클릭 후 "Actions"을 선택합니다.
3. "New repository secret" 버튼을 클릭하여 새 시크릿을 추가합니다. 예를 들어, DATABASE_URL 이라는 이름의 시크릿에 데이터베이스 URL을 저장할 수 있습니다.
4. github actions + watch tower로 개발 환경에 대한 세팅을 확인합니다.
5. 각 환경에 맞게 git secret을 사용 환경 변수에 맞게 읽어와서 적용 되는지 확인합니다.

1. React.js develop 브런치 secret

1. 시크릿 세팅

2. workflow 세팅 ```bash

• name: Create .env file

  run: |
    echo REACT_APP_DEV_PUBLIC_API_URI=${{ secrets.DEV_PUBLIC_API_URI }} >> .env

3. 리액트쪽에서 환경 변수

2. Nest js 환경 변수 세팅

1. 시크릿 세팅

2. workflows 세팅 ```bash

• name: Create .env file

  run: |
    echo DATABASE_URL=${{ secrets.DEV_DATABASE_URL }} >> .env

3. nestjs config 패키지 설치

   npm install @nestjs/config

4. configModule 추가

5. 환경 변수 사용하기

6. 확인

3. express 환경 변수 세팅

1. 시크릿 세팅

2. workflow 세팅 ```bash

• name: Create .env file

  run: |
    echo DATABASE_URL=${{ secrets.DEV_DATABASE_URL }} >> .env

3. dotenv 설치

   npm install dotenv

4. config 사용

   require("dotenv").config();
   

app.get("/", (req, res) => { res.send(자동 배포 확인 ${process.env.DEV_DATABASE_URL}); });

5. 확인
![](https://velog.velcdn.com/images/ni_market_dev/post/818ed470-d032-4365-a147-4ffb0c9fe1d6/image.png)

---

### 4. Next js 환경 변수 세팅
1. 시크릿 세팅
![](https://velog.velcdn.com/images/ni_market_dev/post/bf20825a-a317-4c90-ae2f-352ae9a5afa0/image.png)

2. workflow 세팅
```bash
- name: Create .env file
      run: |
        echo REACT_APP_DEV_PUBLIC_API_URI=${{ secrets.DEV_PUBLIC_API_URI }} >> .env

3. 환경 변수 가져오기

   import Image from 'next/image'
   

export default function Home() { return (

4. 확인
![](https://velog.velcdn.com/images/ni_market_dev/post/ed0bdd8f-9a0a-4018-8e1c-fdf3e8873fea/image.png)

개발 서버 자동 배포 세팅을 하기 위해서는 우선

1. 개발서버 자동 배포를 세팅하기 위해서 watchtower을 세팅합니다.
2. Github actions를 사용하면서 자동으로 빌드 된 이미지를 docker hub(harbor)에 push 진행합니다.
3. push 된 이미지를 자동으로 감지해서 자동으로 컨테이너를 업데이트하는 로직을 구축합니다.

* 사용한 이미지 경로

Watchtower

docker run -d \
    --name watchtower \
    -v /var/run/docker.sock:/var/run/docker.sock \
    -e WATCHTOWER_POLL_INTERVAL=300 \
    -e DOCKER_USERNAME=tenxtube \
    -e DOCKER_PASSWORD=72quf6!!22 \
    containrrr/watchtower

1. react ci/cd

1. 리액트 프로젝트에 대한 레퍼지토리를 만듭니다.

2. Github actions으로 develop 브랜치에 push가 되었을 때 Github actions에 빌드 해서 docker hub에 올라갈 수 있도록 세팅합니다. 일단 Github 시크릿에 DOCKER_HUB_USERNAME/DOCKER_HUB_PASSWORD를 등록해서 사용합니다.

3. 빌드 테스트 .github\workflows\react_build.yml

   name: React Build Workflow
   

on: push: branches: - develop

jobs: build: runs-on: ubuntu-latest

steps:
- name: Check out code
  uses: actions/checkout@v2

- name: Set up Node.js
  uses: actions/setup-node@v2
  with:
    node-version: '14'  # You can specify your Node.js version here

- name: Install dependencies
  run: npm install

- name: Build
  run: npm run build

![](https://velog.velcdn.com/images/ni_market_dev/post/245417a1-365b-45ce-9cd1-1d0c1a2470eb/image.png)

4. 빌드 + docker hub에 push 진행
```yaml
name: React Build and Docker Push Workflow

on:
  push:
    branches:
      - develop

jobs:
  build_and_push:
    runs-on: ubuntu-latest

    steps:
    - name: Check out code
      uses: actions/checkout@v2

    - name: Set up Node.js
      uses: actions/setup-node@v2
      with:
        node-version: '16'  # You can specify your Node.js version here

    - name: Install dependencies
      run: npm install

    - name: Build React Project
      run: npm run build

    - name: Login to Docker Hub
      uses: docker/login-action@v1
      with:
        username: ${{ secrets.DOCKER_HUB_USERNAME }}
        password: ${{ secrets.DOCKER_HUB_PASSWORD }}

    - name: Build and push Docker image
      run: |
        docker build -t tenxtube/react-test:develop .
        docker push tenxtube/react-test:develop

5. docker file 추가

   # React Dockerfile
   FROM node:16
   

WORKDIR /app

COPY package*.json ./

RUN npm install

COPY . .

EXPOSE 3000

CMD ["npm", "start"]

![](https://velog.velcdn.com/images/ni_market_dev/post/7fa3ee32-3122-4281-833b-c3391c4cf65b/image.png)
```bash
docker run -p 3000:3000 tenxtube:develop -d

6. 수정 후에 업데이트 했을 때 자동으로 잘 되는지 확인

2. nest ci/cd

nest new nest-test

1. nest 프로젝트 main push 합니다.
2. docker file, workflows 설정합니다.
3. 포트 및 외부 접속 허용합니다.

import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';

async function bootstrap() {
  const app = await NestFactory.create(AppModule);
  await app.listen(3001, '0.0.0.0');
}
bootstrap();

3. express ci/cd

1. express 프로젝트 main 기본 push 합니다.
2. docker file, workflows 작성합니다.

자동 배포 테스트

4. next ci/cd

1. Next main 브랜치에 기본 push 합니다.
2. docker file, workflows 작성합니다.

3. 자동 배포 테스트

우선 개발을 하려면, 각자 개발자 PC에 개발 및 테스트 환경이 셋업 되어 있어야 합니다. 각 개발자마다, 설치된 서버 환경을 local 환경이라고 하고 이 local 환경을 구축할 시에 가장 주의해야 할 점은 모든 개발자가 같은 개발 환경을 사용해야 한다는 것입니다. 실제로 많이 일어나는 문제인데, 다른 version은 JVM를 사용하거나, 다른 버전의 Tomcat을 사용하거나 Lang (문자 local 설정)을 서로 다르게 해서, 정작 코드를 합칠 때, local에서 잘 작동했던 코드가 작동하지 않는 경우가 많습니다.

로컬 개발 환경을 맞추었다면 Github develop 브랜치에 push를 해서 확인을 하고 Github actions에서 이미지 빌드 후 docker hub, habor에 이미지를 push를 합니다. 현재는 public으로 docker hub를 사용하고 있지만 추후에 habor로 변경할 계획입니다.

개발 서버에 push 되어있는 watchtower에서 업데이트된 이미지 감지 및 배포하고 개발 서버에서 확인을 진행 후 develop 브랜치에서 main 브랜치로 merge 후 Github action에서 이미지를 빌드하고 빌드 된 이미지를 ECR에 push 하게 됩니다.

배포를 하는 과정에서 무중단 배포를 진행을 알아보면

name: Deploy hyeon9mak assignment
on:
  push:
    branches:
      - master

jobs:
  deploy:
    runs-on: ubuntu-latest

    env:
      AWS_REGION: ap-northeast-2
      ECS_CLUSTER_NAME: backend
      ECR_REPOSITORY_NAME: hyeon9mak-dev
      ECS_CONTAINER_NAME: hyeon9mak-container
      ECS_SERVICE_NAME: hyeon9mak-service-dev
      TASK_DEFINITION_NAME: hyeon9mak-task-dev
      # Github actions 자동배포 과정에서 사용할 환경변수들
      # AWS ECS 콘솔에서 이름이 모두 일치하는지 확인이 필요하다.

    steps:
      - name: Checkout
        uses: actions/checkout@v2

      - name: Configure AWS credentials For Devzone
        uses: aws-actions/configure-aws-credentials@v1
        with:
          # Github Repository Secrets에 값 등록 필요!
          aws-access-key-id: $
          aws-secret-access-key: $
          aws-region: $

      - name: Login to Amazon ECR
        id: login-ecr
        uses: aws-actions/amazon-ecr-login@v1

      - name: Install JDK 11
        uses: actions/setup-java@v2
        with:
          distribution: 'temurin'
          java-version: 11
          cache: 'gradle' # https://github.com/actions/setup-java#caching-packages-dependencies

      - name: build gradle
        run: ./gradlew clean build

      - name: Download dd-java-agent
        run: wget -O assignment-api/dd-java-agent.jar https://dtdg.co/latest-java-tracer
        # wget 명령의 -O 옵션을 통해 파일의 
        # 경로 및 이름을 지정하여 datadog agent 다운로드

      - name: Build, tag, and push image to Amazon ECR
        id: build-image
        env:
          ECR_REGISTRY: $
          SERVICE_TAG: . # Dockerfile의 경로
          IMAGE_TAG: $ # Github가 제공하는 SHA 암호화 사용
        run: |
          # Build a docker container and
          # push it to ECR so that it can
          # be deployed to ECS.
          docker build -t $ECR_REGISTRY/$ECR_REPOSITORY_NAME:$IMAGE_TAG $SERVICE_TAG
          docker push $ECR_REGISTRY/$ECR_REPOSITORY_NAME:$IMAGE_TAG
          echo "::set-output name=image::$ECR_REGISTRY/$ECR_REPOSITORY_NAME:$IMAGE_TAG"

      - name: Download Task Definition Template
        run: |
          aws ecs describe-task-definition \
            --task-definition $ \
            --query taskDefinition \
            > task-definition.json

      - name: Fill in the new image ID in the Amazon ECS task definition
        id: task-def
        uses: aws-actions/amazon-ecs-render-task-definition@v1
        with:
          task-definition: task-definition.json
          container-name: $
          image: $

      - name: Deploy Amazon ECS task definition
        uses: aws-actions/amazon-ecs-deploy-task-definition@v1
        with:
          task-definition: $
          service: $
          cluster: $
          wait-for-service-stability: true

AWS 액세스 키와 보안 키의 경우 yml 파일에 노출되기 민감한 정보이므로, Github Secrets를 통해서 관리를 합니다. 애플리케이션 Repository > Settings > Secrets > Actions 메뉴로 접근해서 Repository secret으로 등록합니다.

해당 키의 값들은 아래 명령을 통해서 확인할 수 있습니다.

$ ~/.aws/credentials

[default]
aws_access_key_id = {액세스 키}
aws_secret_access_key = {보안 키}

애플리케이션 Repository에 자동배포용 yml 파일이 준비되면, 이후 브랜치에 커밋내용이 푸시가 될 때마다 자동으로 ECS 수동배포 과정이 반복됩니다.

이후 로드밸런서(ALB)를 사용해서 관리를 진행합니다.

위 과정들을 요약해 보면 이렇게 정리할 수 있습니다.

1. 로컬에서 개발

2. develop 브랜치에 push

3. github actions에서 이미지 빌드

4. docker hub, harbor에 이미지 push

5. 개발 서버에 떠있는 watchtower에서 업데이트된 이미지 감지 및 배포

6. 개발 서버 확인

7. develop 브랜치에서 main 브랜치로 merge

8. github actions에서 이미지 빌드

9. 빌드 된 이미지 ECR에 push

10. 무중단 배포를 위한 ECS 서비스 업데이트

    1. ECS 클러스터 생성 시 CODE_DEPLOY로 설정
    2. aws codedeploy를 사용하여 블루/그린 배포를 설정
    3. 서비스 업데이트를 시작할 때 새 태스크 정의를 사용하여 서비스를 업데이트함
    4. codedeploy는 기존 태스크를 종료하기 전에 새 태스크를 시작하여 무중단 배포를 보장

11. 로드밸런서(ALB) 사용

이렇게 현재 사용하고있는 개발 및 배포 전략을 알아봤습니다.

1. 개발 환경 세팅

github, aws(ec2,eks,ecr,s3), github action ,watchtower

2. 사용 툴

vscode, github coplit, figma , notion... 이외 google docs로 공유 및 정리

3. 사용할 수 있는 기술

프론트 - react, next, storybook

백엔드 - node,express, nest

TDD - jest

서버 - linux , aws(ec2 ...)

컨테이너 기술 - docker, kubernetes(eks),rook-ceph, helm

CI/CD - github action, watchtower,Harbor,ECR

웹 서버 or 프록시 - nginx, alb, Route 53

사용 언어 및 프레임워크

• javascript, typescript, python, kotlin, flutter

4. 개발 환경을 어떻게 세팅?

• 스타트업에서 돈을 아끼면서 회사 내부 개발서버를 구축
  • 데스크탑 하나에 우분투 20.04 설치
  • ssh 세팅(ssh key를 가지고 회사 내부 망에서만 연결할 수 있도록 설정)
  • 포트 포워딩 설정(웹 - 80,443) 이외의 포트는 비밀.. ㅎㅎ
  • nginx, docker, docker-compose, nvm 기타 .... 세팅
  • 도메인 구매 및 ssl 설정(let's encrypt- 와일드 카드로) 일단은 위 과정으로 개발 서버 세팅을 진행 함