[React] React + Vite + TS + Firebase Hosting + Github Action 구축하기

| 서론

안녕하세요, 팡일입니다.
 
오늘은 React + Vite + TS 환경과 Firebase Hosting 그리고 Github Action을 구축하는 방법에 대해서 공유 드리려고 합니다.
 
Vercel로 CI/CD를 구축하는 방법도 공유드린 적이 있는데요? Vercel의 경우에는 아래의 포스팅을 참고해주셔도 좋을 것 같습니다.

[React] React 프로젝트에 Vercel + GitHub Actions로 CI/CD 구축하기

 
이 과정은 크게 어렵지 않습니다! 간단하게 순서를 나열해보면 아래와 같습니다.

• 1단계 :  로컬에 React + Vite + TS 환경 구축하기
• 2단계 : Firebase 세팅하기

물론, 2단계에서 비교적 세부 단계가 길지만, 그래도 충분히 따라가실 수 있습니다.
 
 
 

| 1단계 :  로컬에 React + Vite + TS 환경 구축하기

가장 먼저 진행해야 하는 부분은 바로 로컬에 React 프로젝트를 세팅해야 합니다.

1) 터미널에서 프로젝트 생성하기

 
(1) 아래의 명령어를 입력합니다.

npm create vite@latest 프로젝트명 -- --template react-ts

 
(2) Use rolldown-vite (Experimental)?
: Vite의 차세대 번들러 실험 버전을 사용할지 물어보는 항목으로, 아직 실험 단계이므로 'No'를 입력해주세요.
 
(3) Install with npm and start now?
: 프로젝트 생성 후 자동으로 `npm install`과 `npm run dev`를 실행할지 물어보는 항목으로, 둘 다 상관 없지만, 'No'를 입력해주세요.
 
(4) Scaffolding project in ...
: 선택한 옵션 기반으로 프로젝트 뼈대를 생성중임을 알려주는 항목입니다.
 
 

2) 필요한 패키지 설치하기 (Optional)

: 현재 이 부분은 필수 사항이 아니기에, 스킵하고 다음 부분으로 넘어가셔도 좋습니다. 이 부분은 함께 프로젝트를 하고 있는 분을 위해 공유되는 부분임을 미리 알려드립니다.
 
(1) 필요한 패키지 설치
: 현재 프로젝트에 기본적으로 필요한 패키지를 설치해줍니다.

npm install react-router-dom

npm install @tanstack/react-query

npm install @tanstack/react-query-devtools

npm install tailwindcss @tailwindcss/vite

npm install dayjs

npm install -g firebase-tools

 
(2) tailwind CSS 적용하기
: tailwind CSS의 경우 단순히 패키지 설치로 끝나는 것이 아닌, 몇 가지 작업을 더 진행해주어야 합니다. Tailwindcss 공식 사이트 내에서 제공되는 Using-vite 방법을 사용했습니다.

Installing with Vite - Installation

 
(2-1) vite.config.ts 파일에서 아래와 같이 수정해줍니다.

• import tailwindcss from "@tailwindcss/vite";
• tailwindcss()

import { defineConfig } from "vite";
import tailwindcss from "@tailwindcss/vite";
import react from "@vitejs/plugin-react";

// https://vite.dev/config/
export default defineConfig({
  plugins: [react(), tailwindcss()],
});

 
(2-2) index.css 파일을 아래와 같이 수정해줍니다.

• @import "tailwindcss";

 
(2-3) App.tsx 파일에서 tailwindcss를 적용합니다.

function App() {
  return (
    <div>
      <p className="text-red-500">Tailwind CSS 테스트</p>
    </div>
  );
}

export default App;

정상적으로 적용된 것을 볼 수 있습니다.

 
 

| 2단계 : Firebase 세팅하기

로컬에 React + Vite + TS 프로젝트 세팅을 완료한 뒤에는, Firebase 콘솔에 접속하여 로그인 후 '프로젝트 만들기'를 진행해야 합니다.

1) 프로젝트 만들기

: Firebase를 사용하기 위해서는 프로젝트를 생성해주어야 합니다. 아래의 단계를 밟아가시면 됩니다.
 
(1) 프로젝트 이름을 입력합니다.

 
(2) AI 지원의 경우도 선택사항이지만, 미사용하는 부분으로 설정해줍니다.

 
(3-1) Google 애널리틱스의 경우도 선택사항이지만, 사용하는 부분으로 설정해줍니다.

 
(3-2) 애널리틱스르 사용하는 경우, 애널리틱스 위치를 '대한민국'으로 설정 후, 아래의 체크 박스를 체크한 뒤 '프로젝트 만들기' 버튼을 눌러줍니다.

 
(4) 프로젝트가 준비되었습니다.

 
 

2) '웹' 플랫폼 등록하기

: Firebase 프로젝트를 생성한 뒤에는 사용하고자 하는 플랫폼, 즉 웹 플랫폼을 등록해야 합니다. 아래의 단계를 밟아가시면 됩니다.
 
