React(SPA) 애플리케이션을 Firebase Hosting으로 설계

며칠 전 Firebase를 처음 사용해 디자인할 기회가 생겼다.
기본적으로 가이드대로만 진행되지만 어렵기 때문에 먼저 절차를 적어 두세요.
이 글은 과거 Qita 및 개인 블로그에 기고한 글을 옮긴 것이다.

전제 조건

React 애플리케이션에서 처리

npm나yarn을 사용할 수 있는 환경(자기가 yarn을 사용하기 때문에 나중에 yarn으로 쓰기)

Firebase 측

새 등록 프로젝트 제작

액세스Firebase

사용 및 프로젝트 작성을 선택합니다.

프로젝트 작성

1 - 항목 이름 입력 + 사용 규약 검사 후 계속

2-Google Analythics 계속 사용 (※ 이번엔 유효하지만 임의)

3- 공동 Google Analythics 계정을 선택하거나 새로 만들기

시간이 좀 걸리겠지만 공사는 여기서 끝낼 거야.

응용 프로그램 추가

프로젝트 상단에서 추가할 응용 프로그램의 플랫폼에서 '웹 페이지' 를 선택하십시오

웹 응용 프로그램에 Firebase 추가

1 - 입력 애플리케이션의 닉네임 + Firebase Hosting 설정이 유효해지면'등록 애플리케이션'

예약된 URL에서 2-Firebase SDK를 사용하면 스크립트'다음'을 미리 제어(※ 예약된 URL에 대해서도 아래 Firebase-sdk 가져오기 참조)

3-Firebase CLI 설치 방법을 확인한 후 다음

4-Firebase Hosting 디버깅 방법 확인, 콘솔 액세스

이 Firebase 항목에 웹 페이지 응용프로그램이 추가되었습니다.

React 애플리케이션 측

기본적으로 Firebase 항목에서 응용 프로그램을 추가할 때 표시되는 절차를 따릅니다.

Firebase SDK 가져오기

Firebase SDK를 가져오는 방법으로 사용

예약된 URL의 정보를 읽고 사용하기

CDN으로 배포된 읽기

라이브러리로 설치 및 사용

Firebase SDK Snippet은 Firebase 프로젝트의'설정','설정 프로젝트'의 우리측에서 미리 확인할 수 있는 세 가지 방법입니다.
보완적으로 예약이 완료된 URL은 Firebase Hosting의 URL을 의미합니다.
그 URL 아래에 SDK와 응용 프로그램의 식별 정보를 설정한 파일은 그것을 읽고 SDK 형식을 사용합니다.
따라서 이 방법은 Firebase Hosting을 사용하여 호스팅하는 경우에만 사용할 수 있습니다.
주로 동일한 코드를 여러 Firebase Hosting으로 디버깅할 때 편리한 방법입니다.
나도 처음에는 예약된 URL을 사용하는 방법이었지만 $ yarn start에서 일반적인 로컬 서버에서 SDK를 읽을 수 없기 때문에 Warning이 나왔다.
나 이거 신경 안 써.$ firebase serve의 시뮬레이션에 따르면 예약이 끝난 URL을 통해 SDK를 사용할 수 있다.
다만, 이곳의 경우 건물 생성물 목록을 철저히 현지에 보관하는 내용이다.
따라서 디버깅 전 테스트에서 사용하는 것 같아 열중장 중 동작을 보면서 개발하는 용도에 적합하지 않다.
이번에는 프로그램 라이브러리 설치에 사용되는 방법으로 진행됐다.

라이브러리 설치

$ yarn add firebase

.env 작성

Firebase SDK Snippet의 Fabric을 통해 설정 값을 확인할 수 있습니다.

env의 예

# Firebase
REACT_APP_APP_KEY=※apikey
REACT_APP_AUTH_DOMAIN=※authDomain
REACT_APP_DATABASE_URL=※databaseURL
REACT_APP_PROJECT_ID=※projectId
REACT_APP_STORAGEBUCKET=※storageBucket
REACT_APP_MESSAGING_SENDER_ID=※messagingSenderId
REACT_APP_APP_ID=※appId
REACT_APP_MEASUREMENT_ID=※measurementId

Firebase SDK 초기화를 위한 파일 만들기

다양한 Firebase 기능을 사용하려면 먼저 초기화 처리가 필요합니다.
따라서 초기화할 파일을 미리 준비하고 기능을 사용할 때는 import을 사용해야 한다.
예제
libs/Firebase.js

import firebase from 'firebase/app';
import 'firebase/analytics';

