Code Gear - AI 개발 유튜브 강의

https://youtu.be/JCSiz_jgioM

요구 사항 문서 작성

지난 포스트 AI로 풀스택 개발하기:프론트엔드 개발에서 AI 개발 관련된 부분은 이미 설명을 했습니다.

다른 부분은 프레임워크, Database 연동 등이 다르므로 requirement.md를 그에 맞게 작성하시면 됩니다.

requirement.md 예시

### 1. **개발 목적 및 대상 사용자**
- **사이트 목적:** 이 사이트는 codegear.info의 backend API 서비스를 담당한다

### 2. **프레임워크**
- Node.js 기반 프레임워크인 **Nest.js**를 사용한다.
- Database는 **MySQL**을 사용한다.
- Nest.js에서 ORM은 **TypeORM**을 사용한다.

### 3. **아키텍처 요구사항**
- **Swagger** 를 사용해서 API 테스트를 용이하게 한다.
- **컴포넌트** 기능을 최대한 활용할 것.
- **에러 핸들링:** API 에러 발생 시 어떻게 HTTP 상태 코드와 에러 메시지를 전달한다 (예: `{ "statusCode": 400, "message": "Bad Request" }`)
- **인증 및 인가:** Admin 사용자의 로그인 방식은 구글 로그인을 사용한다. 구글 로그인은 백엔드와 프론트에서 처리해야 할 부분을 나누어 처리하도록 한다. JWT 토큰 방식을 사용한다. Role은 normal 과  admin 두개만 사용한다.
- **배포 환경:** 로컬에서 개발 밑 테스트 후 운영 환경에 배포한다.

### 4. **구현계획**
- 한번에 사이트를 완성하지 말고, **단계별 계획**을 세워서 만들것.
- **plan.md**에 계획 내용을 작성해서 저장해서 실제 구현시 사용할것.
- **버전 관리:** Git을 사용하고 github의 repository를 사용한다.

### 5. **언어**
- 답변은 한국어로 할것

이걸 옵시디언 같은 에디터로 열면 아래와 같이 보입니다.

구현

지난번 프론트엔드 개발시 가장 좋은 성적을 보인 클로드 코드를 사용하여 진행하겠습니다.

진행 중인 프로젝트는 아래와 같은 폴더 구조를 갖습니다.

backend 폴더에 위에서 작성한 requirement.md 파일을 복사합니다.

순서

• VSCode를 실행합니다.
• 폴더 열기에서 backend 폴더를 선택합니다.
• `Run Claude Code` 버튼을 클릭합니다.
• 프롬프트에 아래와 같이 입력합니다.

@requirement.md 를 읽고 프로젝트 생성 및 코드 구현을 해줘

테스트

• 프로젝트 패키지 설치하기

yarn install

• 프로젝트 빌드하기

yarn build

• .env에 Database 연결 설정을 추가합니다.

# Database
DB_HOST="DB호스트명 또는 URL"
DB_PORT=3306
DB_USERNAME="DB 유저"
DB_PASSWORD="DB 패스워드"
DB_DATABASE="DATABASE명"

• 로컬에서 서버를 실행합니다.

yarn start:dev

• 서버가 정상적으로 start가 되면 브라우저에서 "http://localhost:3000" 을 입력합니다.

• 요청사항에 "Swagger를 사용해서 API 테스트를 용이하게 한다" 라는 내용이 있었으므로 확인을 합니다.
• 브라우저에 "http://localhost:3000/api-docs"를 입력합니다.

• Swagger가 잘 작동하는지 확인해보겠습니다.
• 제일 첫번째에 있는 API 상태 확인을 클릭하고 "Try it out" 버튼을 클릭합니다.

• "Excute" 버튼을 클릭하면 다음과 같은 결과가 나옵니다.

이렇게 백엔드 서버 개발과 테스트까지 완료되었습니다.

Next

다음시간에는,
구글 로그인을 추가하기 위해,
프론트엔드와 백엔드를 동시에 개발하는 방법을 설명합니다.

https://youtu.be/RH_W9ModQro

AI 코딩 도구 - 작동 방식에 따른 구분

AI 코딩 도구는 작동 방식 따라 세가지로 구분할 수 있습니다.

