메티의 블로그

AWS Lightsail instance 만들기

claon-admin-web 프로젝트를 시작하기 위한 웹 서버 구축을 시작했다. 우리는 도메인 이름의 레거시가 아마존 DNS 에 있어서 AWS Lightsail 을 사용하기로 했다.

인스턴스를 만든 환경은 다음과 같다.

Instance location : Tokyo, zone A

Platform : Ubuntu 20.04 LTS (OS only)

instance plan

3개월 무료 플랜 중 가장 성능이 좋은 것으로 선택했다.

그 외의 Key-only tags , Key-value tags 는 사용하지 않았다.

만든 후에 static IP 설정을 해주었다. 이는, PuTTY 등 외부 SSH 로 접속 할 때 권장되는 사양이기 때문에 설정해주었다.

static IP 를 claon 에서 가지고 있는 domain 과 연결했다.

서버 환경 설정

배포에 사용된 프로젝트 환경 및 서버 상태

framework: next.js v13

package manager: pnpm

deployment: github actions, lightsail, pm2, nginx

nginx 설치

nginx 설치


sudo dpkg -l nginx

nginx 동작 확인

설치 후 바로 서버 static IP 로 들어가보면 다음과 같은 화면이 보일 것이다. 그러면 완료

node 설치


curl -fsSL https://deb.nodesource.com/setup_lts.x | sudo -E bash -

lts 최신 버전의 node 를 설치한다.

nvm 설치

nvm 은 node version manager 로 여러 버전을 설치 후 사용 할 수 있다. 다른 버전을 설치했다고 해서 당황할 필요 없이 nvm 을 설치 후 사용 버전을 변경 할 수 있다.


# 설치
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash

# node 버전 변경
nvm use 18.16.0

node 버전 변경은 npm 에 영향을 미친다. 현재 서버에 node 를 옛날 형식의 명령어로 설치를 해서 그런지, nvm use 로 사용 버전을 변경하고 default 를 변경해도 node 의 기본 버전이 10.x 로 설정되는 문제가 있다.

npm 설치 및 최신 버전 업데이트


npm install npm@latest

node 가 설치될 때 npm 은 같이 설치 된다. 대신 npm 은 업데이트가 빠르게 되므로 최신 버전 업데이트를 설치 할 때는 위와 같은 명령어를 사용한다.

pnpm 설치

이번 프로젝트 빌드는 pnpm 으로 매니징 하기로 했으므로 pnpm 을 설치해준다.


# pnpm 설치, npm 으로 설치했기 때문에, node 가 선행적으로 설치되어 있어야 한다.
npm install pnpm

pm2 설치

pm2 는 node 의 단일 스레드 동작의 한계를 해결하기 위해 멀티 프로세스로 node app 들을 돌려주는 프로그램이다. 추후 무중단배포 등을 세팅하기 위해 사용했다.


# 설치
sudo npm install pm2 -g

# 설치 확인
pm2 -v

# pm2 를 통해 만들어진 프로세스 확인
pm2 list

# pm2 를 통해 next.js 프로젝트 배포 (빌드는 이미 되어있어야 함)
pm2 start pnpm --name "project-name" -- start

# pm2 를 통해 만들어진 프로세스 restart
pm2 restart "project-name"

# pm2 로그 확인
pm2 log

github actions


name: CD

on:
  push:
    branches: ["main"]
  pull_request:
    branches: ["main"]

