Firebase로 프로젝트 배포하기

https://firebase.google.com/?hl=ko&gclid=CjwKCAjwquWVBhBrEiwAt1KmwqeeO0K9y1fW7fUkjnXFKQDGtMiHhVxEyKU0q0aBc0-nNwwdUyCOUxoCQmYQAvD_BwE&gclsrc=aw.ds 

Firebase

프로젝트 만들기를 한다.

 

프로젝트를 만들고 나면 이런 페이지가 나온다.

그리고 빌드 -> hosting -> 시작

npm install -g firebase-tools

이 명령어를 입력한다.

 

firebase login

vsc 터미널에 이 명령어를 입력한다.

그러고 구글 아이디로 로그인하면 성공 메시지가 나온다.

 

firebase init

명령어 입력한다.

 

다 진행하고 도메인을 만들어줬다. 그리고 firebase.json에

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

site를 넣어준다. 그리고 빌드를 다시하고 배포를 한다.

 

npm run build

firebase depoly

이렇게 2개의 명령어를 입력한다.

 

이렇게 완료가 되면 배포가 된다.

---

Open Graph

-public/index.html

<!-- 썸네일 -->
    <meta property="og:image" content="%PUBLIC_URL%/thumbnail.png" />
    <!-- 사이트 이름 -->
    <meta property="og:site_name" content="감정 일기장" />
    <!-- 카카오톡 공유했을 때 나오는 글 -->
    <meta property="og:description" content="나만의 감정 일기장"

이렇게 적용하면 된다.

 

하지만 카카오톡에서는 바로 적용이 안될 수 있다.

https://developers.kakao.com/

Kakao Developers

도구 -> 초기화 도구

여기에 URL을 입력해서 초기화하면 반영이된다.

 

https://5hyun-emotion-diary.web.app/

감성 일기장

이렇게 사이트 완성이된다.