[우아한 테크코스 3기] LEVEL 3 회고 (169일차)

안녕하세요? 제이온입니다.

 

오늘은 어제 있었던 일을 같이 묶어서 기록하려고 합니다. 핑계 아닌 핑계지만.. 밤에 뭐에 하나 꽂혀서 해결하느라 그랬습니다 ㅠ

 

 

Self-hosted runner를 도커로 관리하는 방법

저번 포스팅에서 잘 만들어진 이미지를 활용하여 runner를 도커로 띄울 수 있다고 이야기했었습니다. 하지만, 도커 컨테이너 내부에 있는 빌드된 프로젝트를 운영 서버로 넘기는 부분에서 어려움이 있었습니다.

 

이것은 여전히 해결되지 않은 문제였으나, 오늘 제리가 'docker volumes'라는 키워드를 알려주었습니다. 이 명령어를 통해 도커 컨테이너 내부에 있는 특정 디렉토리를 연동할 수 있다고 합니다. 즉, 해당 runner 컨테이너 내부에 있는 빌드된 프로젝트를 EC2 서버에 있는 디렉토리로 동기화할 수만 있다면, 해당 디렉토리를 운영 서버에 scp 통신으로 넘기면 됩니다. docker volumes를 시간 내서 공부하고 구현하려고 합니다.

 

 

프론트엔드에서의 CI with 깃허브 액션

어제 프론트엔드 측에 배포 관련되어 어려움이 없었는지 물어보니, S3에 액세스 키와 시크릿 키를 발급 받지 못해서 aws cli를 통해 S3 버킷으로 js와 html을 보낼 수 없었다고 합니다. 그래서 어쩔 수 없이 수동으로 S3 버킷에 업로드를 하는 식으로 배포를 하고 있다고 알려 주었습니다. 저는 안그래도 프론트엔드에서 CI / CD 흐름을 알고 싶었고, S3에 관한 개념이 없어서 좋은 공부가 될 수 있겠다고 생각하여 구현해 주겠다고 말했습니다.

 

가장 처음 해야할 일은 CI 중에서도 node, npm, yarn을 설치하는 일이었습니다. self-hosted runner에서 곧바로 설치하는 것은 아니고 workflows yml에 작성하는 것이었죠. 설치가 완료되었다면, yarn install을 통해 각각 의존성을 다운로드해야 합니다. 물론 프로젝트 개발 방식에 따라 다르겠지만, 우리 프론트 팀에서는 yarn install을 통해 의존성을 받고 yarn build로 빌드하면 된다고 알려주었습니다.

 

프론트 프로젝트 내의 디렉토리는 총 3개였으므로, 의존성을 내려 받고 빌드하는 과정을 3번 해야 했습니다. 현재 테스트 코드는 작성되지 않았다고 하여 빌드 코드만 작성했습니다.

 

 

# This workflow will do a clean install of node dependencies, cache/restore them, build the source code and run tests across different versions of node
# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions

name: Darass PR Checker [FE]

on:
  pull_request:
    branches: [ main, develop/fe ]

jobs:
  build:

    runs-on: [self-hosted, front]

    steps:
    - name: Checkout source code
      uses: actions/checkout@v2
    
    - name: Setup node
      uses: actions/setup-node@v1
      with:
        node-version: '14'
        
    - run: npm install
    
    - name: Setup yarn
      run: npm install -g yarn
      
    - name: Install Dependencies - comment
      run: yarn install
      working-directory: ./frontend/reply-module
    
    - name: Build - comment
      run: yarn build
      working-directory: ./frontend/reply-module
      
    - name: Install Dependencies - project
      run: yarn install
      working-directory: ./frontend/manage
    
    - name: Build - project
      run: yarn build
      working-directory: ./frontend/manage
    
    - name: Install Dependencies - deploy script
      run: yarn install
      working-directory: ./frontend/deploy-script
    
    - name: Build - deploy script
      run: yarn build
      working-directory: ./frontend/deploy-script

 

 

루트 디렉토리에 lock 파일이 없어서 꽤나 CI 작업도 고생을 했습니다..

 

 

프론트엔드에서의 CD with 깃허브 액션

테스트를 검증하는 일은 없어서 그래도 CI는 그렇게 오래 걸리지는 않았습니다. 다만, CD가 거의 무슨 6 ~ 7시간을 박을 정도로 꽤 힘들었습니다. 이것은 S3 버킷에 접근할 때 액세스 키와 시크릿 키를 사용할 수 없었기 때문이었죠. 그래서 해당 키들을 사용 안하고 S3 버킷에 접근하는 방법이 없나 라이브러리를 열심히 찾았습니다.

 

결국 저 혼자서는 답이 안 나올 것 같아서 프론트 CD를 구현하였던 삭정에게 도움을 청했습니다. 삭정은 씨유가 해당 키들을 발급해 주지는 않지만, S3에 접근할 수 있는 IAM 역할인 ec2-s3-deploy를 만들어 두었다고 알려주었습니다. 그리고 해당 역할을 self-hosted runner 인스턴스에 부여하면, 액세스 키와 시크릿 키 없이도 aws cli를 통해 S3 버킷에 파일들을 업로드 할 수 있다고 합니다!

 

또한, cp와 sync 방식 중에 cp 방식은 어떤 이유인지 권한 오류가 발생했습니다. 삭정은 cp 대신에 sync으로 해 보라고 알려 주었고 성공적으로 배포가 된 것을 확인했습니다. cp와 sync 방식에서 어떠한 차이가 있는지 추후 학습할 예정입니다.

 

 

