Code Gear - AI 개발 유튜브 강의

여러 사이트에 ssh 접속을 할때 접속 정보를 모두 기억하기가 어렵습니다.

예를 들어 AWS에 EC2가 여러개 있다면 아래와 같은 정보들을 모두 입력해야 하는 불편함이 있습니다.

ssh -i /path/key-pair-name.pem instance-user-name@instance-public-dns-name

이럴때를 위해 맥북에서는 ssh를 미리 저장해 놓고 alias 만으로 접속하는 기능이 있습니다.

맥북의 .ssh/config 파일을 사용하면 여러 서버에 대한 SSH 접속 설정을 간결하게 관리하고, 짧은 별칭(alias)으로 쉽게 접속할 수 있습니다. 이는 특히 여러 원격 서버나 여러 GitHub 계정을 관리할 때 매우 유용합니다.

.ssh/config 파일 생성 또는 열기

맥(macOS)의 경우 .ssh/config 파일이 자동으로 생성되어 있지 않을 수 있습니다. 이 경우 직접 파일을 생성해야 합니다.

touch ~/.ssh/config
open ~/.ssh/config

.ssh/config 파일 내용 작성

파일을 열고 아래와 같은 형식으로 각 서버의 접속 정보를 입력합니다.

Host [별칭]
    HostName [원격 서버의 IP 주소 또는 도메인 이름]
    User [접속할 사용자 계정]
    IdentityFile [SSH 키 파일 경로]
    Port [SSH 포트 번호 (기본값 22, 변경된 경우)]

• Host: 이 별칭은 SSH 접속 시 사용할 짧은 이름(alias)이 됩니다.
• HostName: 접속할 원격 서버의 IP 주소 또는 도메인 이름을 입력합니다.
• User: 원격 서버에 접속할 사용자 계정 이름을 입력합니다.
• IdentityFile: 해당 서버에 접속할 때 사용할 SSH 키 파일의 경로를 지정합니다. 예를 들어, ~/.ssh/your_key.pem과 같이 입력할 수 있습니다 . AWS EC2와 같은 경우 pem 키 파일을 다운로드하여 권한을 변경한 후 사용합니다.
• 권한은 다음 명령을 사용하여 변경합니다.

chmod 600 your_key_file.pem

• 권한을 변경하지 않으면 다음과 같은 메시지가 나옵니다.

Permissions 0644 for '/Users/admin/.ssh/id_rsa' are too open.
It is required that your private key files are NOT accessible by others.
This private key will be ignored.
Load key "/Users/admin/.ssh/id_rsa.pub": bad permissions
git@github.com: Permission denied (publickey).

• Port: SSH 접속에 사용되는 포트 번호입니다. 기본값은 22이며, 변경된 경우에만 작성합니다.
• Github의 경우 HostName과 User명은 아래와 같이 동일한 값을 사용합니다.

HostName github.com
User git

예시:

# 개인 GitHub 계정
Host github.com-personal
    HostName github.com
    User git
    IdentityFile ~/.ssh/id_rsa_personal

# 회사 GitHub 계정
Host github.com-work
    HostName github.com
    User git
    IdentityFile ~/.ssh/id_rsa_work

# 개발 서버
Host dev_server
    HostName 192.168.0.1
    User ubuntu
    IdentityFile ~/.ssh/dev_server_key.pem
    Port 2222

# Amazon Linux 2003 EC2     
Host aws-ec2
    HostName ec2-1-100-200-333.ap-northeast-2.compute.amazonaws.com
    User ec2-user
    IdentityFile ~/myec2.pem

연결 테스트 하기

ssh -T git@github.com-personal
ssh -T ec2-user@aws-ec2

Git 연결 설정을 config에 설정된 alias로 변경하기

기존 git 연결을 config에 설정한 alias명으로 변경할 수 있습니다.

git remote set-url origin git@github.com-personal:username/repo.git

SSH 접속하기

.ssh/config 파일에 설정한 별칭을 사용하여 터미널에서 간결하게 접속할 수 있습니다.

ssh [별칭]
ssh github.com-personal
ssh dev_server

이렇게 설정하면 복잡한 IP 주소, 사용자 이름, 키 파일 경로를 매번 입력할 필요 없이 간편하게 SSH 접속을 할 수 있습니다.

그동안 배웠던 내용들을 이용해서 사이트를 만드는 강좌를 진행합니다.

제목은 Nodejs와 Vuejs로 사이트 만들기 입니다.

이 글의 동영상 강좌입니다.