(1) 프로젝트명 아래에서 '웹' 플랫폼을 선택합니다.

 
(2) 앱 닉네임을 입력한 뒤, Firebase 호스팅을 설정합니다. 원하는 경우 도메인명도 수정 가능합니다.

 
(3-1) Firebase SDK 추가하기
: 프로젝트를 설치한 터미널로 돌아가서, 아래의 명령어를 입력합니다. 

npm install firebase

 
(3-2) .env / firebase.ts 생성하기
: .env 파일의 경우 src 안이 아닌, src 폴더 밖 즉, 루트에 위치시켜주시고, firebase.ts 파일의 경우 src 폴더 안에 생성해줍니다.
 
(3-3) .env / firebase.ts 내용 작성하기
: 인터넷 창으로 돌아가서, firebase에서 제공해준 firebase sdk의 값들을 복사해준 뒤, 아래의 변수명에 맞춰서 작성해줍니다.

• .env

VITE_FIREBASE_API_KEY=
VITE_FIREBASE_AUTH_DOMAIN=
VITE_FIREBASE_PROJECT_ID=
VITE_FIREBASE_STORAGE_BUCKET=
VITE_FIREBASE_MESSAGING_SENDER_ID=
VITE_FIREBASE_APP_ID=
VITE_FIREBASE_MEASUREMENT_ID=

: 위의 사진과 같이 해당 내용을 복사해서 .env 파일에 작성해줍니다.
 

• firebase.ts

import { initializeApp } from "firebase/app";
import { getAnalytics } from "firebase/analytics";

const firebaseConfig = {
  apiKey: import.meta.env.VITE_FIREBASE_API_KEY,
  authDomain: import.meta.env.VITE_FIREBASE_AUTH_DOMAIN,
  projectId: import.meta.env.VITE_FIREBASE_PROJECT_ID,
  storageBucket: import.meta.env.VITE_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: import.meta.env.VITE_FIREBASE_MESSAGING_SENDER_ID,
  appId: import.meta.env.VITE_FIREBASE_APP_ID,
  measurementId: import.meta.env.VITE_FIREBASE_MEASUREMENT_ID,
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);
export const analytics = getAnalytics(app);

: 위의 사진과 같이 해당 내용을 복사해서 firebase.ts 파일에 작성해줍니다.
 
(3-3) 만약 아래와 같이 firebase.ts 파일에서 env 속성을 참고할 수 없는 경우
: firebase.ts 파일의 위치가 src 폴더 안에 위치하고 있는지 확인합니다. 아래의 경우에는 잘못 위치하여 제가 마주했던 오류입니다.

 
 

3)  Firebase CLI 설치하기

: Firebase SDK를 설치해준 뒤에는 Firebase 계정과 프로젝트 연결을 진행해주어야 합니다. 아래의 단계를 밟아가시면 됩니다.
 
(1) firebase-tools 설치하기
: 아래의 명령어를 입력하여 firebase-tools를 설치해줍니다.

npm install -g firebase-tools

 
(2) firebase 로그인하기
: 아래의 명령어를 입력하여 firebase login을 진행합니다.

firebase login

 
: 기존 Firebase login을 진행한 적이 없을 경우, 해당 명령어를 입력하면 구글 로그인 모달로 접속하게 되고, 구글 계정 로그인을 진행하시면 됩니다.
 
하지만, 저처럼 이전에 로그인한 적이 있을 경우 'Already logged in as 이메일'이라고 뜨게 됩니다. 현재 저의 경우 다른 계정으로 firebase 프로젝트를 진행하게 되어서 만약 다른 계정으로 로그인해야 할 경우 아래의 흐름을 참고해주시면 됩니다.
 
(2-1) --reauth를 붙인 명령어를 다시 입력하기

firebase login --reauth

: 이 명령어를 입력하면, 아래의 사진과 같은 경로가 띄어진 뒤에 인터넷이 열리게 됩니다. 원하는 계정으로 연결이 되어 있지 않고, 다른 계정으로 연결되어 있을 경우, '허용'이 아닌, '취소'하기를 눌러줍니다. 현재 아래의 사진과 같이 보여지는 경로가 바로 열린 인터넷의 URL입니다.

 
그러면 아래 사진과 같이 'Oops!'라는 경고 페이지로 이동하게 됩니다.

 
(2-2) 2번 내용에 있는 링크 클릭하기
: 다시 VScode로 돌아오면, 아래의 사진과 같이 새로운 안내가 보여집니다. 여기서 2번 내용에 있는 링크로 접속해줍니다.

 
(2-3) 로그인하고자 하는 계정으로 로그인 진행하기
: 아래와 같이 계정을 선택해준 뒤, 액세스를 허용합니다.

 
(2-4) Sign in to the Firebase CLI
: 아래의 사진과 같이 'Yes, I just ran this command' 버튼을 눌러줍니다.

 
(여러 번 시도하면서 찍은 탓에) 현재 아래의 경우 세션 ID가 다르지만, 위에서 공유해준 세션 ID가 같은지 확인한 뒤, 'Yes, this is my session ID' 버튼을 눌러줍니다.

 
초록색으로 안내된 authorization code를 copy합니다.

 
(2-5) 복사한 코드를 붙여넣기
복사한 값을 터미널에 입력해주면, 아래의 사진과 같이 'Success'라는 문구와 함께 새로운 계정으로 로그인된 것을 보실 수 있습니다.

 
 