• 터미널 기반
  • 맥에서는 터미널을 윈도우에서는 WSL(Windows Subsystem for Linux)을 사용합니다.
  • 클로드 코드, 제미나이 CLI 등
• IDE(통합개발환경) 플러그인 형태
  • 대부분 Visual Studio Code를 플러그인 형태로 제공되어 IDE에 설치 후 사용합니다.
  • Cursor, Windsurf, Cline AI, RooCode AI, Github Copilot 등
• Web Service
  • 웹사이트에 로그인 해서 사용합니다.
  • 구글 AI Studio, v0.dev, Replit 등 

개인적으로 Web Service는 잘 사용을 하지 않습니다.
회사에서 개발할때는 Code Base에서 수정을 하거나, 기능을 추가하는 경우가 많다보니 적합하지 않아서 입니다.

AI로 개발을 잘 하는 방법

AI로 개발을 할때 중요한 것은 AI에게 어떻게 지시를 하는가 입니다.

지시하는 사람이 얼마나 구체적이고, 명확하게 지시를 하는가에 따라 결과물이 달라집니다.

AI가 연속성을 가지고 개발을 잘 진행하게 하려면 다음과 같은 방법을 사용하세요.

• 요구사항을 명확하게 알려줄것.
• 처음부터 끝까지 모든것을 한번에 요청하지 말것
• 개발을 단계별로 나누어서 진행할 수 있도록 AI가 직접 계획을 수립하게 지시할 것.
• 계획에 따라 순차적으로 진행을 하되 반드시 소스 검토와 테스트를 할 것.
• 처음 소스가 만들어지만 그 이후에는 작은 기능을 하나씩 붙여 나갈것.

프론트엔드 개발하기

프론트엔드 개발을 하기 위해서 다음과 같은 요구사항 문서를 작성합니다.

저는 주로 마크다운 문법을 사용하는 옵시디언을 이용해 문서를 만듭니다.

다음은 codegear.info 프론트엔드 개발을 위한 requirement-frontend.md 문서입니다.

### 1. **사이트 목적 및 대상 사용자**
- **사이트 목적:** 이 사이트는 AI 특히 프로그램 개발과 관련된 AI 기술을 소개하는 CodeGear의 유튜브와 블로그를 소개 및 홍보하기 위한 것
- **대상 사용자:** AI에 관심이 있는 개발자가 주 고객층임
    - _왜 필요한가?_ AI 관련된 정보는 많이 있지만, 개발자에게 꼭 필요한 정보는 찾기 힘든면이 있음. 이러한 대상 사용자의 니즈를 충족시키기 위해, 사이트는 **전문적이고 실용적인 정보**를 명확하고 효율적으로 전달하는 데 중점을 두어야 함.

### 2. **주요 기능 및 페이지 구성**
- **필수 페이지:**
    - **홈 (Landing Page):** 방문자에게 첫인상을 주고 핵심 메시지를 전달하는 페이지. 아래 유튜브 인기 영상 3개를 중앙에 사이트 임베드 해서 보여줄것.
	    - Cursor AI 대체, 무료 오픈소스 Cline AI 쓸만할까?
		    - https://youtu.be/AWWNCGXFTfw?si=uTh_TlM9oO826l8w
	    - AI로 [유튜브 요약+노트 저장] 자동화하는 법 - MCP+Obsidian+Cline+Gemini
		    - https://youtu.be/XXurwjs307s?si=n4YYvbEYv4T49Xsj
		- n8n(AI워크플로우자동화) AWS 셀프호스팅 방법
			- https://youtu.be/rZnBHanWiZg?si=Q7XNIaNB7TJO7Aoc
    - **소개/About:** 유튜브와 블로그에 대한 정보. 
	    - 유튜브 채널 : https://www.youtube.com/@codegear-21
	    - 블로그 : https://codegear.tistory.com/
- **기능:**
    - **반응형 디자인:** 모바일, 태블릿, 데스크톱 등 다양한 기기에서 잘 보이도록.
    - **디자인**: Clean & Modern Minimalism과 Bold & Expressive Typography를 적절히 사용할것.
    - **다크 모드**: 다크모드, 라이트모드, 시스템 모드를 선택할 수 있도록.
    - **간단한 애니메이션/인터랙션:** 사용자 경험을 향상시킬 수 있는 요소 (스크롤 애니메이션, 호버 효과 등).
    - **SEO 친화적:** 검색 엔진에 노출이 잘 되도록 기본적인 메타태그 설정 등.

