서버를 빌려 PHP로 거의 실행하지 않은 사용자의 기존 서비스를Firebase+React로 옮긴다.Firebase의 시작 방법에 대한 기사는 많은 사람들이 썼고 저도 정리해 봤습니다.

가져오기 도구

이번에 사용create-react-app.React는 환경을 만드는 것만으로도 힘들고, 그렇지 않으면 낙담한다.firebase-tools는 운영 체제 등 Firebase에 필요합니다.기본적으로 전 세계 설치package.json에 기재되지 않고 의존 관계가 불분명하기 때문에 피해야 하지만 이 두 가지는 그렇지 않기 때문에 전 세계에 설치하는 것이 비교적 편리하다.

$ npm install -g create-react-app
$ npm install -g firebase-tools

create-react-app 및 시작 확인

create-react-app YOUR_APP_NAMEReact 응용 프로그램의 템플릿을 제작한다.이번에 myapp라는 이름을 지었다.시간이 좀 걸리니까 기다리자.앱 이름이 대문자로 쓰면 욕먹을 거야.

$ create-react-app myapp

완성 후 npm run start해 보면 브라우저가 자동으로 시작되고localhost:3000 프로그램이 시작됩니다.초보자가 직접 React를 구축하고 환경을 구축하는 것은 이 정도까지는 어려울 것 같다create-react-app면 5분도 안 돼서 완성할 수 있다.

Firebase 프로젝트 준비

콘솔에 항목을 추가하고 이름과 국가를 선택합니다.Google 계정이 필요합니다.프로젝트 ID는 글로벌 고유해야 하며 이 항목을 추가할 때만 변경할 수 있습니다.

프로젝트를 만들면 프로젝트 개요의 화면으로 이동합니다.

Firebase 항목에 대한 React 애플리케이션 링크

Firebase에 로그인합니다.firebase login 명령을 통해 인증 화면을 열고 Firebase 프로젝트를 만든 Google 계정을 사용하여 인증합니다.

$ firebase login

응용 프로그램의 루트 디렉토리로 이동한 후 firebase init 명령을 입력합니다.

$ firebase init

처음 묻는다Which Firebase CLI features do you want to setup for this folder?.Firebase 기능 중 이 앱을 사용하고자 하는 것에 대한 질문입니다.일단 다 확인해 보고

다음은 기존 Firebase 항목과 애플리케이션이 연관된 항목에 대한 질문입니다.하나의 응용 프로그램은 여러 항목과 연결할 수 있습니다. 예를 들어 디버깅과 정식 작업에 사용되며, 여기서 기본 항목을 선택하십시오.방금 만든 myapp 을 연결합니다.방금의 검사에 의하면 이후에도 질문이 꼬리를 물고 있을 테니 좋은 느낌으로 바꾸자.

What file should be used for Database Rules?
기본값=>데이터베이스입니다.rules.json

What file should be used for Firestore Rules?
기본값=>firestorerules

What file should be used for Firestore indexes?
기본값=>firestoreindexes.json

What language would you like to use to write Cloud Functions?

JavaScript/TypeScript

Do you want to use ESLint to catch probable bugs and enforce style? (Y/n)

ESLin에 적극 가입하세요

Do you want to install dependencies with npm now? (Y/n)

아무거나 가능하지만 여기에 의존관계를 설치하지 않으면 빌딩 앞에서 진행

What do you want to use as your public directory?

기본 = public

npm run build시 build 디렉터리에 구축 결과가 있기 때문에 지정build

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

React를 사용하기 때문에 SPA

로 설정

What file should be used for Storage Rules?
기본값=>stoage입니다.rules

모든 질문에 답한 후 먼저 확인firebase.json.firebase init 명령의 설정 항목은 이 파일을 통해 다시 쓸 수 있습니다.

{
  "database": {
    "rules": "database.rules.json"
  },
  "firestore": {
    "rules": "firestore.rules",
    "indexes": "firestore.indexes.json"
  },
  "functions": {
    "predeploy": [
      "npm --prefix \"$RESOURCE_DIR\" run lint"
    ]
  },
  "hosting": {
    "public": "build",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  },
  "storage": {
    "rules": "storage.rules"
  }
}

응용 프로그램 만들기

npm run build 응용 프로그램을 만듭니다.firebase init때 npm install없으면 건물 앞에서 해요.구축이 끝난 후build 디렉터리에 여러 가지 파일이 있는지 확인합니다.원본 파일을 특별히 수정하지 않으면 구축 오류가 발생하지 않습니다.

Firebase에 대한 디자인

firebase.json 에서 build 디렉터리를 디버깅하도록 설정했습니다.이 상태firebase deploy에서 명령을 입력하면 삭제됩니다.그러나 5대 기능을 모두 검사했다면firebase deploy 명령에서hosting을 제외한 기능도 설계돼 오류가 발생할 수 있다.나중에 hosting 이외의 내용을 고려하고 어쨌든 build 목록의 내용을 먼저 공개합시다.hosting만 디자인할 때firebase deploy --only hosting입니다.

$ firebase deploy --only hosting

성공하면 Hosting URL이 표시됩니다.간단하네.

총결산

서비스 이전은 조금씩 접촉하기 시작하지만Firebase만 있으면 웹 애플리케이션은 곤란함을 느끼지 않는다.아래에 열거한 것 이외에 방문 해석 등의 기능을 제공하여 충분히 사용할 수 있다면 개발이 매우 수월할 것이다.Google 계정 및 노드js 활동 환경만 있으면 사용할 수 있고 매우 간단하며 충분한 무료 서류도 준비한 것도 매력이다.CircleaCI와 Jest를 결합하여 테스트와 디자인이 더욱 간단하고 폭발 속도로 개발되기를 희망합니다.

Authentication: 메일/비밀번호, 전화번호, Google, 트위터, 페이스북 등 로그인 방법을 간단하게 설정할 수 있음

Database: 클라우드와 실시간으로 밀리초 단위로 동기화되는 NosQL 데이터베이스

Storage: 이미지와 사운드 모두 간단하게 파일을 저장할 수 있음

Hosting:React 같은 SPA

를 보낼 수도 있습니다.

Function: 실행 가능한 백엔드 코드