4) 호스팅 선택하기

: firebase CLI를 설치한 뒤에는 firebase Hosting를 설정해줍니다.
 
(1) firebase init

firebase init

: 위의 명령어를 입력합니다.
 
(2) Hosting 선택
: App Hosting이 아닌, Hosting을 선택해야 합니다. 키보드 위아래 방향키를 사용하여 이동한 뒤, 스페이스바를 눌러 선택하고, 엔터를 눌러 다음 단계로 넘어갑니다.

 
(3) Hosting Setup
: 세 가지 질문에 대해서는 아래와 같이 답하시면 됩니다.

• What do you want to use as your public directory? 공용 디렉토리로 무엇을 사용하시겠습니까?
  public 디렉토리 명을 build로 바꿔줍니다. (npm run build를 실행시킨 후 build/index.html을 바라보게 하기 위해서 입니다.)
• Configure as a single-page-app? 단일 페이지 앱으로 구성하시겠습니까?
  SPA로 개발할거기 때문에 yes를 선택합니다.
• Set up automatic builds and deploys with Github? Github을 사용하여 자동 빌드 및 배포를 설정합니까?
  당연히 yes를 선택합니다.

 
(4-1) Github 저장소
: 아래의 질문에 대해서는 아래와 같이 Github 저장소를 입력하시면 됩니다. 개인 repo의 경우 User/repostiory이며, 조직 repo의 경우 organization/repositoryd입니다.

• For which GitHub repository would you like to set up a GitHub workflow? (format: user/repository)
  GitHub 워크플로우를 설정하고자 하는 GitHub 저장소는 무엇입니까? (형식: user/repository)
  제 이름과 레포지토리명을 입력해줍니다. pangil5634/repository

(4-2) 만약 아래와 같이 에러가 발생할 경우
: 현재 해당 repository에 접근할 권한이 없음을 의미합니다. 따라서, 해당 URL에 접속해주어 아래의 사진과 같이 Grant를 부여해야 합니다.

 
(4-3) 권한이 부여되면 아래와 같이 보여지게 됩니다.

 
(5) Github WorkFlow 설정
:  네 가지 질문에 대해서는 아래와 같이 답하시면 됩니다. 이 과정을 통해 Firebase init이 완료됩니다.

• Set up the workflow to run a build script before every deploy?
  배포하기 전에 빌드 스크립트를 실행하도록 워크플로우를 설정하시겠습니까?
  당연히 yes를 선택합니다.
• What script should be run before every deploy?
  모든 배포 전에 실행해야 하는 스크립트는 무엇입니까?
  저는 npm을 사용하기 때문에 (npm ci && npm run build)를 입력해 주었습니다
  yarn을 쓰신다면 (yarn && yarn build)를 입력해주시면 됩니다.
• Set up automatic deployment to your site's live channel when a PR is merged?
  PR이 병합될 때 사이트의 라이브 채널에 자동 배포를 설정하시겠습니까?
  yes를 선택합니다.
• What is the name of the GitHub branch associated with your site's live channel?
  라이브 채널과 연결된 GitHub Branch의 이름은 무엇입니까?
  저는 main으로 설정했습니다. (develop으로 하시는분들도 많이보입니다)

 
(6) firebase deploy

firebase deploy

: 위의 명령어를 입력하여 배포를 진행합니다.

 
Hosting URL에 첨부된 링크로 접속해보면, 아래와 같이 기본 화면이 보여지게 됩니다. 이는 'Npm run build' 과정을 겪지 않았기에 반영되지 않은 상황입니다.

 
(7) build and deploy
: 따라서 빌드 과정을 거친 뒤에 배포를 진행해줍니다.

 
아래의 사진과 같이 성공적으로 배포된 것을 확인하실 수 있습니다.

 
 

5) Github Action CI/CD 작동 확인하기

: firebase init까지 마친 뒤에는 아래와 같은 단계를 거쳐서 Github Action의 CI/CD가 잘 작동되는지 확인합니다.
 
(1) 내용 변경 후 Push하기

 
(2) github repo -> Actions
: Actions 탭에 접속해보면 아래와 같이 ci/cd가 진행중인 것을 보실 수 있습니다.

 
(3) 결과 확인하기

 
 
 

| 결론

마무리를 지으려고 하니, 생각보다 내용이 길게 다가오셨을 수 있을 것 같습니다. 발생할 수 있는 오류나 어려움에 대해서도 기록하고, 사진을 첨부하다보니 내용이 길어졌던 것 같습니다.
 
CI/CD 구축하는 과정이 복잡하긴 하더라도, 이 과정을 통해서 더 편리한 개발을 진행하실 수 있다는 것은 보장합니다.