const config = {
  apiKey: process.env.REACT_APP_APP_KEY,
  authDomain: process.env.REACT_APP_AUTH_DOMAIN,
  databaseURL: process.env.REACT_APP_DATABASE_URL,
  projectId: process.env.REACT_APP_PROJECT_ID,
  storageBucket: process.env.REACT_APP_STORAGEBUCKET,
  messagingSenderId: process.env.REACT_APP_MESSAGING_SENDER_ID,
  appId: process.env.REACT_APP_APP_ID,
  measurementId: process.env.REACT_APP_MEASUREMENT_ID,
};

firebase.initializeApp(config);

export default firebase;

Google Analytics에 데이터 보내기 설정 추가

자신의 상황은 index다.js에 보충했습니다.
처음에는 SDK에 가입하면 자동으로 데이터를 보낼 수 있을 거라고 생각했는데 꼭 해야 할 것 같다firebase.analytics().
다음 내용은 ReactDOM.render에 보충한다.
index.js

import firebase from './libs/Firebase';

// 本番環境のみ計測
if (process.env.NODE_ENV === 'production') {
  firebase.analytics();
}
.
.
.

Firebase 프로젝트의 애플리케이션과 협력

Firebase CLI 가져오기

$ yarn global add firebase-tools

이렇게 하면 Firebase 명령을 사용할 수 있습니다.

Firebase에 로그인

Docker 노드의 경우js 환경을 사용하는 경우 OAuth 인증9005 포트를 사용하기 때문에 미리 엽니다.

$ firebase login

Firebase optionally collects CLI usage and error reporting information to help improve our products. Data is collected in accordance with Google's privacy policy (https://policies.google.com/privacy) and is not used to identify you.

? Allow Firebase to collect CLI usage and error reporting information? (Y/n)

Firebase는 CLI 사용 현황 및 버그 보고 정보를 수집하여 제품 개선에 도움이 되는 옵션입니다.데이터는 Google의 개인 정보 보호 정책 https://policies.google.com/privacy 에 따라 수집되며 사용자별로 사용되지 않습니다.
Firebase에서 CLI 사용 현황 및 버그 보고 정보를 수집할 수 있습니까?(예/아니오)
임의로 대답하다.

To change your data collection preference at any time, run `firebase logout` and log in again.

데이터 수집 설정을 수시로 변경하려면 firebase logout 를 실행하고 다시 로그인하십시오.

Visit this URL on this device to log in:
https://accounts.google.com/o/oauth2/auth?XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Waiting for authentication...

인증을 위한 URL이 표시되므로 브라우저에서 액세스할 수 있습니다(Docker를 사용하지 않으면 브라우저가 자동으로 열릴 수 있습니다).
컨텐츠 확인 후 허용

✔  Success! Logged in as [email protected]

인증이 제대로 이루어지면 CLI 측면에 표시됩니다.
또한 브라우저 측면에는 다음과 같은 내용이 표시됩니다.

공동 작업, 초기화 처리

$ firebase init

? Which Firebase CLI features do you want to set up for this folder? Press Space to select features, then Enter to confirm your choices. (Press <space> to select, <a> to toggle all, <i> to invert selection)
❯◯ Database: Deploy Firebase Realtime Database Rules
 ◯ Firestore: Deploy rules and create indexes for Firestore
 ◯ Functions: Configure and deploy Cloud Functions
 ◯ Hosting: Configure and deploy Firebase Hosting sites
 ◯ Storage: Deploy Cloud Storage security rules
 ◯ Emulators: Set up local emulators for Firebase features

이 폴더에 설정된 Firebase CLI 기능은 무엇입니까?공백을 눌러 기능을 선택하고 Enter 를 눌러 선택을 확인합니다.(공백으로 선택하고, a로 모두 전환하고, i로 반전 선택)
이번에는 Hosting만 선택한다.

First, let's associate this project directory with a Firebase project.
You can create multiple project aliases by running firebase use --add,
but for now we'll just set up a default project.

? Please select an option: (Use arrow keys)
❯ Use an existing project
  Create a new project
  Add Firebase to an existing Google Cloud Platform project
  Don't set up a default project

먼저 이 프로젝트 디렉토리를 Firebase 프로젝트와 연관시킵니다.
여러 항목의 별명을 만들려면 Firebaseuse-add를 사용하십시오
그러나 여기서 기본 항목을 설정합니다.
이번에 Firebase 프로젝트를 제작했기 때문에 선택했다Use an existing project.

? Select a default Firebase project for this directory: (Use arrow keys)
❯ project-name (project-name)

이 디렉토리의 기본 Firebase 프로젝트를 선택합니다. (화살표 키 사용)
협력할 항목을 선택합니다.

Your public directory is the folder (relative to your project directory) that
will contain Hosting assets to be uploaded with firebase deploy. If you
have a build process for your assets, use your build's output directory.

? What do you want to use as your public directory? (public)