https://youtu.be/9RBeK3U8Z5Y

개발 스펙은 다음과 같습니다.

• Backend는Nodejs (Nestjs 프레임워크를 사용합니다. TypeORM을 통해 DB를 연동합니다.)
• Frontend는 Vuejs (Nuxtjs 프레임워크를 사용합니다.)
• Database는 MySQL을 사용합니다. (MySQL Workbench의 Model 기능을 사용합니다.)

인프라는 다음과 같이 구성합니다.

• Version Control(코드 저장소)은 Github을 사용합니다.
• Production(운영) Server는 AWS의 EC2를 사용합니다.
• Image가 배포될 Server는 AWS의 S3를 사용합니다.

기타

• 배포는 Github Actions를 이용해서 자동배포가 되도록 구성을 합니다.
• 로그인 및 회원 가입은 카카오 로그인을 이용해서 처리합니다.

기능

• 사이트의 첫화면에 Slideshow가 나타나며 자동 스크롤이 됩니다.
• 이 이미지는 관리자를 통해 관리되도록 합니다.

사이트를 직접 만들면서 각종 기술들이 어떻게 쓰이는지를 알아 갈 수 있도록 하는것이 이 강좌의 목적입니다.

많이 기대해주세요^^

다음은 이 글의 유튜브 영상입니다.

https://youtu.be/E3i9qt0SS-I

프로젝트를 진행할때 많은 시간을 들여야 하는 것 중에 하나가 바로 배포입니다.

형상관리(Git)에 커밋을 하고, 서버에 파일을 업로드 하고, 서버를 리스타트 하는 과정들을 수작업으로 반복하다 보면 여간 불편한게 아니죠.

이럴때 자동 배포 기능을 만들면 개발 PC에서 커밋하는 것만으로도 배포를 할 수 있습니다. 그럼 나머지 시간들은 다시 개발을 하거나 조금 쉴 수 있는 여유가 생기겠죠?

우선 전체적인 구성은 다음과 같습니다.

1. 로컬 PC에서 개발을 한 후 Github에 Push를 합니다.
2. Github Repository 특정 branch에 push가 되면 Github Action이 동작을 시작합니다.
3. Github Actions가 Github Container Registry에 소스를 받은 후 Docker 이미지로 빌드를 합니다.
4. 빌드된 이미지를 EC2에 등록된 Runner가 복사합니다.
5. 기존 이미지를 삭제하고 새로운 이미지로 실행을 합니다.

환경

• 프론트 : Vuejs (Nuxt)
• 형상관리 : Git (Github)
• 빌드 : Docker (Github Action)
• 서버 : Linux (AWS EC2 micro)

* nodejs, git, docker는 기본적으로 설치되어 있어야 합니다.

순서

• Github 저장소 생성
• 프로젝트 원격 저장소 클론
• Nuxt 프로젝트 생성
• Docker로 로컬 테스트
• Github Actions
• AWS EC2 생성 및 Docker 설치
• 자동 배포 테스트

Github 저장소 생성 및 연결

www.github.com 에서 아래와 같이 저장소를 만듭니다.

• Repository name은 프로젝트명과 동일하게 생성합니다.
• Repository는 아무나 사용할 수 없도록 private으로 만듭니다.
• 주의하실 점은 Owner명에 대문자가 들어가 있으면 안됩니다.
• Github Action에서 도커빌드시에 대문자를 쓸 수 없다는 오류가 납니다.

프로젝트 원격 저장소 클론

원격 저장소를 local PC로 클론합니다.

• 저는 github desktop을 이용했습니다.
• git 명령어 또는 다른 프로그램을 사용하셔도 됩니다.

• 우측 상단의 아래 화살표를 클릭합니다.

• 우측 상단의 Add 버튼을 누르고 clone repository를 선택합니다.

• Repository를 선택하고 Clone 버튼을 클릭하면 로컬PC에 폴더가 생성됩니다.

Vue (Nuxt) 프로젝트 생성

Clone 받은 폴더로 이동한 후 다음과 같이 Nuxt 프로젝트를 생성합니다. 

• 선택항목은 모두 자동으로 선택합니다.

npx create-nuxt-app nuxt-auto-deploy

프로젝트 생성이 완료되면 생성된 모든 파일을 상위 폴더로 옮겨줍니다.

cd nuxt-auto-deploy
mv * ..

다시 상위 폴더로 이동하여 비어있는 nuxt-auto-deploy 폴더를 삭제합니다.

cd ..
rm -Rf nuxt-auto-deploy