jobs:
  build:
    runs-on: ubuntu-latest
    strategy:
      matrix:
        node-version: [18.x]

    steps:
      # 브랜치 체크아웃
      - name: branch checkout
        uses: actions/checkout@v3
      # pnpm 적용
      - name: use pnpm
        uses: pnpm/action-setup@v2
        with:
          version: 7
      # 노드 설치
      - name: install node version ${{ matrix.node-version }}
        uses: actions/setup-node@v2
        with:
          node-version: ${{ matrix.node-version }}
          cache: "pnpm"
      # 의존성 설치
      - name: install dependencies
        run: pnpm install
      # 빌드
      - name: build project
        run: pnpm build
      # 현재 위치 체크
      - name: where am i
        run: echo $PWD
      # 빌드 생성 체크
      - name: check build output
        run: ls -la
      # build 파일 폴더 비우기
      - name: flush build folder
        uses: appleboy/ssh-action@master
        with:
          host: ${{ secrets.HOST }}
          username: ${{ secrets.USERNAME }}
          key: ${{ secrets.KEY }}
          script: |
            cd /home/${{ secrets.USERNAME }}/claon-admin-web
            rm ./.next/*
      # lightsail 에 build 파일 떨구기
      - name: get project output
        uses: appleboy/scp-action@master
        with:
          host: ${{ secrets.HOST }}
          username: ${{ secrets.USERNAME }}
          key: ${{ secrets.KEY }}
          source: "./*"
          target: "/home/${{ secrets.USERNAME }}/claon-admin-web/.next"
          strip_components: 1
      # build 파일 배포하기
      - name: deploy project
        uses: appleboy/ssh-action@master
        with:
          host: ${{ secrets.HOST }}
          username: ${{ secrets.USERNAME }}
          key: ${{ secrets.KEY }}
          script: |
            cd /home/${{ secrets.USERNAME }}/claon-admin-web
            pm2 restart claon-admin-web

cd 초안

github actions 는 github actions 가상 vm 에서 실행하는 것으로, 우리 실제 linux 서버에는 중간에 scp 를 통해서 파일을 옮겨 주어야 한다.


name: CD

on:
  push:
    branches: ["deploy"]

jobs:
  build:
    runs-on: ubuntu-latest
    strategy:
      matrix:
        node-version: [18.x]

    steps:
      # 브랜치 체크아웃
      - name: branch checkout
        uses: actions/checkout@v3
      # lightsail 에 branch 파일 전송
      - name: push project output to server
        uses: appleboy/scp-action@master
        with:
          host: ${{ secrets.HOST }}
          username: ${{ secrets.USERNAME }}
          key: ${{ secrets.KEY }}
          rm: true
          source: "./"
          target: "/home/${{ secrets.USERNAME }}/claon-admin-web"
          strip_components: 1
      # build 파일 배포하기
      - name: deploy project
        uses: appleboy/ssh-action@master
        with:
          host: ${{ secrets.HOST }}
          username: ${{ secrets.USERNAME }}
          key: ${{ secrets.KEY }}
          script: |
            cd /home/${{ secrets.USERNAME }}
            cp deploy.sh /home/${{ secrets.USERNAME }}/claon-admin-web
            cd /home/${{ secrets.USERNAME }}/claon-admin-web
            sh deploy.sh

2차, branch 파일만 가져와서 서버내에서 빌드 후 배포하도록 변경 시도

deploy.sh 안에 있는 pnpm 이 실행되지 않아서 보류


name: CD

on:
  push:
    branches: ["deploy"]

jobs:
  build:
    runs-on: ubuntu-latest
    strategy:
      matrix:
        node-version: [18.x]

    steps:
      # 브랜치 체크아웃
      - name: branch checkout
        uses: actions/checkout@v3
      # pnpm 적용
      - name: use pnpm
        uses: pnpm/action-setup@v2
        with:
          version: 7
      # 노드 설치
      - name: install node version ${{ matrix.node-version }}
        uses: actions/setup-node@v2
        with:
          node-version: ${{ matrix.node-version }}
          cache: "pnpm"
      # 의존성 설치
      - name: install dependencies
        run: pnpm install
      # 빌드
      - name: build project
        run: pnpm build
      # lightsail 에 build 파일 전송
      - name: push project output to server
        uses: appleboy/scp-action@master
        with:
          host: ${{ secrets.HOST }}
          username: ${{ secrets.USERNAME }}
          key: ${{ secrets.KEY }}
          rm: true
          source: "./"
          target: "/home/${{ secrets.USERNAME }}/claon-admin-web"
          strip_components: 1
      # build 파일 배포하기
      - name: deploy project
        uses: appleboy/ssh-action@master
        with:
          host: ${{ secrets.HOST }}
          username: ${{ secrets.USERNAME }}
          key: ${{ secrets.KEY }}
          script: |
            cd /home/${{ secrets.USERNAME }}/claon-admin-web
            pnpm install
            pm2 restart claon-admin-web

branch 파일과 빌드 결과 파일들 한번에 가져와서 의존성 설치 후 재배포 하는 로직으로 변경

1차적으로 완료 함

AWS lightsail 에 next.js 배포하기

잘못 띄워놓은 verdaccio 서버 volume 찾아서 백업하기

Symbolic Link, Hard Link, Inode

Github Actions pnpm 사용 이해와 GPT-driven 트러블슈팅의 위험성

Vercel 배포 사이트 커스텀 도메인 적용

MSW Next.js 에 적용해보기(클라이언트 사이드)