[React] 애플리케이션 배포하기

밥슌·2024년 8월 21일

React

목록 보기

2/16

React 애플리케이션을 배포하기 위해서는 다음 단계를 따라 진행할 수 있습니다!
React 애플리케이션을 앱 형태로 내보내는 방법은 여러 가지가 있지만, 여기서는 가장 일반적인 방법인 create-react-app으로 만든 애플리케이션을 빌드하고 배포하는 과정을 설명하겠습니다. 😊

1. 애플리케이션 빌드

먼저, 프로젝트를 빌드해야 합니다. 빌드는 소스 코드를 최적화된 형태로 패키징하여 배포할 수 있게 해줍니다.

터미널 열기:
프로젝트의 루트 디렉토리에서 터미널을 엽니다.
빌드 명령 실행:
```
npm run build
```
이 명령어는 /build 폴더에 최적화된 프로덕션용 빌드를 생성합니다. 이 빌드에는 모든 HTML, CSS, JavaScript 파일이 포함되어 있으며, 애플리케이션의 크기가 줄어들고 성능이 향상됩니다.

2. 빌드된 애플리케이션 배포

빌드된 애플리케이션을 다양한 방법으로 배포할 수 있습니다. 여기에서는 일반적인 방법 몇 가지를 소개하겠습니다.

2.1. GitHub Pages를 통한 배포

GitHub Pages 설치:
```
npm install gh-pages --save-dev
```
package.json 파일 수정:
package.json 파일에 다음 줄을 추가합니다.
```
"homepage": "http://{username}.github.io/{repository-name}",
```
여기서 {username}은 GitHub 사용자 이름이고 {repository-name}은 저장소 이름입니다.
스크립트 추가:
package.json 파일에 다음 두 가지 스크립트를 추가합니다.
```
"scripts": {
  "predeploy": "npm run build",
  "deploy": "gh-pages -d build"
}
```
배포:
```
npm run deploy
```
이 명령어는 애플리케이션을 빌드하고 gh-pages 브랜치에 배포합니다. 이후 GitHub Pages에서 애플리케이션을 볼 수 있습니다.

2.2. Netlify를 통한 배포

Netlify 계정 만들기:
Netlify에 가입하고 계정을 만듭니다.
프로젝트 연결:
Netlify 대시보드에서 새로운 사이트를 생성하고, GitHub, GitLab, Bitbucket 등의 저장소와 연결합니다.
빌드 명령과 폴더 설정:
빌드 명령어를 npm run build로 설정하고, 빌드 폴더를 build로 지정합니다.
배포:
설정이 완료되면 Netlify가 자동으로 애플리케이션을 빌드하고 배포합니다. 이후 Netlify에서 제공하는 도메인을 통해 애플리케이션에 접근할 수 있습니다.

2.3. Firebase Hosting을 통한 배포

Firebase CLI 설치:
Firebase CLI를 설치합니다.
```
npm install -g firebase-tools
```
Firebase 로그인:
```
firebase login
```
Firebase 프로젝트 초기화:
프로젝트의 루트 디렉토리에서 Firebase를 초기화합니다.
```
firebase init
```
초기화 과정에서 Hosting 서비스를 선택하고, 빌드 디렉토리를 build로 설정합니다.
배포:
```
firebase deploy
```
이 명령어는 애플리케이션을 Firebase에 배포합니다.

3. 모바일 애플리케이션으로 변환 (선택 사항)

React 웹 애플리케이션을 모바일 애플리케이션으로 내보내려면 React Native 또는 Cordova, Ionic 같은 하이브리드 앱 프레임워크를 사용할 수 있습니다. 또한, Expo와 같은 도구를 통해 React Native로 쉽게 모바일 앱을 만들 수 있습니다. 이러한 방법은 React 웹 애플리케이션과는 조금 다른 환경에서 작업하게 되므로, 추가적인 학습과 설정이 필요합니다.