이롭게 현명하게
[Next.js] Next.js 무중단 배포, AWS Amplify로 구축하기 본문
목차
들어가며
AWS Amplify 배포 과정
[들어가며]
멘토링을 진행하면서 배포에 대한 고민을 하게 되었다.
처음에는 기능 구현에 집중했지만 서비스를 운영하는 관점에서 바라보게 되었다.
이전에 진행했던 프로젝트에서는 Vercel을 사용해 배포를 해본 경험이 있다.
Vercel은 설정이 간단하고 Git과 연동하여 자동으로 배포할 수 있다는 장점을 가지고 있어 편리했다.
[Next.js] Next.js를 Vercel에 배포하기
목차 Vercel이란?Next.js 프로젝트 Vercel에 배포하기환경변수 설정커밋부터 배포까지 : 자동 빌드 확인하기 [Vercel이란?]Next.js는 이미 많은 프론트엔드 개발자들이 선택하는 대표적인 React 프레임워크
devyihyun.tistory.com
결과물을 빠르게 확인하는 프로젝트에서 좋은 선택이었다고 생각한다.
그래서 이번 프로젝트에서도 Vercel을 고려했었다.
하지만 프로젝트 주제가 사진 중심이라는 점에서 고민이 생겼다.
지금은 간단하게 사진 촬영 기능만 있지만 앞으로의 확장성을 생각해야 했다.
기능이 추가되더라도 사용자가 불편함을 느끼지 않게 서비스가 중단되지 않는 무중단 배포 환경이 필요했다.
이러한 요구사항을 생각하다 보니 배포만으로는 부족하다고 느껴 인프라 구조까지 함께 고민하게 되었다.
이번 프로젝트에서는 배포만 하는 것이 아닌 이미지 업로드 처리와 데이터 흐름까지 함께 설계해야 했기 때문에 유연한 인프라를 구성할 수 있는 환경이 필요했다.
AWS는 서버를 거치지 않고 파일을 업로드할 수 있다는 장점이 있다.
그래서 이미지 처리를 위해 S3를 활용하는 방법과 Pre-signed URL 방식도 필요하지 않을까라는 생각이 들었다.
그래서 확장성과 유연성을 고려해 AWS를 선택하게 되었다.
AWS는 말로만 들어봤지 복잡하지 않을까?라는 걱정이 앞섰다.
그래서 간단하게 시작할 수 있는 AWS Amplify를 사용해 보기로 했다.
이번 프로젝트에서는 배포를 넘어서 실제 서비스를 운영하며 확장 가능한 구조를 만들어 가는 것을 목표로 하고 있다.
AWS에 대한 자세한 내용은 다음 포스팅에서 작성할 계획이다.
[AWS Amplify 배포 과정]
깃 레포지터리를 만든다.
next.js 프로젝트를 배포할 것이기 때문에 Next.js로 구현했다.
AWS에 로그인을 해준다. [바로가기]
이때 콘솔로그인 또는 계정 생성으로 로그인을 해주어야 한다.
뭣도 모르고 프로필 이미지 페이지에서 로그인했다가 엄청 헤매었었다... 여러분들의 시간은 소중하니까~
계정 플랜을 선택해 준다.
6개월은 무료로 사용할 수 있다.
AWS 콘솔에 접속한다.
콘솔 화면 검색창에서 amplify를 검색한다.
Amplify 화면에서 앱 배포, 템플릿으로 시작하기 버튼이 보인다.
두 버튼의 결과는 같기 때문에 아무거나 클릭하면 된다.
저는 앱 배포를 클릭했습니다.
새 앱을 생성하여 설정하는 화면이 나타납니다.
저는 깃 허브의 리포지터리에 있는 내용을 배포해 보겠습니다.
깃 허브 클릭 > 다음 클릭
Git에 권한을 허가하는 화면이 나타납니다.
Authorize 클릭
특정 레포지토리만 배포할 수 있도록 선택합니다.
레포지터리를 선택 후 Install & Authorize 클릭
리포지토리 및 브랜치 추가 화면이 나타난다.
목록에서 선택을 클릭하면 연동했던 리포지터리가 나타난다.
연결한 리포지터리 클릭
리포지터리를 선택하면 브랜치가 선택됩니다.
이때 브랜치는 production 할 브랜치입니다.
내 앱은 모노 리포지터리임 : 리포지터리에 백엔드와 함께 있는 리포지터리를 말합니다.
앱 설정 화면이 나타납니다.
빌드 설정에서는 사용하고 있는 패키지 매니저의 명령어를 입력합니다.
저는 npm을 사용한 프로젝트이므로 npm으로 설정해 주었습니다.
고급 설정 화면입니다.
지금 당장 필요한 부분이 없어 설정하지 않았습니다.
설정을 완료하면 검토 화면이 나옵니다.
편집 버튼이 보이는데 편집 버튼을 클릭하면 아무런 동작이 없습니다.
아마 AWS에서 아직 구현 중인 걸로 예상됩니다.(26년 5월 8일 기준)
다음을 클릭하면 배포가 진행됩니다.
앱 배포 상태를 확인할 수 있습니다.
앱 배포가 성공하였습니다.
[번외 : 배포 삭제]
앱 삭제를 원한다면 앱 삭제를 클릭한 후 진행하면 된다.
https://devyihyun.tistory.com/271
[IT 노트] CI/CD란 무엇인가? 개념부터 파이프라인 이해하기
목차 CI/CD란 무엇인가?CI/CD 파이프라인 구조환경별 배포 전략 [CI/CD란?]CI/CD는 애플리케이션 개발에서 배포까지의 모든 단계를 자동화를 통해서 조금 더 효율적이고 빠르게 사용자에게 배포할 수
devyihyun.tistory.com
잘못된 정보는 댓글에 남겨주시면 감사하겠습니다!😊
댓글과 좋아요는 큰 힘이 됩니다!
[ 참고자료 ]
'웹 개발 > Next.js' 카테고리의 다른 글
| [Next.js] Next.js 시작하기 : 프로젝트 생성 (0) | 2026.05.18 |
|---|---|
| [Next.js] Next.js를 Vercel에 배포하기 (0) | 2026.05.15 |
| [Next.js] Next.js + Firebase(Firestore) 연동하기 + API 구조 설계 (0) | 2026.05.11 |
