cloud functions express cors error with typescript | 오류, 에러, 버그

소스 코드

import * as express from "express";
import * as cors from "cors";

const app = express();
app.use(cors({ origin: true }));

기존의 express 설정시 사용하던 방법이랑 동일하다. cors 설정이 완료됐다.

 

 

그런데......

cloud functions 관련해서 아직도 cors 버그에 대한 질문과 답변이 계속 생긴다. 분명 예전에도 삽질을 했던 부분인데 또 보고 있었다. 알고보니 사실 cors 관련 버그가 아닌 경우도 많았다. (나도 그런 경우)

cors 관련 소스를 넣고 분명 오류 없이 정상적으로 컴파일이 됐는데, cors 오류가 계속 발생해서 아주 미칠고 환장할뻔 했다.

 

오류 상황

typescript와 cloud functions를 사용하게되면 npm run build마다 lib폴더에 컴파일을 하는데, 이 때 매번 lib폴더가 삭제된 후에 생성되는게 아니라 덮어쓰는 형식이다보니 문제가 생겼다.

 

예를 들어, 처음에는 실행에서 잘 작동되는 걸 확인 했었는데, cors 기능을 추가하는 동시에 serviceAccount.json 라는 파일을 import하는 과정에서 발생했다. (serviceAccount.json 파일로 인해 컴파일시 root 경로가 바뀌어버렸기 때문)

 

• 초기 설치 정상 작동 확인시 소스 코드와 폴더 구조 (cors 설정 안함)

import * as functions from "firebase-functions";

import * as admin from "firebase-admin";
import * as express from "express";

import kakaoRouter from "./kakaoRouter";

admin.initializeApp();
const app = express();

app.use(express.json()); // body-parser 설정
app.use("/kakao", kakaoRouter);

export const api = functions.region("asia-northeast3").https.onRequest(app);

초기 설치 정상 작동 확인시 lib 폴더 구조

• 이어서 cors 관련 코드와 serviceAccount.json 불러오는 코드 동시 추가시, 소스 코드와 lib 폴더 구조 (cors 설정 함) 

import * as functions from "firebase-functions";

import * as admin from "firebase-admin";
import * as express from "express";
import * as serviceAccount from "../serviceAccount.json";
import * as cors from "cors";

import kakaoRouter from "./kakaoRouter";

admin.initializeApp({
  credential: admin.credential.cert(<admin.ServiceAccount>serviceAccount),
});
const app = express();

app.use(express.json()); // body-parser 설정
app.use(cors({ origin: true }));
app.use("/kakao", kakaoRouter);

export const api = functions.region("asia-northeast3").https.onRequest(app);

lib 아래 src 폴더가 생겨있고 그아래 index.js가 생겨버렸다.

이런 상황이 생긴 이유는 serviceAccount.json 이라는 파일을 import 할 때, 그 위치가 src 폴더 아래(index.ts와 같은 level)가 아니라 functions 폴더 아래(src 폴더와 같은 level)에 있었기 때문이다.

즉, 컴파일시 루트 경로가 src 폴더가 되어야 하는데, 더 먼 경로에 있는 functions/serviceAccount.json을 가져와야 하다 보니 루트 경로를 functions 폴더로 잡고 컴파일 되버린 것.

 

lib 폴더에는 기존의 작동하는 index.js(cors 없음)와, 작동하지 않는 새로 생성된 src/index.js(cors 설정)가 있다보니

컴파일은 됐는데 계속 cors 오류가 발생한 것이었다.

 

결국 lib 폴더(tsconfig.json의 outDir)를 삭제 해보면서 오류가 뭐 때문에 발생했는지 찾아낼 수 있었다.

 

 

해결 방안

1. lib 폴더 삭제

 

2. 문제가 되는 파일(serviceAccount.json)을 src 폴더 아래로 옮김

 

 

3. serviceAccount.json .gitignore에 추가 (firebase에서 관리자 설정 파일이니 무조건)

// .gitignore
serviceAccount.json

 

4. src 폴더 하위 이외에 경로 관련 문제를 방지하기 위해 tsconfig.json에 루트 디렉터리 설정 추가

// tsconfig.json
{
  "compilerOptions": {
    ......
    "rootDir": "src"
  },
}

 

 

결론

cors 설정 제대로 했는데도 작동 안되면, 빌드 폴더(lib) 삭제 한 후에 다시 실행해보자. 

 

 

 

관련 게시물

2022.08.10 - [프로그래밍/흔적] - typescript json import 방법 | 오류, 에러, 버그

typescript json import 방법 | 오류, 에러, 버그

 

참고 자료

Enabling CORS in Cloud Functions for Firebase

 

 

질문이나 오류 발견 환영입니다.