내 프로젝트를 서버에 배포할 수 없다는 이유로 머리를 부딪친 것은 토요일 오후였습니다. 저는 지난 한 달 동안 Udemy에서 React를 배우고 있는 React 및 Front-end 세계에 대해 거의 처음 접했습니다.

과정의 절반을 마친 후 배운 지식으로 간단한 앱을 만들기로 했습니다. WhoCares?에서 찾을 수 있는 이름을 GitHub으로 지정했습니다. 저는 프로젝트를 웹에 배포하여 친구들에게 보여줄 수 있기를 바랐습니다. 그것이 모든 것이 시작된 곳입니다.

비애

번 들러로 Webpack을 처음 사용했습니다. 나는 보통 Laravel 프로젝트를 Digital Ocean에 배포하고 일부 Node 프로젝트에는 Heroku도 사용했습니다. 그래서 저는 이 앱을 이들 중 하나에 배포할 생각을 했습니다. 나는 인터넷을 통해 서핑했다. 결과적으로 노드 백엔드를 사용하여 React 앱을 배포하지 않는 단일 리소스를 찾을 수 없거나 단계를 따르거나 내 애플리케이션과 연관시키기가 너무 어렵습니다. 배포에 대한 아이디어를 4시간 넘게 투자한 후 마침내 배포 아이디어를 포기할 생각을 했습니다. 그때 친구로부터 Firebase에 배포하라는 제안을 받았습니다.

배포

이 섹션에서는 내 애플리케이션을 호스팅하는 데 약 20분이 소요된 단계에 대해 작성하고 싶습니다. 그 전에 webpack 구성 파일을 공유하겠습니다.

1. 구성

Firebase 호스팅을 시작하려면 Firebase 콘솔에 로그인하고 프로젝트 대시보드의 호스팅 패널로 이동한 다음 시작하기를 클릭하세요.

다음으로 Firebase CLI(명령줄 도구)를 설치하고 사이트를 초기화합니다.

Firebase CLI 설치

Node.js와 npm이 설치되면 npm을 통해 Firebase CLI를 설치할 수 있습니다.
npm install -g firebase-tools
이렇게 하면 전 세계적으로 사용 가능한 firebase 명령이 설치됩니다. 최신 버전으로 업데이트하려면 동일한 명령을 다시 실행하면 됩니다.

사이트 초기화

배포하려는 기존 Firebase 프로젝트가 있는 경우 프로젝트의 루트 디렉터리로 cd하고 다음을 실행합니다.
$ firebase init
firebase init 명령은 프로젝트 디렉터리의 루트에 구성 파일firebase.json을 생성합니다. firebase.json 호스팅 구성은 다음과 같습니다.

{
  "hosting": {
    "public": "public",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ]
  }
}

2. 빌드

webpack을 사용하면 터미널에서 다음 명령을 사용하여 모든 프로젝트 구성 요소를 단일 파일로 묶을 수 있습니다.
$ webpack
이렇게 하면 bundle.js 파일로 가져올 수 있는 index.html 파일이 생성되며 두 파일 모두 공용 폴더에 있게 됩니다.

프로젝트 구조

 Root

    Public

        -bundle.js

        -index.html

    Src

        React Components

배포

사이트를 배포하려면 프로젝트 디렉터리에서 다음 명령을 실행하기만 하면 됩니다.
$ firebase deploy
그러면 프로젝트가 <YOUR-FIREBASE-APP>.firebaseapp.com에 배포됩니다.