지나가던 개발(zigae)

  • Home
  • AWS Amplify + Next 배포

AWS Amplify + Next 배포

2021년 5월 31일 • ☕️ 3 min read

기존에 vercel으로 호스팅 하고 있었지만 organization은 pro를 등록 해야만 이용 가능한 이슈가 있어서 프리티어가 남아있는 aws의 amplify로 옮긴 작업내용을 적고자한다. 공식문서에는 dashboard와 cli 를 이용한 방법 총 두가지 방법이 제시되고 있고 필자는 해당포스트에서 두가지 방법 모두를 다루고자 한다.

  • Dashboard 는 마우스만으로 배포가 가능한 거 같다.. 갓..
  • fargate ⇒ netlify ⇒ vercel ⇒ amplify 4번째 종착지이다. 필자와 같이 개고생을 하지 않으려면 처음에 잘 알아보고 하도록 하자..

1. Dashboard 이용

  1. AWS에 로그인 후 Amplify dashboard로 이동한다

  2. 좌측 메뉴 모든 앱에서 New app 하단 Host web app 을 클릭한다.

    amplify1

    필자는 이미 하나의 앱이 배포되어 있지만 처음 등록한다면 안내 문구가 보일 것이다.

  3. 자신이 사용중인 원격저장소 선택 후 Continue

    amplify2

  4. 배포 할 프로젝트 및 브랜치 선택

    amplify3

  5. Role 선택 후 다음

    • Role 이 없다면 아래 create new role 을 클릭해서 생성
    • 환경 변수가 필요하다면 Advanced settings 를 열어서 입력

    amplify4

  6. 마지막으로 저장 및 배포 클릭

    amplify5

  7. 아래와 같이 초록 불이 4개 들어온다면 성공적으로 배포된 것이다.

    • 좌측 URL 클릭으로 방문할 수 있다.

    amplify6

2. AWS CLI

amplify cli 설치

터미널에 개발환경에 맞춰 아래와 같이 입력해준다.

//for Mac
curl -sL https://aws-amplify.github.io/amplify-cli/install | bash && $SHELL

//for Windows & Mac with NPM
npm install -g @aws-amplify/cli

amplify cli 설정

  • Step 1

    amplify configure

    terminal1

    ap-northeast-2 (서울 리전)을 선택 후 엔터

  • Step 2

    terminal2

    username (원하는 이름 입력 후 엔터)

  • Step 3

    1. aws role 을 추가하는 dashbaord 로 이동

    2. 하단 다음 클릭

    3. 아래 정책을 추가

      • 최상위 권한인 AdministratorAccess 권한을 줘도 되긴함

      terminal3

    4. 태그 추가에서는 입력값 없이 다음으로 이동

    5. 마지막으로 사용자 만들기 클릭

    6. 엑세스키와 시크릿키를 어딘가에 복사해두자

    7. 터미널로 돌아와서 6번에서 적어둔 엑세스키 복붙

    8. 시크릿키도 마찬가지로 복붙

    9. 마지막으로 터미널에서 사용할 프로필 네임 입력

NextJS 배포

  1. 리모트 저장소에 master또는 main 브랜치에 작업을 push 한다.

  2. Amplify 배포

    1. 본인 프로젝트 맞춰 아래 내용을 채워준다.

      $ amplify init

? Enter a name for the project: mynextapp
? Enter a name for the environment: dev
? Choose your default editor: Visual Studio Code (or your preferred editor)
? Choose the type of app that youre building: javascript
? What javascript framework are you using: react
? Source Directory Path: src
? Distribution Directory Path: .next
? Build Command: npm run-script build
? Start Command: npm run-script start
? Do you want to use an AWS profile? Y
? Please choose the profile you want to use:

    2. Amplify 호스팅 추가

      $ amplify add hosting

```console
? Select the plugin module to execute: # Hosting with Amplify Console (Managed hosting with custom domains, Continuous deployment)
? Choose a type: # Continuous deployment (Git-based deployments)

  3. 위 과정을 마치고 나면 빌드가 동작한다.

    • 빌드중에 발생하는 에러는 절대적으로 amplify에서 생긴 문제는 아닐 가능성이 크다.

  4. 빌드 성공

    • amplify dashboard 에서 현재 앱이 임의 URL로 등록된 것을 볼 수 있다.

도메인을 구입하지 않았다면 꼭 Route53으로 구매하길 바란다. 뒤에 과정이 나올 예정이지만 미리 스포하자면 Amplify + Route53 AWS 조합으로 사용하면 마우스 클릭만으로 CNAME, ANAME 설정을 마칠 수 있다. 혹시 도메인을 타 사이트에서 관리하고 있다면 Route53으로 옮기는것이 정신 건강에 이로울 것이다.

필자 역시 가비아에서 싸다는 이유로 구매했다가 단 이틀 만에 Route53으로 도메인을 옮겼다. 1-2천원으로 편해질 수 있다면 기회비용으로 지불하기엔 충분하리라 생각한다.

Route53

이번 포스트에서 도매인 구매 방법을 다루진 않는다. 도매인 구매 방법은 공식문서(한글)에 자세히 설명이 돼 있으니 참고하길 바란다.

Amplify Custom Domain

Amplify 대시보드의 도메인 관리 메뉴를 클릭하면 아래와 같은 화면을 볼 수 있는데 검색창에 포커스를 주면 Route53에서 관리 중인 도메인이 보이고 저장 버튼을 누르면 호스팅이 완료된다. amplify domain setting

AWS 조합에서만 가능한 마법이다. CNAME, ANAME 전부 자동으로 등록해준다.