세계최강용사의 개발일기

AWS에서 서비스중인 웹 서비스 SSL 인증서 적용하기 !!

저는 개발공부 를위해 AWS에서 소규모 웹 서비스를 운영중입니다 !

기존에는 NginX와 Let's Encrypt를 이용하여, 3개월마다 인증서를 갱신하면서 사용하였습니다 !

3개월 마다 매번 인증서를 갱신하는것이 귀찮아 찾아보니,

별도의 요금없이 이용중인 서비스 리소스에대해서만 과금된다고 하여

AWS의 ACM ( AWS Certificate Manager ) 을 이용하여 SSL 인증서를 적용하기로 하였습니다.

AWS Certificate Manager란?

1. AWS Certificate Manager(ACM)는 AWS 웹 사이트와 애플리케이션을 보호하는 퍼블릭 및 프라이빗 SSL/TLS X.509 인증서와 키를 만들고, 저장하고, 갱신하는 복잡성을 처리합니다.

2. ACM에서 직접 발급하거나 서드 파티 인증서를 ACM 관리 시스템으로 가져오는 방법으로 통합 AWS 인증서에 대한 인증서를 제공할 수 있습니다.

3. ACM 인증서는 단일 도메인 이름, 여러 특정 도메인 이름, 와일드카드 도메인 또는 이러한 도메인의 조합을 보호할 수 있습니다. 

* 와일드카드 인증서는 원하는 만큼의 하위 도메인을 보호할 수 있습니다.

ACM에 대해 알아보았으니, AWS 이용 시 서비스중인 ECS에 SSL 인증서를 적용하는 방법에 대해서 알아보도록 하겠습니다.

1. AWS Certificate Manager(ACM) 메뉴로 이동하여 [요청] 버튼을 클릭합니다.

2. [퍼블릭 인증서 요청] 체크 후 [다음] 버튼을 클릭합니다.

3. 도메인이름에 본인의 도메인 이름 앞에 *. 을 붙혀서 입력해줍니다 !
*를 붙히면 와일드카드 도메인으로 인증서가 발급되며,  요청하는 하위 도메인에 전부 인증서가 적용됩니다 .

ex) *.bigdragon.com 을 적용하면

test.bigdragon.com, sample.bigdragon.com 등 다양한 하위도메인에 인증서가 적용될 것입니다.

4. 요청한 인증서의 상태가 [검증 대기 중]인 것을 확인할 수 있습니다. 

[인증서 ID] 를 클릭해줍니다 !

5. [CNAME 이름]과 [CNAME 값] 을 복사하여 기록해두고 [Route S3에서 레코드 생성] 버튼을 클릭합니다.

6. 도메인 체크 후 [레코드 생성] 버튼을 눌러줍니다.

7. 유형이 [CNAME]으로 레코드가 잘 생성된 것을 확인 할 수 있습니다.

8. 레코드가 등록이 되면 30분정도 후에 상태가 [발급됨] 으로 변경되어있을 거에요 !

인증서가 정상적으로 반영된 부분을 확인 할 수 있내요 !

이것으로 AWS에서 서비스중인 웹에 SSL 인증서를 적용하는 방법을 알아보았습니다.

감사합니다 :)

** 개인 도메인을 가비아 혹은 카페24 혹은 그외 사이트에서 구매하여 가지고 있어야 합니다 
** 저의 프로젝트 기준이므로 꼭 사전에 Elb를 설정해주세요 !

aws Route 53 메뉴로 이동하여 호스팅영역으로 이동하여, [호스팅 영역 생성] 버튼을 클릭해줍니다.

가지고계신 도메인 이름을 입력 후 [호스팅 영역 생성] 버튼을 클릭합니다.

자, 이제 여러분의 호스트가 등록이 되었습니다.

아래 이미지의 dns정보를, 여러분이 사용하는 호스팅 사이트의 dns에 추가 해주세요 !
(아래 URL의 우선순위를 높여서 등록해주세요 ~)

DNS 정보를 등록하였다면 이제 직접적으로 사용자들이 접근할 서브 도메인을 만들어보죠 ~

서브도메인의 경우 가지고있는 퍼블릭 IP가 있다면, IP로 연결하면 되지만,

저는 Elb로 바로 연결할거기때문에 사전에 아래 내용은 Elb셋팅이 꼭 되어 있어야 합니다 ~

레코드 생성 버튼을 눌러줍니다 !

[레코드 이름] : 사용할 서브도메인 앞의 부분을 입력해주십니다

[별칭] : elb와 연결하기 위해 꼭 활성화 해주세요.

[트래픽 라우팅 대상] : 본인의 리전정보로 사용할 elb를 선택해주시면 됩니다.

위 내용이 전부 입력되었으면 레코드 생성을 눌러줍니다.

자, 이제 레코드가 생성이 된 것이 보일거에요 ~

하지만 이렇게 되었다고 바로 접근이 가능한건 아닙니다 ~

https://www.whatsmydns.net/#A/test.bigtori.store

위 URL에서 본인의 레코드를 입력 후 검색 해봅니다 !

그럼 DNS서버에 본인의 도메인이 얼마나 뿌려졌나 확인 할 수 있습니다

체크상태가 어느정도 나와야 접근이 가능하니 바로 나오지 않는다고 너무 상심하지 마세요 :)

앗차차 그리고 꼭 체크해주셔야 하는 부분이있습니다 !

aws 보안그룹에서 인바운드규칙과 아웃바운드규칙을 확인하셔서 본인 서비스에 맞게 규칙이 설정되어있는지 체크해주세요 ~

본인 포트가 막혀있다면 접근이 안될 수 있습니다 !!

위 내용까지 마무리하면 본인의 도메인이 정상적으로 elb 혹은 IP와 연결되는것을 확인하실 수 있을거에요 !

감사합니다 ~

지난 스텝에 이어서, 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 ECR 생성

AWS ECR을 demo로 생성해주도록 하자 !

Workflow 수정

ECR을 문제없이 수정했다면 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"

dockerfile 생성

root경로에 docker파일을 생성해준다 ~

*** Docker File의 경우 본인의 프로젝트 구조에 맞게 작성 해주셔야 합니다 !
아래 내용은 제 프로젝트 기준입니다 ***

FROM node:16.20 AS build

#/usr/src로 이동
WORKDIR /app

# package 복사
COPY /my-app/package*.json /my-app/yarn.lock ./
RUN yarn install
#파일전체복사
COPY /my-app .
RUN yarn build

FROM node:16.20  AS runner
WORKDIR /app

COPY --from=build /app/package*.json ./
COPY --from=build /app/yarn.lock ./
COPY --from=build /app/public ./public
COPY --from=build  /app/.next/static ./.next/static

# 운영환경 Install
RUN yarn install --production 

EXPOSE 7878
CMD ["yarn", "start"]

커밋 !

전 스텝과 마찬가지로 커밋 후 ! 정상적으로 Action이 성공하는지, ECR이 생성되었는지 확인 후 마무리 하도록 하자 !

다음 스텝에는 ECR을 기준으로 서비스를 띄워보도록 하자 ~

둘다 정상적으로 동작되었다 !!

다음 스텝에 만나요 ~~

지난 스텝에 이어서, 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와 연동해보도록 하겠습니다.

감사합니다.