### 3. **콘텐츠 요구사항**
- **이미지 or 비디오:** 저작권에 위배되지 않도록 https://pixabay.com 에서 적절한것을 사용할 것.
- **아이콘:** Heroicons 아이콘 팩을 사용할것.

### 4. **성능 및 접근성**
- **로딩 속도:** 빠른 페이지 로딩 속도 (Core Web Vitals 고려).
- **접근성 (Accessibility):** 시각 장애인 등 다양한 사용자를 위한 웹 접근성 고려 (ARIA 속성, 키보드 내비게이션 등)

### 5. **구현계획**
- 한번에 사이트를 완성하지 말고, 단계별 계획을 세워서 만들것.
- plan.md에 계획 내용을 작성해서 저장해서 실제 구현시 사용할것.

### 6. **프레임워크**
- 프레임워크는 next.js 로 만들것.
- 컴포넌트 기능을 최대한 활용할 것.

### 7. **언어**
- 답변은 한국어로 할것

• ###, ** 등의 기호가 들어가 있는데, 마크다운 에디터를 사용하면 아래와 같이 보이게 됩니다.

AI 코드 어시스턴트에게 개발 요청하기

지난 개요에서 설명한 폴더 구조는 다음과 같습니다.

이제 requirement.md를 이용해서 개발을 요청해 보겠습니다.

• 프론트엔드 폴더에 requirement.md를 복사합니다.
• 프론트엔드 폴더에서 에디터를 열고 AI에게 개발 요청을 합니다.
• IDE 기반의 어시스턴트는 Roo Code AI를 사용했습니다.
• RooCode AI의 경우 Architect 모드로 시작 하였고, 계획이 수립되면 Code 모드로 변경하였습니다.

• 터미널 기반은 클로드 코드를 사용하였습니다.
• VSCode에 클로드코드 플러그인을 설치하면 좀 더 편하게 하실 수 있습니다.
• 두 케이스 모두 아래와 같이 입력하면 프로젝트를 생성합니다.

requirement.md를 분석해서 구현 plan을 수립해줘

• 중간에 진행 여부를 묻는 과정이 있는데, 지금과 같이 프로젝트를 생성하고 특별한 로직이 들어가지 않을 경우는 Auto 모드로 진행을 해도 괜찮습니다.

어시스턴트별 결과  확인

물론 어시스턴트에 어떤 AI모델을 붙였는지에 따라 결과가 달라질 수 있습니다.

요구사항 마크다운을 수정해도 결과가 달라집니다.

다음은 제가 수행한 결과들이니 참조용으로만 봐주세요.

클로드 코드

제미나이 CLI

루코드+제미나이

이렇게 해서 완성된 소스를 준비된 서버에 배포하시면 됩니다.

도메인 구매와 서버 구축 방법은 아래 링크된 글에서 확인하실 수 있습니다.

https://codegear.tistory.com/137

배포 방법은 아래 링크된 글에서 보실 수 있습니다.

https://codegear.tistory.com/145

https://www.youtube.com/watch?v=Q2GeV8YQGKY

AI로 풀스택을 개발하는 과정

요즘 굉장히 핫한 주제는 AI 입니다. 

그중에서도 개발자들의 최대 관심사는 코드 어시스턴트입니다.

유튜브를 보면 AI 코드 어시스턴트를 활용하는 사례들을 보여주는 영상이 많이 있습니다.

하지만 실전에서 개발하는 것처럼 프론트엔드, 백엔드를 나누어서 보여주는 사례는 많지 않은것 같습니다.

AI로 풀스택 개발하기 과정은 AI 코드어시스턴트(클로드 코드, 커서, 제미나이등)를 사용하여 풀스택을 개발하는 과정을 설명하려고 합니다.

여기에는 다음과 같은 내용들이 포함될 예정입니다.