공통 디렉토리는 프로젝트 디렉토리를 기준으로 하는 폴더입니다.
Firebase deploy에 포함된 술 접대 자산.하면, 만약, 만약...
자산의 구축 과정이 존재하면 구축된 출력 목록을 사용하십시오.$ yarn build에서 생성된 산물은 /build에서 생성되었기 때문에 입력build.

? Configure as a single-page app (rewrite all urls to /index.html)? (y/N)

SPA 애플리케이션으로 구성됩니까(모든 URL을/index.로 변경)?(예/아니오)
이번에는 SPA이므로 y를 입력합니다.

✔  Wrote build/index.html

i  Writing configuration info to firebase.json...
i  Writing project information to .firebaserc...

✔  Firebase initialization complete!

이렇게 하면 설정 파일을 만들고 협업을 완성합니다.

Firebase Hosting으로 설계

제품을 작성하여 설계합니다.

$ yarn build

# 全ての Firebase サービスリソースをデプロイ
$ firebase deploy
or
# Hosting のリソースのみデプロイ + コメント
$ firebase deploy --only hosting -m "※任意のコメント"

※ 2021/09/05 보충
디버그에 주석을 달면 Firebase Hosting의 depro 이력서에도 나와 이해하기 쉽다.

=== Deploying to 'project-name'...

i  deploying hosting
i  hosting[project-name]: beginning deploy...
i  hosting[project-name]: found 19 files in build
✔  hosting[project-name]: file upload complete
i  hosting[project-name]: finalizing version...
✔  hosting[project-name]: version finalized
i  hosting[project-name]: releasing new version...
✔  hosting[project-name]: release complete

✔  Deploy complete!

Project Console: https://console.firebase.google.com/project/project-name/overview
Hosting URL: https://project-name.web.app

표시된 호스트 URL에 접근하여 적용된 내용이 잘 표시되면 디버깅이 순조롭게 완료됩니다.

무료·GiitHub Actions 자동 설계

※ 2021/09/05 보충

CI용 토큰 가져오기

Firebase CLI를 사용하기 위해서는 브라우저에 로그인해야 하지만 CI 환경에서도 그럴 수 없기 때문에 토큰을 사용하는 방법을 제공했다.
먼저 로컬에서 다음 명령을 실행하여 로그인하여 CI 환경에 대한 토큰을 받습니다.

$ firebase login:ci

이후 Firebase CLI를 사용할 때 이 토큰을 선택하여 전달하면 됩니다.
GiitHub SecretsFIREBASE_TOKEN에 로그인한 후 다시 사용합니다.

구축

※Node.이 글은 js 설정과 프로그램 라이브러리 설치 절차를 생략합니다.
이번에Firebase 응용 프로그램의 정보는 환경 변수로 관리되기 때문에 CI 환경에서도 환경 변수를 설정했다.
GiitHub Secrets에 미리 등록하여 값을 설정한 예입니다.

# ビルド
- name: Build
  env:
    REACT_APP_APP_KEY: ${{ secrets.REACT_APP_APP_KEY }}
    REACT_APP_AUTH_DOMAIN: ${{ secrets.REACT_APP_AUTH_DOMAIN }}
    REACT_APP_DATABASE_URL: ${{ secrets.REACT_APP_DATABASE_URL }}
    REACT_APP_PROJECT_ID: ${{ secrets.REACT_APP_PROJECT_ID }}
    REACT_APP_STORAGEBUCKET: ${{ secrets.REACT_APP_STORAGEBUCKET }}
    REACT_APP_MESSAGING_SENDER_ID: ${{ secrets.REACT_APP_MESSAGING_SENDER_ID }}
    REACT_APP_APP_ID: ${{ secrets.REACT_APP_APP_ID }}
    REACT_APP_MEASUREMENT_ID: ${{ secrets.REACT_APP_MEASUREMENT_ID }}
  run: yarn build

프로그램 설계

Firebase CLI를 사용할 수 있는 동작이 있으므로 이 기능을 사용하여 쉽게 설계할 수 있습니다.
https://github.com/w9jds/firebase-action

- name: Deploy to Firebase Hosting
  uses: w9jds/firebase-[email protected]
  with:
    args: deploy --only hosting -m \"${{ github.event.head_commit.message }}\"
  env:
    FIREBASE_TOKEN: ${{ secrets.FIREBASE_TOKEN }}

2021/09/05의 최종 버전은 2011/11/09로 조금 신경 쓰이지만 최근 제출한 이력이 있어 이 동작을 소개했다.
Firebase를 처음 사용해서 생각보다 심플하게 디자인할 수 있어서 너무 좋아요.
리액트 성격과도 잘 맞는 것 같고 다른 기능도 사용하고 싶어요.
가능성이 커졌네요!

참조 링크 요약

stack overflow - Google analytics on my React app with firebase SDK

docker로 Firebase 노트 해봤어요.