수동으로 개발 소스 서버에 배포하기(aws, github, pm2, nginx)

지난번에 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