firebase 사용후기

byungju0624·2021년 1월 12일
0
post-thumbnail

많은 회사에서 AWS를 쓰지만 쓰기가 확실히 어렵다 배포하는 단계도 그렇고 딱딱 맞아떨어지지 않는다. 이것은 나의 내공이 부족하기 때문이겠지...
그래서 우리 팀의 팀장님은 firebase를 쓰자고 했다. 써보니 확실이 AWS보다 접근성이 좋은거 같다.

호스팅을 진행하기 앞서 firebase.js파일을 만들고 안에 아래와 같은 코드를 입력한다.

import firebase from "firebase/app";
import "firebase/firestore";
const firebaseConfig = {
    // firebase 설정과 관련된 개인 정보
};
// firebaseConfig 정보로 firebase 시작
firebase.initializeApp(firebaseConfig);
// firebase의 firestore 인스턴스를 변수에 저장
const firestore = firebase.firestore();
// 필요한 곳에서 사용할 수 있도록 내보내기
export { firestore };

그다음 프로젝트 설정에 들어가서 보면되는데 처음에 찾기가 어려울수 있다. 프로젝트를 들어가면 아래와 같이 나사 모양이 있다. 나사모양을 클릭하고 들어가면

아래와 같은 부분이 있는데 좀 내리다 보면 보일것이다. 저기서 자동으로 돼 있을텐데 CDN으로 클릭해주면 firebase.js에 들어갈 내용들이 있을것이다. 그내용들을 삽입하면 준비끝!(내용을 보여줄수 없는 이유는 개인정보이기 때문이다. 괜히 어디 깃이나 블로그에 올렸다가 털릴수 있으니 조심바란다.)

그리고 호스팅에서 시작하기 한다음에 하라는 대로 쭉 진행하면 된다.
그리고 진행을 다하고 배포까지 완료가 되서 딱 홈페이지를 눌러보면 짜란하고 나올거같지만 아니다....빈 페이지가 나올 가능성이 크다. 그이유는 우리가 하나 빼먹은게 있기 때문이다. 처음하면 아래의 public에 build가 아니고 public이라고 돼 있는데 build로 바꾸고 npm run build를 진행하고 firebase deploy를 진행하면 될것이다.

{
  "hosting": {
    "public": "build",
    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

위와같이 다했으면 홈페이지는 나타나게 될 것이다.
시행착오를 많이 거치면서 작성했기 때문에 안되면 나도 어쩔수가 없다. 다른 블로그를 찾길 바란다...
오늘은 여기까지
다음에 계속!!

0개의 댓글