로컬호스트 오픈 시에 자주 발생하는 에뮬레이터 오류
$ sudo lsof -i :80858085포트를 예를 들어서, 위의 명령어를 입력하면 PID 값이 나온다.
$ sudo kill -TERM 6371863718은 PID 값인데 kill -TERM 명령으로 끌 수 있다.
포트를 내리고 다시 에뮬을 돌리면 된다.
실제 파이어베이스가 배포했을때 나오는 페이지는 Hosting emulator로 열린다.
파이어베이스 구조
-
서버 코드는 기본적으로 functions폴더에 다 작성한다. 실제로 돌아가는 백엔드 코드를 작성한다.
-
src 폴더는 프론트엔드 프로젝트 코드를 작성한다.(dev 서버)
-
개발이 끝나면 deploy 명령어로 배포한다.
$ npm run fb:deploy파이어베이스 Functions 배포를 위한 셋팅
파이어베이스가 버전 2로 넘어가면서 내부에서 자동 셋팅해줘야하는데 안되어 있는 이슈가 있어서 수동으로 아래와 같이 셋팅해준다.
- 파이어베이스 사이트 페이지 - 빌드 - Functions - 만들었던 프로젝트를 선택
- 상태 탭 - Cloud Console로 이동 - Artifact Registry API 검색해서 사용 버튼 클릭
TS:watch터미널 - functions로 들어가서 감시모드
$ npm run build:watch타입스크립트가 수정 될 때마다 빌드된 결과물을 계속 받아냄
lib 폴더로(이 폴더는 타입스크립트가 컴파일 된 자바스크립트 코드가 들어 있다.)
Funcions 터미널 추가후 express, cors설치
$ npm i -D express cors-
Express: Node.js의 대표적인 프레임 워크, Express를 통해서 라우터 구조를 나눌 수 있다.
-
CORS: 교차 출처 리소스 공유(Cross-Origin Resource Sharing, CORS)
백엔드에서 요청이 들어오는 것을 A에게는 허락해주고 B에게는 거부하는 기능
index.ts 셋팅
만든 프로젝트 코드 중에 DB에 들어온다거나, DB에 저장해야한다거나, DB에서 삭제해야 한다거나 등 파이어베이스의 제공되는 기능에대한 제어를 하려면 제어 권한이 필요하고, 그 권한은 관리자 권한이어야한다.
import * as admin from 'firebase-admin'와일드카드(*)를 사용해서 전부 다 가져오는 이유:
Node.js는 CommonJS방식이기 때문에 가져오기 내보내기는require(),module.exports를 사용하고,
프론트엔드는 기본적으로 ESM방식 =>import,export방식을 사용한다.
ESM방식에는 기본 내보내기인export default방식이 있는데 Node.js에는 없다. default 개념이 없으니 전부 다 가져와서 admin으로 사용하겠다는 의미
// // 초기화가 가장 먼저 일어나야함 이 두 줄이 최상단에 있어야 한다.
import * as admin from 'firebase-admin'
// admin으로 functions 초기화
admin.initializeApp()
import * as functions from 'firebase-functions'
import * as express from 'express'
import * as cors from 'cors'
import todo from './routes/todo'
const app = express()
app.use(express.json())
// cors에 별도 지정하지 않으면 모든 요청 허용
app.use(cors())
// 요청페이지만들기
app.use('/todo', todo)
// 내보내기
export const api = functions
.region('asia-northeast3')
.https
.onRequest(app)프로젝트 시작
이제 프로젝트 코드를 작성하면 됨
import * as admin from 'firebase-admin'
import * as express from 'express'
const db = admin.firestore()
// 라우터 호출
const router = express.Router()
// 아래와 같이 메소드를 받아서 처리할 내용을 만들면 된다.
router.get('/', (rea, res) => {
})
router.post('')
router.put('')
router.deleter('')
// 최종코드 - router 객체를 내보낸다
export default router
프론트엔드 코드 실행하는 터미널 생성
Vue파일에서 프론트엔드코드 작성하고
$ npm run dev데브 서버로 확인
파이어베이스 배포하기
1. 깃헙 저장소에 먼저 push한다.
그럼 깃헙 사이트 Actions 탭에 작업이 자동으로 돌아가게 된다. -> 지속적 배포(Continuous deployment, CD)
2. 깃헙에만 올리면 Hosting코드는 파이어베이스에 자동으로 올라간다.
파이어베이스 -> 빌드 -> Hosting -> 대시보드
도메인 주소가 생성되는데 실제 배포한 그 내용이 담겨있다.
3. 서버 코드 배포하기(functions 코드)
deploy하면 hosting 코드도 함께 올라가긴하지만, 처음 배포하는 것이니 전체 배포를 해준다.
$ npm run fb:deploy만약 functions만 따로 배포하고싶으면 functions폴더로 들어가서 deploy를 해주면 된다. (npm run deploy)
배포하다가 에러가 뜨면
파이어베이스 사이트 - Functions - 로그 탭 - Cloud console로 이동 - 쿼리 탭에 에러 메시지 확인해서 그런 부분을 수정해나가면 된다.
배포한 데이터 권한 설정
파이어베이스 사이트 - Functions - 로그 탭 - Cloud console에서 "Cloud Functions" 검색 -> 이름 클릭 -> 권한 탭 -> 추가 -> 주 구성원: allUsers / 역할: Cloud Functions 호출자 -> 저장
구성원 및 역할 추가해서 누구나 API서버에 접속할 수 있게 한다.
세부적으로 접근을 막는 것은 cors옵션으로(app.use(cors())) 화이트리스트로 제한할 수 있다.
