Heroku에 MERN 스택 앱 배포하기 - Redux를 사용한 MERN 스택 튜토리얼 #15
목차
- 소개
- 메르지 스택 튜토리얼 시리즈
- 2.1. MERN 애플리케이션 배포하기
- 2.2. 사전 준비 작업
- 2.3. 서버 설정
- 2.4. 프론트엔드 설정
- 2.5. Heroku에 애플리케이션 배포하기
- Heroku 클라우드 플랫폼 소개
- Heroku 계정 생성 및 로그인
- Heroku CLI 설치
- MERN 애플리케이션 배포 방법
- 6.1. 처음 방법: Heroku Post Build
- 6.2. 대안 방법: Build 폴더 직접 푸시
- 앱 배포 후 추가 작업
- 결론
MERN 애플리케이션을 Heroku에 배포하는 방법
이번에는 Roadside Coder의 메르지 스택 튜토리얼 시리즈의 마지막 비디오에 오신 것을 환영합니다. 이번 비디오에서는 MERN(MongoDB, Express, React, Node.js) 스택 애플리케이션을 Heroku에 배포하는 방법에 대해 알아보겠습니다.
1. 소개
메르지 스택(MERN Stack)은 JavaScript를 기반으로한 웹 개발 스택입니다. 이 스택은 MongoDB, Express, React, Node.js의 약자로 이루어져 있으며, 백엔드와 프론트엔드 개발을 동시에 할 수 있도록 도와줍니다. 이 튜토리얼 시리즈에서는 MERN 스택을 사용하여 간단한 메모 애플리케이션을 구축하고 배포하는 방법을 다루었습니다.
2. 메르지 스택 튜토리얼 시리즈
2.1. MERN 애플리케이션 배포하기
이 비디오에서는 MERN 애플리케이션을 Heroku 클라우드 플랫폼에 배포하는 방법에 대해 상세히 설명합니다. 배포되는 애플리케이션은 Node Zipper라는 메모 애플리케이션입니다. Heroku에 애플리케이션을 배포하기 위해 사전 준비 작업을 수행하고, 서버 설정 및 프론트엔드 설정을 완료해야 합니다.
2.2. 사전 준비 작업
배포를 위해 애플리케이션의 백엔드 폴더로 이동하여 server.js 파일에 몇 가지 명령어를 추가해야 합니다. 이렇게 하면 현재 디렉토리의 경로를 포함하는 변수를 작성할 수 있습니다. 또한, 애플리케이션이 개발 모드인지 확인해야 하며, 개발 모드인 경우에는 일부 라우트를 추가하지 않아야 합니다.
2.3. 서버 설정
개발 모드가 아닌 경우 Express의 static 미들웨어를 사용하여 프론트엔드의 정적 파일을 제공해야 합니다. 먼저, 프론트엔드의 build 폴더를 생성해야 합니다. 그런 다음, server.js 파일에서 app.use(express.static(path.join(__dirname, 'frontend/build'))) 코드를 추가해야 합니다.
2.4. 프론트엔드 설정
프론트엔드 폴더의 build 폴더에는 애플리케이션을 실행할 수 있는 형식으로 번들링된 HTML, CSS, JavaScript 파일이 포함되어야 합니다. 프론트엔드 폴더에서 npm run build 명령을 실행하여 build 폴더를 생성해야 합니다.
2.5. Heroku에 애플리케이션 배포하기
실제 배포를 위해 Heroku 계정을 생성하고 로그인해야 합니다. Heroku CLI를 설치한 뒤에는 Heroku에 애플리케이션을 배포하기 위해 몇 가지 단계를 수행해야 합니다. 먼저, Heroku 클라우드 플랫폼에 애플리케이션을 생성하고, 애플리케이션의 프로세스 파일을 작성해야 합니다. 이후에는 애플리케이션을 초기화하고 Heroku에 푸시하여 배포할 수 있습니다.
3. Heroku 클라우드 플랫폼 소개
Heroku는 개발자가 애플리케이션을 빌드, 배포 및 관리할 수 있도록 도와주는 클라우드 플랫폼입니다. Heroku는 PaaS(Platform-as-a-Service)의 형태로 제공되며, 다양한 언어와 프레임워크를 지원합니다. Heroku를 사용하면 우리의 MERN 애플리케이션을 손쉽게 배포할 수 있습니다.
4. Heroku 계정 생성 및 로그인
Heroku 계정을 생성한 뒤, 생성한 계정으로 로그인해야 합니다. Heroku 웹사이트에 접속한 후 회원가입을 진행하고, 생성한 계정으로 로그인합니다.
5. Heroku CLI 설치
Heroku CLI(Command Line Interface)를 설치해야 합니다. Mac OS 사용자는 Homebrew를 통해 설치할 수 있으며, Windows 사용자는 Heroku 웹사이트에서 설치파일을 다운로드하여 설치합니다. 설치가 완료되면 VS Code 등의 텍스트 에디터를 재시작해야 합니다. 이후에는 터미널을 통해 Heroku CLI를 사용할 수 있습니다.
6. MERN 애플리케이션 배포 방법
MERN 애플리케이션을 Heroku에 배포하는 방법은 크게 두 가지입니다. 첫 번째 방법은 "Heroku Post Build"라고 하는 방법으로, 배포 시 애플리케이션을 빌드하여 자동으로 배포하는 방법입니다. 두 번째 방법은 빌드 폴더를 직접 푸시하여 배포하는 방법으로, 직접 빌드한 애플리케이션을 Heroku에 푸시하여 배포하는 방법입니다.
6.1. 처음 방법: Heroku Post Build
빌드 폴더를 직접 푸시하는 대신, Heroku에게 빌드 작업을 위임하는 방법입니다. 이 방법은 간편하지만 오류가 발생할 수 있는 경우가 있습니다.
6.2. 대안 방법: Build 폴더 직접 푸시
빌드 폴더를 직접 생성한 뒤, 이를 Heroku에 푸시하여 배포하는 방법입니다. 이 방법은 빌드 폴더를 이미 생성한 경우에 유용합니다. 빌드 폴더를 푸시하면 Heroku에서 해당 폴더를 사용하여 애플리케이션을 실행할 수 있습니다.
7. 앱 배포 후 추가 작업
애플리케이션을 배포한 후에는 몇 가지 추가 작업을 수행해야 합니다. 첫 번째로는 환경 변수를 설정해야 합니다. Dotenv 파일에 있는 모든 내용을 Heroku 앱에 추가해야 합니다. 두 번째로는 배포된 애플리케이션을 테스트해 보아야 합니다. 방금 배포한 앱이 정상적으로 작동하는지 확인해야 합니다.
7.1. 환경 변수 설정
Heroku 대시보드에서 환경 변수를 설정해야 합니다. 설정 페이지에서 key-value 쌍 형태로 Dotenv 파일에 있는 변수들을 추가해야 합니다. 환경 변수를 설정하지 않으면 애플리케이션에서 오류가 발생할 수 있습니다.
7.2. 앱 테스트
환경 변수를 설정한 후에는 애플리케이션을 테스트해 보아야 합니다. 배포한 앱의 URL에 접속하여 예상한 대로 작동하는지 확인해야 합니다.
8. 결론
이제 MERN 애플리케이션을 Heroku에 성공적으로 배포했습니다. 이 튜토리얼 시리즈를 완료하였으며, 개발자로서의 기술을 향상시키는 데 도움이 되었기를 바랍니다. 다양한 기술적인 주제로 더 많은 튜토리얼을 제공하기 위해 노력하겠습니다. 감사합니다!
하이라이트
- MERN(MongoDB, Express, React, Node.js) 스택을 사용한 애플리케이션 개발과 배포
- Heroku에 애플리케이션 배포를 위한 사전 준비 작업과 설정
- Heroku CLI를 사용한 애플리케이션 배포 방법 소개
- MERN 애플리케이션 배포 시 "Heroku Post Build"와 "Build 폴더 직접 푸시" 방법 비교
- 애플리케이션 배포 후 추가 작업과 테스트 방법 소개
FAQ
Q1: MERN 스택이 무엇인가요?
A1: MERN 스택은 MongoDB, Express, React, Node.js를 결합한 웹 개발 스택입니다. 백엔드와 프론트엔드 개발을 위한 통합된 환경을 제공합니다.
Q2: Heroku는 무엇인가요?
A2: Heroku는 개발자가 애플리케이션을 배포하고 관리할 수 있는 클라우드 플랫폼입니다. 다양한 언어와 프레임워크를 지원하여 편리한 배포 경험을 제공합니다.
Q3: Heroku CLI를 설치해야 하나요?
A3: 예, Heroku CLI를 설치해야 합니다. CLI(Command Line Interface)를 통해 Heroku에 애플리케이션을 배포할 수 있습니다.
Q4: MERN 애플리케이션을 배포하는 방법은 무엇인가요?
A4: MERN 애플리케이션을 배포하는 방법은 크게 두 가지입니다. "Heroku Post Build"와 "Build 폴더 직접 푸시" 방법을 사용할 수 있습니다.
Q5: 앱을 배포한 후 추가 작업이 필요한 이유가 무엇인가요?
A5: 앱을 배포한 후에는 환경 변수 설정 및 앱의 작동 여부 확인 등 추가적인 작업이 필요합니다. 이를 통해 앱이 정상적으로 배포되고 작동하는지 확인할 수 있습니다.