1. Google Firebase 무료 계정
2. React 및 Redux에 대한 좋은 이해

React Redux 앱을 작성하는 데 시간을 소비하지 않고 미리 준비된 redux-scaffold-project를 공유하겠습니다 . 여기 github 저장소에서 사본을 가져 오십시오 . 응용 프로그램을 테스트하려면 프로젝트 Readme에 기록 된 설치 단계를 따르십시오 .

이 프로젝트에는 3 개의 경로가 있습니다. 인증 상태 및 할일은 Redux Store에 저장됩니다.
1. 로그인
2. 정보
3. 홈 (보호됨)
이 프로젝트를 만드는 동안 표준 관행을 따랐으므로 모든 프로젝트의 시작으로 자유롭게 사용하십시오 :)

Firebase 프로젝트 설정

Firebase에서 먼저 프로젝트를 만든 다음 그 안에 애플리케이션을 만듭니다. 하나의 프로젝트 내에 여러 응용 프로그램이있을 수 있습니다. 많은 Firebase 서비스에는 취미 개발자를위한 멋진 무료 요금제가 있습니다. 사용자 친화적이며 Firebase로 작업하기 위해 DevOps 사람이 아니어도됩니다.

프로젝트를 생성하려면 로그인 한 후 Firebase 콘솔 을 엽니 다 . 이전에 프로젝트를 생성하지 않은 경우 아래와 같이 표시됩니다. 프로젝트 만들기 버튼을 클릭 합니다.

다음으로 프로젝트 이름과 Firebase Analytics를 활성화할지 묻는 메시지가 표시됩니다. 구체적인 내용을 유지하기 위해이 기능을 사용 중지했지만 자유롭게 시도해보세요. 실시간 청중, 위치 기반 청중, 방문자 연령 그룹 및 더 많은 통계를 제공합니다. 아래는 firbease 프로젝트를 만들기위한 스크린 샷입니다 (왼쪽에서 오른쪽으로)

Firebase 호스팅

Firebase 호스팅은 매우 간단합니다. 몇 번 연습하면 프로젝트 배포에 2 분 이상 걸리지 않습니다 ! 프로젝트를 SSD에 캐시하고 전 세계에 배포하여 사용자가 사이트에 빠르게 액세스 할 수 있도록합니다. 또한 무료 SSL 인증서를 제공 하므로 사이트가 항상 안전합니다.

프로젝트 개요 아래의 왼쪽 사이드 바에서 호스팅을 선택한 다음 오른쪽 헤더에서 시작하기 버튼을 클릭합니다. 아래 스크린 샷을 참조하십시오.

하단의 비디오를 시청하고 함께 제공 한 링크를 통해 이동하는 것이 좋습니다.

Vscode에서 React Redux 프로젝트 의 루트 디렉토리를 열고 통합 터미널을 시작합니다 ( View> Terminal ).

1. Vscode의 통합 터미널에서 아래 명령을 실행 하여 npm 을 통해 Firebase CLI 를 설치합니다 . (건너 뛰기 전에 해본 적이 있다면)

npm install -g firebase-tools

firebase login

2. 기본 브라우저에서 "Google 계정 로그인"웹 페이지가 열립니다.
3. Firebase에 연결된 Gmail 계정을 선택하세요. 그런 다음 'Firebase CLI가 Google 계정에 액세스하려고합니다' 라고 표시되면 허용을 클릭 합니다 .
4. 마지막으로 'Firebase CLI 로그인 성공'이라는 확인 메시지가 표시됩니다 . ( 지금이 웹 페이지를 닫을 수 있습니다)

firebase init

• 그런 다음 프로젝트 설정 을 요청해야합니다 . 첫 번째 옵션 기존 프로젝트 사용을 선택합니다 . ( Enter 키 누르기 )
• 모든 Firebase 프로젝트 목록을 가져오고 Firebase 프로젝트 설정 중에 만든 프로젝트를 선택합니다 (그림 3).
• 이제를 입력해야합니다 공개 디렉토리의 이름을 입력합니다 빌드 & 눌러 입력
• 중요 : 다음으로 반응 프로젝트를 단일 페이지 앱으로 구성할지 묻는 메시지가 표시됩니다. 예 (Y를 입력하고 Enter를 누름)
• GitHub로 자동 빌드 및 배포를 설정 하시겠습니까? 지금은 필요하지 않습니다 (N & Enter 키 입력)이 Firebase 초기화가 완료되었습니다!


위의 단계를 완료하면 프로젝트 루트에 2 개의 파일이 추가됩니다.
1. firebase.json는 모든 호스팅 속성이 포함
2. .firebaserc이 프로젝트 ID를 포함합니다.
필요한 경우이를 프로젝트 github 저장소에 커밋 할 수 있습니다.

배포 스크립트 추가

지금은 통합 터미널을 안전하게 닫고 Firebase 콘솔에서 'Continue to console'버튼을 클릭하여 Firebase 호스팅 설정 대화 상자를 닫을 수도 있습니다 . (그림 4에서 시작하기를 클릭했을 때 나타납니다.)



Vscode의 프로젝트 내에서 package.json을 열고 scripts 속성 아래 에 배포 스크립트를 추가 합니다. (넣어하는 것을 잊지 마세요 , 배출 스크립트의 끝에서)

"scripts": {
  "start": "react-scripts start",
  "build": "react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject",
  "deploy": "npm run build && firebase deploy --only hosting"
},

엔진을 시작하십시오!



터미널에서 아래 명령을 실행하면 프로젝트가 2 분 이내에 Firebase 호스팅 플랫폼에 배포됩니다.

npm run deploy

       

        Fig 7 : Deploying Project to Firebase Hosting
       

https://<project-id>.web.app



발문

Delta Auth 는이 프로젝트 및 기사와 관련된 가상의 이름입니다. 데모 용으로 만 사용됩니다. 타사 엔터티와의 유사성은 순전히 우연의 일치입니다.

나는 Docker & Next Js를 배우고 있는데, 아마도 다음에 그것에 대해 뭔가를 쓸 것입니다. 이 기사가 마음에 드 셨다면 박수를 남겨주세요. 아래 댓글란에 의심을 남겨주세요. 다음에 뵙겠습니다!