다음과 같이 프로젝트를 실행합니다.

npm run dev 또는 yarn dev

실행이 완료되면 브라우저에서 http://localhost:3000으로 실행 화면을 확인할 수 있습니다.

확인이 되었으면 ctrl+C 키를 눌러 프로젝트 실행을 종료합니다.

Docker로 로컬 테스트

Docker 이미지를 만들기 위해 프로젝트 루트에 Dockerfile을 아래와 같이 생성합니다.

FROM node:14.19.0

RUN mkdir -p /app
WORKDIR /app
ADD . /app/

RUN rm yarn.lock || true
RUN rm package-lock.json || true
RUN yarn
RUN yarn build

ENV HOST 0.0.0.0
EXPOSE 3000

CMD [ "yarn", "start"]

• FROM node:14.19.0 : nodejs 14.19.0 버전의 이미지를 받아서 docker image를 생성합니다.
• RUN mkdir -p /app : app 폴더를 생성합니다.
• ADD . /app/ : 현재 폴더의 모든것을 생성된 app 폴더에 복사합니다.
• RUN rm ... || true : 파일 삭제. 뒤의 "|| true" 는 파일이 없을 경우 오류로 인해 실행이 중단되지 않게 하기 위해 추가합니다.
• RUN yarn build : nuxt 프로젝트를 빌드합니다.
• ENV HOST 0.0.0.0 : 모든 IP를 개방합니다.
• EXPOSE 3000 : 3000번 포트를 개방합니다.
• CMD ["yarn", "start"] : yarn start 명령을 실행합니다.

Docker 이미지 생성시 불필요한 파일을 제외하도록 루트 폴더에 .dockerignore 파일을 생성합니다.

node_modules/
dist/

Dockerfile을 저장하고 다음 명령으로 이미지를 생성 합니다.

docker build --tag nuxt-auto-deploy:0.0.1 .

Docker 이미지를 실행합니다.

docker run --name nuxt-auto-deploy -d -p 3000:3000 nuxt-auto-deploy:0.0.1

• --name 뒤의 이름(nuxt-auto-deploy)은 도커 컨테이너명이고,
• 뒤의 nuxt-auto-deploy:0.0.1은 docker image명과 tag명입니다.

localhost:3000으로 접속하면 아까와 동일한 화면을 확인할 수 있습니다.

Docker 테스트가 모두 완료되었으므로 코드를 github에 push 합니다.

Github Actions 

Github Access Token 발급
github에 접속한 후 계정에서 settings 메뉴로 이동합니다.

왼쪽 메뉴 하단의 Developer settings를 선택합니다.

왼쪽 메뉴에서 Personal access tokens를 선택하고, Generate new token을 선택합니다.

토큰의 유효기간과 권한을 설정합니다.

• 유효기간은 최대 1년까지 가능합니다.
• 권한은 workflow, write:packages, delete:packages를 선택합니다.

하단의 generate 버튼을 클릭하면 토큰이 생성됩니다.

생성된 토큰을 복사하여 Repository-Settings-Secret-Actions에 등록합니다.

레파지토리의 Actions 탭으로 이동하여 "set up a workfolow yourself"를 클릭합니다.

아래와 같이 workflow 파일을 작성합니다.

이것은 Github Container Registry를 이용해서 docker를 빌드하고 서버에 푸쉬해주는 역할을 합니다.

• 아래 블로그를 참조하여 작성하였으며 자세한 내용은 해당 블로그를 참고해주세요.
• https://velog.io/@soosungp33/Github-Actions%EC%9C%BC%EB%A1%9C-AWS-EC2%EC%97%90-CICD-%EA%B5%AC%EC%B6%95%ED%95%98%EA%B8%B0

다음은 workflow 파일입니다.( .github/workflows/main.yml)

name: CI/CD Docker

# 트리거를 수행할 브랜치를 지정합니다.
on:
  push:
    branches: [ main ]

# 환경설정
env:
  DOCKER_IMAGE: ghcr.io/${{ github.actor }}/nuxt-auto-deploy
  VERSION: ${{ github.sha }}
  NAME: go_cicd

