AWS - ECR 레포지토리 생성

ECR 레포지토리를 생성해준다.

우선은 연습용으로 사용할 것이기 때문에 프라이빗으로 생성하고, 레포지토리 이름은 "sample"로 지정했다.

docker file 작성

(docker를 미리 설치해주세요 ^^)
이제 ECR 레포지토리를 생성했으니, 해당 레포에 도커 이미지를 등록하기 위해 dockerfile을 만들어준다.
(도커파일 만드는 방법)
(본인의 프로젝트에 맞게 작성하면 된다.)
이번 Next sample 프로젝트를 docker image로 만들기 위해 아래와 같이 작성한다.

FROM node:18-alpine

WORKDIR /app

COPY package.json ./

RUN npm install

#프로젝트의 모든 파일을 복사
COPY . .

RUN npm run build

#포트 7000번 사용
EXPOSE 7000

CMD ["npm", "run", "start"]

github workflow 수정

작성한 docker file을 기반으로 AWS-ECR에 docker image를 자동으로 push할 수 있도록 workflow.yml을 수정한다.

name: Staging # 워크플로 Action의 이름
on:
  push:
    branches: [main] #github main 브런치에 푸시 발생 시 실행 ( main 외 다른브런치 이용시 이름변경)
jobs:
  staging: #staging이라는 작업
    name: deploy to staging # 작업의 이름
    runs-on: ubuntu-latest # 실행될 작업환경을 말함.
    steps:
      - name: Checkout
        uses: actions/checkout@v3 #체크아웃 받기
      - name: HelloWorld
        uses: actions/hello-world-javascript-action@v1 # 헬로월드 찍어보기
      - name: Configure AWS credentials
        uses: aws-actions/configure-aws-credentials@v1
        with:
          aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }} # Github Secret 이름
          aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }} # Github Secret 이름
          aws-region: ap-northeast-2 # AWS 리전 선택
      - name: Login to Amazon ECR
        id: login-ecr
        uses: aws-actions/amazon-ecr-login@v1
      - name: Build, tag, and push image to Amazon ECR
        id: build-image
        env:
          ECR_REGISTRY: ${{ steps.login-ecr.outputs.registry }}
          ECR_REPOSITORY: sample # ecr 이름
          IMAGE_TAG: ${{ github.run_number }} # git 커밋넘버를 이미지 이름 구분을 위해 넣어줌
        run: |
          # Build a docker container and
          # push it to ECR so that it can
          # be deployed to ECS.
          docker build -t $ECR_REGISTRY/$ECR_REPOSITORY:$IMAGE_TAG .
          docker push $ECR_REGISTRY/$ECR_REPOSITORY:$IMAGE_TAG
          echo "::set-output name=image::$ECR_REGISTRY/$ECR_REPOSITORY:$IMAGE_TAG"

name : Build, tag, and push image to Amazon ECR << 이 부분부터 추가했다.

Git Action / ECR Repository 확인

이제 작성한 docker file과 github workflow를 커밋 & 푸시하여 git action을 통한 docker image 자동 배포를 확인해볼 차례이다.

필자는 workflow의 run 부분을 잘못하여 좀 돌아왔지만 결국 성공했다.

AWS - ECR에도 정상적으로 Image가 push되었다.

마무리하며

이번 포스팅으로 ECR에 docker image를 자동 배포하는 과정을 알아보았다.
여기까지만 해도 기본적인 docker 및 AWS에 대한 지식이 필요하기 때문에 순탄치만은 않았던 것 같다.

다음 포스팅에서는 대망의 ECS 연동 및 자동배포를 다룰 예정이다. (제일 어려운 부분이 될 것 같다.)

화이팅…!!

Next.js 프로젝트 생성

설치 및 실행

vscode를 열고 원하는 폴더에 접근한 후 다음 명령어를 실행한다.

$npx create-next-app

globals.css 파일에서 tailwind CSS 관련된 설정만 남겨두고 나머지는 전부 삭제한다.
page.tsx에서도 “Hello Next.js!” 라는 문구만 작성한다.

$npm run dev

위 명령어를 실행해서 정상적으로 웹 페이지가 열리는지 확인한다.

Github workflow 작성

생성한 Next.js 프로젝트 최상단에 다음과 같은 폴더 및 파일을 추가한다.

1. .github
2. .github/workflows
3. .github/workflows/workflow.yml

이후 workflow.yml 파일에 다음과 같은 내용을 추가한다.

name: Staging # 워크플로 Action의 이름
on:
  push:
    branches: [main] #github main 브런치에 푸시 발생 시 실행 ( main 외 다른브런치 이용시 이름변경)
jobs:
  staging: #staging이라는 작업
    name: deploy to staging # 작업의 이름
    runs-on: ubuntu-latest # 실행될 작업환경을 말함.
    steps:
      - name: Checkout
        uses: actions/checkout@v3 #체크아웃 받기
      - name: HelloWorld
        uses: actions/hello-world-javascript-action@v1 # 헬로월드 찍어보기

git에 push하여 Action이 잘 동작하는지 확인한다.

커밋 메세지가 이상하지만 Action은 정상적으로 동작한다!

다음 포스팅에서는 AWS 연동을 진행할 예정이다.
AWS에서 제공하는 다양한 서비스에 대해 가능하면 최대한 짚어볼 예정이다.