반응형

지난 스텝에 이어서, AWS와 Git을 연동해보도록 하겠습니다.

환경

Node : 16.20.0

TypeScript : 5.1.6

Next : 8.19.4

 

ECS 클러스터 생성

 

aws ECS메뉴에서 클러스터 생성을 누른 뒤, demo 로 이름만 지정해준뒤 (나머지 기본값) 클러스터를 생성해줍니다 !

ECS 테스크 정의

 

 

[테스크정의] - [새 테스크 정의 생성] 버튼을 클릭합니다.

 

 

[테스크 정의 패밀리] : 사용할 패밀리 명을 적절히 입력해줍니다.

 

 

컨테이너 영역

[이름] : 컨테이너 이름

[이미지 URI] : ECR 이미지의 URI을 입력합니다. 맨뒤에 :latest를 해야 마지막 버전의 이미지를 사용합니다 ~

[포트] : 사용하는 컨테이너의 포트 입력 

 

그 외 항목은 기본값을 입력합니다

 

 

 

ECS Service 생성

 

화면에서 [생성] 이라는 버튼을 눌러서 ecs 서비스를 생성해주도록 합시다 !

 

  • 패밀리 : 생성한 클러스터명 선택
  • 서비스 이름 : 사용할 서비스 명 입력

- Route를 이용해 로드발란서를 사용하는 경우 로드발란서 설정을 해줍니다.


나머지는 기본값으로 하고 저장을 누르면, 서비스 설정까지 완료되었습니다 !

이제 다시 프로젝트로 돌아와서, Task를 만들어 주도록하죠 !


 

Task Json 복사

 

왼쪽의 [테스크 정의] > 생성한 클러스터 [저는 demo]명 클릭 > 최신 개정판을 클릭하면 위와같은 화면이 나옵니다.

위 화면에서 Json 클릭

 

 

 

요 Json을 복사하여, 프로젝트의  [.ecs] > [prod] > [task.json] 파일을 만들어 붙여넣기 해줍니다.

 

 

마지막으로 ! githib > workflow를 수정해주고 커밋해주면 서비스가정상적으로 배포되는 부분 확인 하실 수 있습니다.

 

name: Staging # 워크플로 Action의 이름
on:
  push:
    branches: [main] #github main 브런치에 푸시 발생 시 실행 ( main 외 다른브런치 이용시 이름변경)
jobs:
  staging: #staging이라는 작업
    name: demo # 작업의 이름
    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-1 # AWS 리전 선택
      #AWS ECR(Elastic Container Registry)
      - name: Login to Amazon ECR # AWS-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: demo # ecr이름
          IMAGE_TAG: demo-${{ github.run_number }} # git 커밋넘버를 이미지 이름 구분을 위해 넣어줌
        run: |
          docker build --no-cache --network host -t $ECR_REPOSITORY:$IMAGE_TAG -f dockerfile .
          docker tag $ECR_REPOSITORY:$IMAGE_TAG $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: Fill in the new image ID in the Amazon ECS task definition
        id: task-def
        uses: aws-actions/amazon-ecs-render-task-definition@v1
        with:
          task-definition: .ecs/prod/task.json # task파일
          container-name: demo #이미지 컨테이너 이름
          image: ${{ steps.build-image.outputs.image }}
      - name: Deploy Amazon ECS task definition
        uses: aws-actions/amazon-ecs-deploy-task-definition@v1
        with:
          task-definition: ${{ steps.task-def.outputs.task-definition }}
          service: demo-prod #클러스터 서비스 명
          cluster: demo # 클러스터 명
          wait-for-service-stability: true

 

 

 


다들 고생 많으셨습니다 !

 

반응형
반응형

지난 스텝에 이어서, AWS와 Git을 연동해보도록 하겠습니다.


환경

Node : 16.20.0

TypeScript : 5.1.6

Next : 8.19.4

 

aws Accees Key 생성

Aws Access Key 생성을 위해 Aws 로그인 후 Iam > 사용자 > 보안자격증명에서 Access Key생성을 한다(해당 키는 노출되면안됌 !)


낄낄 어피치 옆에 엑세스 키 만들기 버튼을 이용해서 만들어주면 됩니다요 ~

주의 ! : 발급된 엑세스키는 시크릿키, 엑세스키2개가 발급되는데  별도로 꼭 저장해놓읍시다 !

 

Github에 엑세스키 저장

아래 이미지의 경로에서 

AWS_SECRET_ACCESS_KEY(시크릿키)와 AWS_ACCESS_KEY_ID(엑세스키)를 각각 입력해준다 !

 

입력하면 아래와 같이 나온다!

 

 

 

 

WorkFlow 수정
name: Staging # 워크플로 Action의 이름
on:
  push:
    branches: [main] #github main 브런치에 푸시 발생 시 실행 ( main 외 다른브런치 이용시 이름변경)
jobs:
  staging: #staging이라는 작업
    name: demo # 작업의 이름
    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-1 # AWS 리전 선택
      #AWS ECR(Elastic Container Registry)
      - name: Login to Amazon ECR # AWS-ECR 로그인
        id: login-ecr
        uses: aws-actions/amazon-ecr-login@v1

지난 스텝에서 작성했던 WorkFlow를 수정해주도록 하자 !

 

커밋

커밋하여 Action이 정상적으로 성공되었는지 체크한다 !

Action이 성공하였다면 이제 AWS에 인증키로 로그인하는 부분까지 완료하였다  !

다음 스텝에서는 Docker File로 도커이미지 생성하는 부분까지 알아보도록 하자 !



주의사항

AWS와 연동하기위해서는 AWS계정에 권한이 필수적으로 입력되어야 한다 ! 권한을 꼭 전부 주도록 ㅎ ㅏ자 !

 

필자는 아래의 권한을 주었다

 

 

-------------------------------------------------------------------------------------------------------------

 

정상적으로 Actions가 동작한것을 확인 할 수 있다 !

다음 스텝에서 보자구요 ~~

반응형
반응형
환경

Node : 16.20.0

TypeScript : 5.1.6

Next : 8.19.4

 

Next 프로젝트 생성

Git 레파지토리생성을 했다고 생각하고 Next 프로젝트 부터 생성하도록 하겠습니다.

1. Node 설치

Node 설치는 구글에 검색해보면 쉽게 찾을 수 있습니다. 구글 검색하여 노드설치 해주기 !


2. create-next-app 설치

> npm install create-next-app

 

3. Next.js 프로젝트 생성

//노드를 설치했다면, 프로젝트 경로에서 아래 명령어를 입력하여 next.js 프로젝트를 생성한다
> npm create-next-app my-app

 

 

프로젝트 실행

프로젝트 생성을 완료하였다면, 이제 프로젝트를 실행하여 정상적으로 화면이 나오는지 확인합니다.

//프로젝트 경로에서 npm run dev 입력
> npm run dev

프로젝트가 정상적으로 실행된 것을 확인할 수 있습니다.


 

.github > workflows 작성

 

//프로젝트 root 경로에서 아래 폴더와 파일을 생성해준다.

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

 

 

workflow.yml

 

workflow.yml에 아래 내용 입력

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

 

이제 Git 커밋&푸시를 하게되면 Github Action이 발생한다. 오류가 나지않고 정상적으로 진행되는지 확인하기 !

 

 

작업이 성공적으로 끝났습니다 !

자 이제 Github Workflow를 통해 Action을 사용하도록 설정이 완료되었습니다 

다음 스텝에서는 실질적으로 AWS와 연동해보도록 하겠습니다.

감사합니다.

반응형

+ Recent posts