이번 포스트에서는 Firebase를 이용해 나만의 소셜 미디어 서비스를 구현하여 실제 웹사이트로 배포하는 과정까지를 다루어보겠습니다.
완성 결과 미리보기
먼저 완성한 결과부터 gif 파일로 확인해 봅시다.
실제 도메인이 등록되어 있는, 어디서나 접속 가능한 웹 페이지입니다.
메인 페이지 살펴보기, 피드 읽고 사진 확대하기
회원가입하기 (계정 생성하기)
새로운 글 작성하고 이미지 첨부하기, 작성한 글 삭제하기
프로필 사진 수정하기, 닉네임 수정하기, 수정 후 새로운 글 작성하기
Firebase
Firebase는 구글에서 제공하는 데이터베이스 서비스입니다.
DB에 접근하고 데이터를 관리하기 위한 다양한 함수들을 간편하게 제공하기 때문에 코드를 쉽게 구현할 수 있다는 장점이 있습니다.
또한, 일정 데이터 사용량과 DB 용량까지는 무료로 사용할 수 있다는 것과 실제 웹사이트 주소로 간편하게 배포할 수 있다는 것도 매우 큰 장점이라고 생각합니다.
Firebase 프로젝트 생성 및 설정
가장 먼저 Firebase 사이트로 접속해줍니다.
https://console.firebase.google.com/?hl=ko
'프로젝트 만들기'를 눌러줍니다.
프로젝트 이름을 정해 주세요.
프로젝트 이름은 나중에 호스팅 서비스를 이용해서 웹사이트 링크가 생성될 때 이름이 그대로 사용되니, 신중하게 결정해줍니다.
저는 가능한 짧고 이해하기 쉬운 프로젝트 이름을 추천합니다.
저는 yeohj0710x로 하겠습니다.
다음으로 Firebase Google 애널리틱스를 사용할 거냐고 묻는데, 저는 사용하지 않겠습니다.
그럼 이렇게 Firebase 프로젝트가 생성됩니다.
생성하는 데 시간이 걸리니 잠시 기다려주세요.
프로젝트가 생성되면 메인 화면으로 이동되는데, 우리는 웹사이트를 만들 것이니 웹을 클릭해 줍니다.
앱 닉네임을 설정하고, Firebase 호스팅을 체크해 줍니다. 웹사이트의 실제 배포를 위해 필요합니다.
이제 '앱 등록'을 눌러줍니다.
다음으로 'npm install firebase'를 이용해 프로젝트에 firebase를 설치해 줍니다.
프로젝트를 생성하지 않았으면 새로 생성하고, 터미널에서 위 명령어를 입력해 주세요.
이제 이런 절차를 거치라는 내용이 나올 건데, firebase.ts라는 파일을 만들어 다음과 같이 작성합니다.
// firebase.ts
import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";
import { getFirestore } from "firebase/firestore";
import { getStorage } from "firebase/storage";
const firebaseConfig = {
apiKey: "AIzaSyA9CrbgL6FmJIUYy4CL7Ps3NIEelnMASjE",
authDomain: "yeohj0710x.firebaseapp.com",
projectId: "yeohj0710x",
storageBucket: "yeohj0710x.appspot.com",
messagingSenderId: "1070119465029",
appId: "1:1070119465029:web:c21ac2cbe88da79c5e732c",
};
const app = initializeApp(firebaseConfig);
export const auth = getAuth(app);
export const storage = getStorage(app);
export const db = getFirestore(app);
위의 firebaseConfig 자리에, Google Firebase에서 제공되는 코드를 붙여넣으면 됩니다.
이제 다음의 명령어를 이용해 Firebase CLI를 설치합니다.
npm install -g firebase-tools
먼저 firebase login을 수행해 줍니다.
로그인 창이 뜨면 현재 구글 Firebase에 로그인 중인 계정으로 로그인해 주세요.
'firebase init'과 'firebase deploy'는 프로젝트의 코드를 완성한 이후에 수행할 것입니다.
이제 다시 Firebase 웹 페이지로 돌아와서, Authentication을 눌러줍니다.
'시작하기'를 눌러주세요.
이제 로그인 방법을 추가하면 되는데, '이메일/비밀번호'가 가장 간편합니다.
저의 경우에는 Github도 추가하였습니다.
이번에는 탭 왼쪽에서, 빌드 > 'Firestore Database'를 선택해 주세요.
Firestore는 데이터베이스 테이블들이 저장될 공간입니다.
마찬가지로 '데이터베이스 만들기'를 눌러줘야 시작할 수 있습니다.
이제 다음의 절차를 따라주세요.
1. 데이터베이스 ID는 (default)로 자동 설정되니 넘어가면 되고, DB 위치는 가장 가까운 'asia-noretheast3 (Seoul)'로 해 줍시다.
2. 다음으로 보안 규칙은 일단 '테스트 모드'로 설정해 줍니다. 나중에 바꿀 수 있습니다.
3. '만들기'를 누르고 기다려주세요.
생성이 완료되었으면 Cloud Firestore의 '규칙' 탭으로 이동합니다.
이제 다음과 같이 작성해 주세요. 이 코드는 나중에 알맞게 수정하면 됩니다.
rules_version = '2';
service cloud.firestore {
match /databases/{database}/documents {
match /tweets/{doc} {
allow read: if true
allow create: if request.auth != null
allow delete, update: if request.auth.uid == resource.data.userId
}
}
}
이번에는 '색인'으로 이동합니다.
'색인 추가'를 누르고, 다음과 같이 작성해 주세요.
이건 저의 프로젝트에만 적용되는 내용인데, 임시적으로 생성하고 나중에 바꾸면 됩니다.
아래로 내려서 쿼리 범위는 '컬렉션'을 선택하고 '색인 만들기'를 클릭합니다.
색인이 생성되는 데에는 시간이 조금 걸립니다. 기다려 주세요.
이번에는 좌측 탭에서 'Storage'로 이동해 주세요.
Storage는 이미지와 같은 용량이 큰 데이터들이 저장될 공간입니다.
마찬가지로 '시작하기'를 누르고, '테스트 모드에서 시작' 버튼을 눌러주세요.
지역은 자동으로 설정될 겁니다.
'완료'를 누르고 버킷이 생성될 때까지 기다려줍니다.
생성이 완료되었으면, 폴더를 추가하는 버튼을 눌러서 'avatars'와 'tweets' 2개의 폴더를 만들어주세요.
이 역시 저의 프로젝트에만 해당되는 내용이지만, 나중에 알맞게 수정하면 됩니다.
이제 마찬가지로 '규칙' 탭으로 이동해서 다음과 같이 코드를 작성합니다.
rules_version = '2';
service firebase.storage {
match /b/{bucket}/o {
match /{allPaths=**} {
allow read: if true // request.auth != null
allow write: if request.auth != null && request.resource.size < 10 * 1024 * 1024
}
}
}
'게시'를 누르고 기다려줍니다.
이제 마지막으로 좌측 탭의 '빌드'를 누르고 'Hosting'으로 들어갑니다.
우리는 아까 firebase tools를 설치했기 때문에, '다음'과 '콘솔로 이동'을 눌러서 일단 이동해줍니다.
프로젝트 코드 작성
이제 프로젝트 코드를 작성해 주면 됩니다.
Firebase 공식 문서를 참조하면, Firebase의 다양한 함수들과 사용 방법이 제시되어 있으니 이를 활용할 수 있습니다.
제가 작성한 프로젝트의 코드는 다음과 같습니다.
전체적인 프로젝트 코드는 노마드코더의 '트위터 클론코딩' 코스를 통해 학습하면서 작성했고, 그 이후로 필요한 기능들은 스스로 코딩하여 추가하였습니다!
GitHub - yeohj0710/Firebase-social-media-app: YHJ 𝕏 - Social media platform implemented using Firebase
YHJ 𝕏 - Social media platform implemented using Firebase - yeohj0710/Firebase-social-media-app
github.com
프로젝트의 전체적인 구조는 위와 같습니다.
스크립트 역시 위와 같이 작성하여 배포 명령어까지 완성하였으면, 이제 실제 웹사이트로의 배포 준비가 끝났습니다.
실제 웹사이트로 배포하기
이제 코드를 작성한 프로젝트를 실제 웹사이트로 배포해 봅시다.
아까 firebase login까지만 진행하고, init과 deploy는 진행하지 않았었는데요, 그 과정을 지금 수행할 겁니다.
가장 먼저 다음의 명령어를 통해 firebase 프로젝트 설정을 콘솔에서 진행하겠습니다.
firebase init
그럼 firebase에서 콘솔을 통해 몇 가지 질문을 할 텐데, 프로젝트에 알맞은 설정을 해주면 됩니다.
첫 번째 질문에는 'Yes'로 답해 줍니다.
다음으로 프로젝트 설정에서는, 'Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys'을 선택해 줍니다.
만약 여기서 에러가 발생하는 경우, 다른 계정으로 firebase login이 수행된 상태거나, 또는 다른 프로젝트로 접근이 설정되어 있을 수 있습니다.
다른 계정으로 로그인 되어있는 경우 firebase logout을 입력해 로그아웃을 해 준 이후, 다시 firebase login을 통해 로그인을 해 주면 됩니다.
다른 프로젝트로 접근이 설정되어있는 경우에는 'firebase use (프로젝트명)'으로 접근할 프로젝트를 변경해 줄 수 있으니 에러가 발생할 경우 시도해 보면 됩니다.
'What do you want to use as your public directory?'라는 질문에는 'dist'라고 입력해 줍니다.
왜냐하면, build 명령어를 수행했을 때 dist/ 디렉토리에 파일들이 빌드되기 때문입니다.
'single-page app?' 관련 질문에는 'y'로 답해 줍니다.
'automatic builds & deploys with Github?' 관련 질문에는 'N'으로 답해 줍니다.
이제 모든 설정이 끝났고, 진짜로 배포만 남았습니다!
다음의 명령어를 입력하여 배포를 시작해 줍니다.
npm run deploy
잠시 기다린 후 위와 같이 호스팅 주소가 나타나면 배포에 성공한 것입니다.
그럼 링크로 접속해 봅시다.
참고로 firebase에서 같은 프로젝트에 제공하는 도메인은 2가지입니다.
1. (도메인 이름).web.app
2. (도메인 이름).firebaseapp.com
여기서 팁~
첫 번째 주소는 도메인이 짧다는 장점이 있지만, 가끔 새로 deploy 했을 때 바로 반영이 안되는 현상이 있습니다.
따라서 내가 배포 후 업데이트된 사항이 반영되었는지 바로 체크하고 싶으면 ~.firebaseapp.com 도메인을 사용하는 것도 좋습니다.
생성된 도메인으로 접속해 보면, 웹사이트가 성공적으로 잘 배포된 것을 확인할 수 있습니다.
보너스: 웹사이트 메타 태그(meta 정보) 등록하기
여기까지 읽거나 따라오신 분을 위해 웹사이트의 메타 태그를 등록하는 과정을 알려드리겠습니다.
메타 태그를 등록하면, 카카오톡으로 링크를 공유했을 때 나타나는 미리보기를 원하는 대로 설정할 수 있습니다.
따라서 왼쪽과 같이 공유되는 링크에 오른쪽과 같이 내가 원하는 설명과 이미지 미리보기를 붙일 수 있다는 것입니다.
메타 태그를 설정하는 방법은, index.html을 다음과 같이 작성하는 것입니다.
미리보기에 제공할 정보를 위한 og:url, og:title, og:type, og:image와 같은 다양한 메타 태그를 추가할 수 있습니다.
참고를 위해 제가 작성한 메타 태그 코드를 다음과 같이 첨부합니다.
미리보기 이미지는 제가 만든 사이트에 업로드한 뒤, 해당 이미지의 주소를 붙여넣었습니다.
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta property="og:url" content="https://yeohj0710x.web.app/" />
<meta property="og:title" content="YHJ 𝕏" />
<meta property="og:type" content="website" />
<meta
property="og:image"
content="https://firebasestorage.googleapis.com/v0/b/yeohj0710x.appspot.com/o/tweets%2F1kf9VCWF32SqtUw8SC0XUvnmfeG2-tester123%2FIOsMYA5yaQ5NsWNeazd0?alt=media&token=1ee035c7-2bd1-44b6-aec3-6201c9db9e94"
/>
<meta property="og:description" content="YHJ 𝕏에서 일상을 공유하세요." />
<title>YHJ 𝕏</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>
이제 이를 적용시키기 위해서, 'npm run deploy' 명령어를 통해 다시 배포를 해 줍니다.
그리고 카카오톡을 통해 링크 이미지 미리보기나 사이트 이름 등 메타 태그가 제대로 적용이 되는지 확인해 봅니다.
적용이 잘 되는 것을 확인할 수 있습니다.
만약 바로 적용이 되지 않는 경우, 카카오톡의 '공유 디버거' 사이트에서 링크를 업로드하고 강제로 캐시를 초기화하여 업데이트할 수 있습니다.
https://developers.kakao.com/tool/debugger/sharing
위의 링크로 들어가서, 업데이트 된 페이지 링크를 붙여넣고 캐시 초기화 및 디버그를 수행해 주면 업데이트가 적용됩니다.
이렇게 해서 Firebase를 이용해 나만의 소셜 미디어 사이트 만들고 배포하는 모든 과정을 다루어보았습니다.