jobs:
  # 빌드 Job
  build:
    name: Build
    runs-on: ubuntu-latest
    steps:
      # github repository에서 checkout
      - uses: actions/checkout@v2
      # docker build 수행
      - name: Set up docker buildx
        id: buildx
        uses: docker/setup-buildx-action@v1
      - name: Cache docker layers
        uses: actions/cache@v2
        with:
          path: /tmp/.buildx-cache
          key: ${{ runner.os }}-buildx-${{ env.VERSION }}
          restore-keys: |
            ${{ runner.os }}-buildx-
      # GitHub 컨테이너 레지스트리에 로그인 후 빌드 & 푸시
      - name: Login to ghcr
        uses: docker/login-action@v1
        with:
          registry: ghcr.io
          username: ${{ github.repository_owner }}
          password: ${{ secrets.GITHUB_TOKEN }}
      - name: Build and push
        id: docker_build
        uses: docker/build-push-action@v2
        with:
          builder: ${{ steps.buildx.outputs.name }}
          push: true
          tags: ${{ env.DOCKER_IMAGE }}:latest
  # 배포 Job
  deploy:
    needs: build  # build 후에 실행되도록 정의
    name: Deploy
    runs-on: [ self-hosted, label-go ] # AWS ./configure에서 사용할 label명
    steps:
      - name: Login to ghcr
        uses: docker/login-action@v1
        with:
          registry: ghcr.io
          username: ${{ github.repository_owner }}
          password: ${{ secrets.GITHUB_TOKEN }}
      # 3000 -> 80 포트로 수행하도록 지정
      - name: Docker run
        run: |
          docker stop ${{ env.NAME }} && docker rm ${{ env.NAME }} && docker rmi ${{ env.DOCKER_IMAGE }}:latest
          docker run -d -p 80:3000 --name go_cicd --restart always ${{ env.DOCKER_IMAGE }}:latest

commit 버튼을 클릭하면 다음과 같이 파일이 생성됩니다.

.github/workflows/main.yml

AWS EC2 생성 및 Docker 설치

이제 자동 배포가 적용될 서버를 만듭니다.

AWS console에 로그인 한 후 EC2 서비스로 이동합니다.

인스턴스 시작 버튼을 클릭합니다.

무료로 사용할 수 있는 Amazon Linux 2 AMI를 선택합니다.

t2.micro를 선택하고 검토및시작 버튼을 클릭합니다.

보안그룹 편집을 선택합니다.

규칙추가 버튼을 누르고 80번 port를 추가한 후 검토및시작 버튼을 클릭합니다.

인스턴스 실행이 완료되면 해당 인스턴스를 체크하고 연결을 클릭합니다.

SSH 클라이언트를 클릭하면 접속 방법이 나옵니다.

터미널을 이용해 ssh로 접속을 합니다.

AWS에 Docker 설치

아래 내용을 참조해서 Docker를 설치합니다.

https://docs.aws.amazon.com/ko_kr/AmazonECS/latest/developerguide/create-container-image.html#create-container-image-install-docker

AWS에 Github Runner 설치

github repository의 settings 탭에서 Runner를 선택합니다.

Runners / Create self-hosted runner를 선택하고, Linux를 선택합니다.

Architecture는 x64로 하고 Download 항목을 한라인씩 복사해서 EC2에서 실행합니다.

./config.sh 문을 실행하면 다음과 같이 입력을 요청합니다.

• Enter the name of the runner group to add this runner to : 엔터
• Enter the name of runner : 엔터
• Enter any additional label : label-go (워크플로우 yml에 작성했던 라벨명
• Enter name of work folder : 엔터

./run.sh는 다음과 같이 백그라운드로 실행을 합니다.

nohup ./run.sh &

• tail -f nohup.out 명령을 실행하면 ec2상의 빌드 로그를 확인할 수 있습니다.

Runner 셋팅이 끝나면 github의 Settings - Actions - Runner 메뉴에서 다음과 같이 등록된것을 확인할 수 있습니다.

자동 배포 테스트

이제 소스를 수정하고 push를 하면 다음과 같이 빌드가 실행이 됩니다. 

해당 빌드를 클릭하면 세부 정보를 확인할 수 있습니다.

build와 Deploy가 나타나고, 실행되는 것을 확인 할 수 있습니다.

Build 또는 Deploy를 누르면 세부 실행 내역을 볼 수 있습니다.

Deploy가 완료되면 다음과 같은 화면을 볼 수 있습니다.

EC2 인스턴스의 공인 IP를 확인합니다.

브라우저에 아이피를 입력하면 다음과 같은 결과를 확인할 수 있습니다.

이제 Push를 하면 서버에 자동 배포가 되는 것을 확인할 수 있습니다.

branch를 하나 더 만들어서 (예 : develop) 개발시에 사용하고,
main으로 merge 할 때 자동으로 배포되도록 하는 것도 가능합니다.