• 서버 설정하기 (도메인, nginx 셋팅등)(업로드 완료)
• 서버에 배포하는 방법(업로드 완료)
• AI 코드 어시스턴트 사용법
  • 클로드 코드 사용법(업로드 완료)
  • 제미나이 사용법
  • Cline 사용법 등
• AI로 CodeGear.Info 사이트 개발하기
  • AI로 프론트 엔드 개발하기
  • AI로 백엔드 개발하기
  • AI로 프론트와 백엔드 동시에 개발하기(구글 로그인)
  • 그외 다양한 기능들을 붙여 나가는 걸 진행하려고 합니다.

아키텍처 구조

아키텍처 구조는 다음과 같습니다.

• 프론트엔드 - Next.js
• 백엔드 - Nest.js
• 데이터베이스 - MySQL

세부적인 내용들은 강의를 진행하면서 설명드리도록 하겠습니다.

프로젝트 구성

프로젝트 구성은 다음과 같습니다.

• root 폴더명은 codegear입니다.
• 하위 폴더로 frontend, backend를 만듭니다.

각각의 폴더에는 최초 개발을 위한 파일들을 만듭니다.

• 프론트엔드 - requirement.md (요구사항정의)
• 백엔드 - requirement.md (요구사항정의)
• root 폴더 - README.md (프로젝트 폴더 구성에 대한 간단한 설명

시리즈 영상을 시작하며...

영상을 제작하는 과정이 쉽지는 않습니다.

지식을 배우는 과정이 필요하고, 배운걸 테스트 해보는 과정도 필요합니다.

영상을 만들기 위해 블로그를 정리하고, 영상을 만들고, 편집을 하다보면 주말이 훌쩍 지나가 있곤 합니다.

그래도 누군가에게 도움이 되는 일이라 생각하며 열심히 하고 있습니다.

주중에는 회사일로 거의 시간이 없기 때문에 영상을 자주 못 올리는 부분도 양해 부탁드립니다.

계획대로 잘 되었으면 좋겠습니다.

https://youtu.be/7MEsgHKQGLg

순서

• 클로드 코드란?
  • 가격정책
• 설치 방법
  • 인증 방법
  • Visual Studio Code 용 플러그인 설치방법
• 사용법
  • Terminal에서 사용법
  • Visual Studio Code에서 사용법
• 활용팁

클로드 코드(Claude Code)란?

• 클로드 코드는 AI 코딩 Assistant입니다.
• Anthropic 에서 구축한 LLM 모델을 사용합니다.
• Terminal 기반으로 작동하고, 코드작성, 기능개발, 버그수정등을 AI Agent를 통해 수행합니다.
• IDE를 사용하지 않는다고 하면 많이 불편할 것이라고 생각하지만, 생각보다 꽤 편하게 사용할 수 있습니다.
• 그래도 IDE가 더 편하신 분을 위해 VSCode의 Plug-in으로도 제공됩니다(이 부분도 뒤에 자세히 설명합니다)

가격

클로드 코드는 아래와 같이 3가지 가격 정책이 있습니다.(무료는 사용 불가)

• Pro 플랜: 월 $20
  • 평균 사용자는 5시간마다 Claude로 약 45개의 메시지를 보내거나, Claude Code로 약 10-40개의 프롬프트를 보낼 수 있습니다.
  • Pro 플랜 구독자는 Sonnet 4에 액세스할 수 있지만, Claude Code에서 Opus 4를 사용할 수는 없습니다.
  • 소규모 저장소(일반적으로 1,000줄 미만의 코드)에서의 가벼운 작업
• Max 플랜은 두 가지 사용량 등급을 제공합니다 (Claude Sonnet 4, Opus 4 모델 사용가능)
  • 대규모 코드베이스를 사용한 일상적인 사용 또는 파워 유저

  • Pro 사용량의 5배 (월 $100)

    - 평균 사용자는 5시간마다 Claude로 약 225개의 메시지를 보내거나, Claude Code로 약 50-200개의 프롬프트를 보낼 수 있습니다.

  • Pro 사용량의 20배 (월 $200)

    - 평균 사용자는 5시간마다 Claude로 약 900개의 메시지를 보내거나, Claude Code로 약 200-800개의 프롬프트를 보낼 수 있습니다.

설치 방법

• 자세한 사용법은 아래 사이트에서 공식 문서를 확인할 수 있습니다.
• https://support.anthropic.com/ko/

• Claude Code는 Node.js v18 이상이 설치되어 있어야 합니다.
• 설치는 아주 쉽습니다. 

# Install Claude Code
npm install -g @anthropic-ai/claude-code

# Navigate to your project
cd your-awesome-project

# Start coding with Claude
claude

인증 방법

• 설치 후 claude를 입력하면 다음과 같은 화면이 나옵니다.

• 1번을 선택하면 브라우저에서 로그인 인증을 진행합니다.

Visual Studio Code 용 플러그인 설치방법

• VSCode에서도 Claude Code를 사용할 수 있습니다.
• VSCode에서 좌측 메뉴 중 Extention 을 클릭합니다.
• 검색창에 `Claude Code`를 입력하면 아래와 같은 화면이 나옵면 install 버튼을 클릭하여 설치합니다.

• 실행 방법은 우측 상단의 클로드 코드 아이콘을 클릭하면 됩니다.

사용법

• 실행 방법 - 터미널을 열고 `claude`를 입력하면 claude code가 시작됩니다.

사용 모델 변경

/model

• `Default (recommended)` 를 선택하면 Opus 4 모델을 사용하게 되고, 사용량이 20% 남았을때 Sonnet 4 모델로 전환됩니다.

IDE 연동

/ide

• 사용 가능한 ide 목록이 나오고 선택을 할 수 있습니다.
• VSCode plug-in을 사용하면 자동으로 ide와 연결이 됩니다.

프로젝트 기본 설정

/init

• 프로젝트에 claude 설정을 초기화하는 명령입니다.
• CLAUDE.md 파일을 자동으로 생성합니다.
• README.md 파일이 있으면 읽고 분석을 한 후 CLAUDE.md 파일을 작성합니다.
• 이미 만들어진 프로젝트의 경우 애플리케이션과 아키텍처를 분석하여 CLAUDE.md 파일에 작성합니다.

파일 참조

• prompt에서 @을 입력후 파일명 입력합니다.

이미지 & 스크린샷 참조

• 이미지 복사(Ctrl+C) 후 prompt에서 Ctrl+V를 합니다.
• 오류가 발생했을 때 스크린을 캡처해서 넣어주는것도 좋은 방법입니다.

줄바꿈

• Shift + Enter로 새 줄이 생기지 않습니다.  이 경우 `/terminal-setup` 하면 해결됩니다.
• 이것보다는 Ctrl + J 를 사용하는게 편리합니다.

작업 중단하기

• 현재 수행 중인 작업을 중단하려면 Esc 키를 누르면 된다.

Claude Code 종료하기

• Ctrl + C 키를 두번 누르면 종료된다.

이전 채팅 내용 보기

• 위 화살표를 누르면 이전 내용들이 차례로 나온다.

모드 변경

• 모드는 `Shift + Tab`으로 변경할 수 있다.
• 일반 / Plan / Auto-accept edits on 을 순환해서 변경된다.

VS Code 에서 Claude Code plug-in 사용법

소스 코드 참조

• 열려 있는 소스 코드는 자동으로 참조합니다.
• Select 된 범위를 자동으로 인식합니다

파일 참조

• VSCode에서 드래그앤드롭 (or shift + 드래그앤드롭) 합니다.

이미지 & 스크린샷 참조

• 이미지 파일을 드래그앤 드롭합니다.

활용 Tip

터미널 사운드 설정

• 작업이 완료되면 terminal에서 알람을 울려줍니다.
• claude에게 작업을 시키고 편하게 다른 일을 하시면 됩니다.

claude config set --global preferredNotifChannel terminal_bell

Git 활용하기

• Claude Code가 아무리 좋더라도, 작은 단위의 작업을 지속적으로 commit 하시는게 좋습니다.
• 오랜 시간 작업한 결과물을 한번에 날릴 수도 있기 때문입니다.

프로젝트 요약해보기

이 프로젝트를 요약해줘

Compact

/compact

• claude code로 계속 작업을 하다보면 이전 prompt 내용이 많아지게 됩니다.
• 너무 많은 양을 계속 파악하게 하는것은 비효율적이고, 명확성이 떨어지게 됩니다.
• 이때 compact를 사용하면 이전 내용들을 간략하게 줄여주는 역할을 하게 됩니다.

Clear

/clear

• 이전 작업들과 상관없는 새로운 task를 실행할때는 clear를 사용해서 memory를 비워주는 것이 좋습니다.

모드 변경하며 사용해보기

• prompt 창에서 shift+tab을 누르면 모드가 변경됩니다.
• 모드는 일반 / Plan / Auto-accept edits on 을 순환해서 변경됩니다.
• Opus를 사용하여 plan 모드로 계획을 수립하고, Sonnet을 사용하여 일반모드로 작업을 시키는 방법을 쓰시면 효과적입니다.

Prompt 큐 사용하기

• claude code가 실행 중일때도 prompt를 계속 입력할 수 있습니다.
• 이것은 Queue에 쌓이고, 이부분도 claude code가 잘 알아서 처리합니다.

프로젝트별로 환경 설정하기

• .claude 폴더에 settings.json에 프로젝트 별로 환경설정이 가능합니다.

MCP 설치하여 사용하기

• claude code에 mcp를 추가하면 mcp의 각종 도구들을 활용하여 좋은 결과물을 얻을 수 있습니다.
• context7 같은 mcp를 추가하여 사용해보시기 바랍니다. 

• context7에는 참조할 수 있는 엄청난 최신 정보를 보유하고 있습니다.
• https://github.com/upstash/context7 에 가시면 자세한 내용을 볼 수 있습니다.
• 설치 방법은 다음과 같습니다.

claude mcp add context7 -- npx -y @upstash/context7-mcp

마치며...

Claude Code는 AI 시대에 개발자들에게 큰 힘을 실어줄 수 있는 유용한 도구입니다.

잘 활용하신다면 현재보다 훨씬더 좋은 성과를 만들어낼 수 있을 것입니다.

지난번에 codegear.info 도메인에 nginx 설정만 해놓은 상태라.

이번에 클로드코드로 개발한 사이트를 서버에 올리는 과정을 정리해보겠습니다.

서버 용량이 넉넉할때는 Github Action 같은 자동 배포를 사용하시는게 편리합니다.

하지만 자동 배포를 사용하려면 서버의 메모리 용량이 최소 2G는 되어야 문제 없이 돌아갑니다.

AWS의 가장 저렴한 micro 서비스(월7~8천원) 같은 경우 메모리가 1G만 제공되므로,

초기에는 작은 용량으로 시작하시고 서비스가 활성화 되면 고용량으로 바꾸시는 걸 추천합니다.

codegear.info 사이트는 nginx 셋팅만 되어 있는 상태라 아래와 같이 페이지가 표시되고 있었습니다.

이 사이트에 바이브코딩으로 개발한 사이트를 올리려고 합니다.

저는 Git을 이용해서 배포를 진행할 것이기 때문에, 다음과 같은 것들이 필요합니다.

• github에 repository 만들기
• github에 소스 올리기
• 서버에 git 설치하기
• git으로 소스 내려받기
• 서버에 pm2 설정하기
• nginx 설정하기
• nginx restart 하기

배포에 대한 컨셉은 아래와 같습니다.

Github에 Repository 만들기

• github.com에 로그인 한 후 repository를 생성합니다.
• 개인적으로 사용할 프로젝트는 private으로 셋팅을 해주세요.

로컬 소스를 github에 올리기

• 제일 먼저 해야할 일이 local에 있는 소스를 github에 올리는 일입니다.
• 그래야만 서버에서 소스를 내려 받을 수 있기 때문입니다.
• 우선 로컬 소스 루트 폴더에서 git 초기화 명령을 입력 합니다.

git init

• .ssh/config에 다음과 같이 설정합니다. 
  • Host 다음에 오는 github-codegear 는 alias 명입니다. 사용하고 싶으신 걸로 설정하세요.
  • HostName 다음에 오는 github.com과 User 다음에 오는 git은 github을 사용할 경우 고정값입니다.
  • IdentityFile 다음에 오는 id_rsa 는 본인의 ssh key 파일이 위치한 path에 맞게 설정해주세요. 일반적으로 홈디렉토리의 .ssh 폴더 아래에 위치하게 합니다.

Host github-codegear
    HostName github.com
    User git
    IdentityFile ~/.ssh/id_rsa

• github에 최초로 소스를 올리는 방법은 다음과 같습니다.
  • git@ 다음에는 위의 ssh 설정에서 사용한 alias명:github에서 사용한 your_username/your_repo.git를 적어주세요.
  • your_username/your_repo.git은 github의 repository에 들어가서 "<>Code" 버튼을 누르면 확인할 수 있습니다.

git remote add origin git@github-codegear:your_username/your_repo.git

• commit을 할 소스를 선택합니다. (전체 파일 선택)

git add .

• push

git push origin main

• 이렇게 하면 소스가 github repository에 올라갑니다. 
• github.com에 들어가면 소스를 확인할 수 있습니다.

서버에 Git 셋팅하기

• git 설치 (Amazon Linux 2023 기준으로 설명합니다)

sudo yum install git

• 로컬과 동일하게 ssh 셋팅을 추가합니다.
  • .ssh/config에 다음 내용을 추가합니다.

Host github-codegear
    HostName github.com
    User git
    IdentityFile ~/.ssh/id_rsa

• id_rsa 파일을 서버에 만들고 내용을 추가한 후 저장합니다.
  • ./ssh 폴더에 id_rsa 파일을 만들고 로컬이나 github에 있는 ssh key 파일의 내용을 복사하여 붙여넣기 한후 저장 합니다.
• 저장한 id_rsa 파일의 읽기/쓰기 권한을 아래와 같이 변경합니다.

chmod 600 ~/.ssh/id_rsa

• 소스를 git clone으로 다운 받습니다.

git clone git@github-codegear:your_username/your_repo.git

서버에 Nodejs 설치

• nvm을 설치합니다.

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash

• nvm 로드하기

source ~/.bashrc

• 설치할 nvm 목록 확인

nvm list

• nvm 설치

nvm install (alias명) # 예: nvm install 18.17.0 또는 nvm install node

• 설치된 node 확인

nvm list

Yarn 설치

npm install yarn -g

PM2 설치

• PM2는 nodejs 용 프로세스 관리 도구입니다.
• 예를 들어 nextjs를 run 시키면 3000번 포트로 프로세스가 실행됩니다.
• 이 프로세스가 down 될 경우 PM2가 자동으로 실행을 해주는 역할을 합니다.
• pm2 설치는 아래 명령어를 사용합니다.

npm install -g pm2

• pm2 실행 명령은 다음과 같습니다.

pm2 start / stop / restart / status / list / logs

소스 빌드

• git으로 내려 받은 소스 폴더에서 빌드전에 우선 패키지 설치를 진행합니다.

yarn install

• 패키지 설치가 완료되면 build를 수행합니다.

yarn build

PM2에 프로세스 등록하기

• 아래 명령어를 사용하면 서버 프로세스가 pm2에 등록됩니다.

pm2 start npm --name "next-app" -- run start

• 등록이 정상적으로 되면 아래와 같이 표시됩니다.

nginx 셋팅

• 이미 nginx는 설치가 되어 있을 경우입니다. (신규 설치시는 https://codegear.tistory.com/137를 참고하세요)
• /etc/nginx/nginx.conf 파일에 다음 내용을 추가한다.

server {
	listen       80;
        listen       [::]:80;
        server_name  codegear.info www.codegear.info;  
        
        # Frontend(Nextjs)
        location / {
                proxy_pass http://localhost:3000;
                proxy_set_header Host $host;
                proxy_set_header X-Real-IP $remote_addr;
                proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
                proxy_set_header X-Forwarded-Proto $scheme;
        }

• nginx 수정 후 문법 체크를 해주세요.

sudo nginx -t

• nginx 를 재기동 합니다.

sudo systemctl restart nginx

이렇게 하면 모든 셋팅이 완료되었습니다.

브라우저에서 codegear.info 를 입력하면 다음 화면이 나오는걸 볼 수 있습니다.

서버에 새로운 것을 적용할때는 다음 순서대로 진행하시면 됩니다.

cd codegear-info
git pull
yarn install (패키지 추가했을 경우만)
yarn build
pm2 restart next-app