AWS amplify 배포해보기

AWS amplify

• 기본 제공 CI/CD 워크플로우를 통해 정적 웹 애플리케이션의 글로벌 배포 및 호스팅을 지원하는 완전관리형 서비스
• amplify 콘솔에서 git repository 를 연결하기만 하면 코드를 커밋할때마다 변경 사항이 단일 워크플로우로 배포됨
• AWS에 풀스택 애플리케이션을 쉽고 빠르게 구축할 수 있도록 지원하는 특별히 제작된 도구와 서비스 집합

 

장점

• AWS 서비스 연결이 쉽다
• 코드 수정 및 배포 프로세스 간소화
  • 풀스택 CI/CD 배포 파이프라인을 제공하여 코드 한줄로 배포까지 가능
• 프레임워크가 무료
  • AWS amplify 프레임워크 자체는 무료이고, 연결해서 사용한 AWS 서비스에 대한 비용만 지불하기 때문에 비용 부담이 적음

 

배포 과정

1. aws amplify 접속 > 새 앱 생성 > GitHub 선택 (나의 경우 깃허브 레포지터리에서 가져올 예정) > 계정 선택

 

2. 배포할 레포지터리와 브랜치 선택 (모노레포인 경우 아래 "내 앱은 모노레포임" 체크)

그러면 이렇게 자동으로 프레임워크랑 빌드 출력 디렉토리가 감지됨 (신기..)

 

3. 고급 설정 > 환경변수, 라이브 패키지 입력. 없으면 생략 가능

 

4. 마지막으로 검토하고 

 

5. 배포 완료

https://main.d3huosi6oe030s.amplifyapp.com/

Create Next App

 

매우 간단ㅋ

 

스크립트

기존 깃 레포지터리에서 배포하려면 위 과정을 통해 간단하게 배포하면 된다. 하지만 나의 경우 회사 계정으로 깃허브를 썼기 때문에 권한이 없어 레포지터리를 찾을 수 없었다. 토큰을 사용하여 연동하는것도 불가능하여 권한을 가진 사람이 새 앱을 생성하면 기타 스크립트와 환경변수를 셋팅해 주기로 하였다. 

 

우선 나는 turborepo 및 pnpm 모노레포 앱을 배포하였기 때문에 초기 셋팅을 해줘야 했었다.

https://docs.aws.amazon.com/ko_kr/amplify/latest/userguide/monorepo-configuration.html

모노레포 빌드 설정 - AWS Amplify 호스팅

 

위 모노레포 빌드 설정 문서를 보면 

1. .npmrc 파일에서 Node 패키지 설치를 위한 링커를 hoisted 로 설정해야 한다.

node-linker=hoisted

Turborepo와 pnpm 워크스페이스 모노레포 빌드 도구는 .npmrc 파일에서 구성 정보를 가져오기 때문이다.

위 코드를 .npmrc 파일에 붙여넣고 

 

2. amplify.yml 파일 셋팅을 해준다.

version: 1
applications:
  - frontend:
      phases:
        preBuild:
          commands:
            - npm install -g pnpm

pnpm은 amplify 기본 빌드 컨테이너에 포함되지 않는다. 그렇기 때문에 pnpm 워크스페이스 및 Turborepo 앱의 경우 빌드 설정 preBuild 단계에서 pnpm을 설치하는 명령을 추가해야 한다.

 

그렇게 해서 완성한 amplify.yml 스크립트는 아래와 같다.

// amplify.yml

version: 1 // Amplify YAML 버전 번호
applications:
  - frontend: // 프론트엔드 빌드 명령 실행
      phases:
        preBuild: // 실제 빌드가 시작되기 전에 실행
          commands:
            - npm install -g pnpm
        build: // 사용자의 빌드 명령
          commands:
            - pnpm install
            - pnpm run build
      artifacts:
        baseDirectory: .next // 빌드 아티팩트가 있는 디렉터리
        files: // 배포하려는 아티팩트의 파일 지정. 모든 파일을 포함하려면 **/* 입력
          - '**/*'
      // 빌드 시간 종속성을 캐시하는데 사용. 첫번째 빌드에서는 모든 경로가 캐시되며, 이후 빌드에서는 캐시를 다시 확장하고 캐시된 종속성을 최대한 활용하려 빌드시간 단축
      cache: 
        paths:
          - .next/cache/**/*
          - node_modules/**/*
    // 애플리케이션이 있는 레포지터리 내 경로 (여러개의 애플리케이션이 정의되어 있지 않으면 무시)
	  appRoot: apps/[배포할 앱 이름]

 

 

물론 환경변수 셋팅은 해줬다. 이거 안해주면 통신 안됨~

직면했던 에러들

위 스크립트를 작성하는 과정에서 조금 애를 먹었는데 그때 발생한 에러들을 공유한다.

“Artifacts base directory not found in build output, please check your buildSpec”

- 배포 중 빌드 결과물을 찾을 수 없을 때 발생
- appRoot 가 apps/[배포할 앱]인데 baseDirectory 경로를 apps/[배포할 앱]/.next 로 설정해줬기 때문에 발생

-> appRoot 와 artifacts baseDirectory 경로를 맞춰서 해결

 

"pnpm: command not found"

- AWS Amplify 빌드 환경에서 pnpm이 설치되어있지 않기 때문에 발생
- 위 스크립트 (2)번에서 언급한 내용이다

-> preBuild 단계에서 npm으로 pnpm install 후, build 단계에서 pnpm install 하여 해결
pnpm install 이거 안해줘서 꽤나 애먹음 ..ㅎ

 

"CustomerError: Invalid Monorepo spec provided. The "appRoot" key needs to be a string"

- appRoot 설정이 잘못된 위치에 있었기 때문에 발생 (들여쓰기 이슈 ㅎ)

-> appRoot를 frontend 섹션과 같은 레벨로 이동하여 해결

 

 

이렇게 해서 모노레포를 성공적으로 배포하였다. 스크립트 작성 과정에서 조금 낯선 부분이 있긴 했지만 개인적으로 젠킨스 배포보다 훨신 간편하고 쉽게 배포할수 있었다 (물론 조금 느리긴 했지만). CI/CD가 가능한점도 개발하는 입장에서 굉장히 편리했다. aws 짱 ..