# This workflow will do a clean install of node dependencies, cache/restore them, build the source code and run tests across different versions of node
# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions

name: Darass Push Builder [FE]

on:
  push:
    branches: [ develop/fe ]

jobs:
  deploy:

    runs-on: [ self-hosted, front ]

    steps:
    - name: Checkout source code
      uses: actions/checkout@v2
    
    - name: Setup node
      uses: actions/setup-node@v1
      with:
        node-version: '14'
        
    - run: npm install
    
    - name: Setup yarn
      run: npm install -g yarn
      
    - name: Install Dependencies - comment
      run: yarn install
      working-directory: ./frontend/reply-module
    
    - name: Build - comment
      run: yarn build
      working-directory: ./frontend/reply-module
      
    - name: Install Dependencies - project
      run: yarn install
      working-directory: ./frontend/manage
    
    - name: Build - project
      run: yarn build
      working-directory: ./frontend/manage
    
    - name: Install Dependencies - deploy script
      run: yarn install
      working-directory: ./frontend/deploy-script
    
    - name: Build - deploy script
      run: yarn build
      working-directory: ./frontend/deploy-script
    
    - name: Install Aws Cli
      uses: unfor19/install-aws-cli-action@v1
      
    - name: S3 Deploy - comment
      run: aws s3 sync ./dist s3://darass-reply-module
      working-directory: ./frontend/reply-module
      
    - name: S3 Deploy - project
      run: aws s3 sync ./dist s3://darass-manage-page
      working-directory: ./frontend/manage
    
    - name: S3 Deploy - deploy script
      run: aws s3 sync ./dist s3://darass-script-code
      working-directory: ./frontend/deploy-script

 

 

위와 같이 CI 이후에 aws cli를 설치한 후 sync 구문으로 빌드 이후 결과물인 dist 디렉토리를 S3 버킷으로 보내면 됩니다.

 

 

깃허브 액션 env 설정

배포 이후 곤이와 도비가 카카오 로그인이 되지 않는 버그가 있다고 알려 주었습니다. 이것은 카카오 인증 api를 사용하기 위해 받아 놓은 key 값을 .env 파일에 담아 로컬에만 저장하고 있었기 때문이죠. 당연히 배포할 때는 해당 env가 없으므로 카카오 인증 api를 사용 못해서 로그인이 안 되는 것이었습니다.

 

이 부분은 빌드하는 코드에서 env와 함께 .env에 들어갈 내용만 추가해 주면 되었습니다. 다만, 프론트엔드 측에서는 webpack.config.js를 수정해야 했습니다. 이 내용은 해당 포스팅을 참고하시길 바랍니다.

 

 

    - name: Build - comment
      run: yarn build
      working-directory: ./frontend/reply-module
      env:
        KAKAO_REST_API_KEY: ${{ secrets.KAKAO_REST_API_KEY }}
        KAKAO_JAVASCRIPT_API_KEY: ${{ secrets.KAKAO_JAVASCRIPT_API_KEY}}
    
    - name: Build - project
      run: yarn build
      working-directory: ./frontend/manage
      env:
        KAKAO_REST_API_KEY: ${{ secrets.KAKAO_REST_API_KEY }}
        KAKAO_JAVASCRIPT_API_KEY: ${{ secrets.KAKAO_JAVASCRIPT_API_KEY}}

 

 

이런 식으로 필요한 부분에 env 속성을 넣어 주었습니다.

 

 

깃허브 액션 알림 설정

지난 포스팅과 마찬가지로 깃허브 액션을 사용하여 CI / CD 이후 프론트 엔드 채널에 알림이 가도록 설정했습니다. 아무래도 깃허브에 접속해서 확인하는 것이 번거롭기 때문이죠. 이 부분은 저번 포스팅을 하이퍼 링크로 걸고 넘어가겠습니다.

 

 

[우아한 테크코스 3기] LEVEL 3 회고 (163일차)

 

 

 

2차 스프린트 계획

어제는 2차 데모데이로 2주 간 개발한 내용에 대해서 크루들에게 공유하는 시간을 가졌습니다. 우리 팀원들이 워낙 열정맨이라 1차 스프린트때 계획한 핵심 기능을 완수하였습니다.

 

오늘 오전에는 3차 데모데이를 위해 2차 스프린트를 계획했습니다. 1차 스프린트 때는 댓글 위주로 구현하였으므로 이번에는 관리자 기능 쪽에 초점을 맞추기로 했습니다. 그리고 백엔드 내부적으로는 1차 스프린트 때 엄청 달렸으니, 이번에는 기존에 구현한 기능을 리팩토링하며 내실을 다지고, 개인적으로 공부할 분야를 정해 천천히 학습하기로 결정했습니다.

 

저는 그동안 JPA 및 데이터베이스 학습이 부족하다고 판단되어 해당 개념을 학습하며, 페이지네이션 기능을 우리 프로젝트에 적용하는 역할을 맡았습니다. CI / CD만 그동안 질리게 했으니 이제는 다른 분야를 파 볼 때가 맞는 것 같습니다.

 

 

정리

팀 프로젝트에서 얻는 것이 참 많은 듯합니다. 아무쪼록 언제까지 협업을 하게 될지는 모르겠으나, 현재 하고 있는 일을 즐기면서 열심히 해 보려고 합니다.