Express.js와 다른 프레임워크 통합

몇 가지 추가 구성을 사용하면 기본 프레임워크 인식 CLI 기능을 기반으로 통합 지원을 Angular 및 Next.js 이외의 프레임워크로 확장할 수 있습니다.

시작하기 전에

Firebase에 앱을 배포하기 전에 다음 요구사항 및 옵션을 검토하세요.

  • Firebase CLI 버전 12.1.0 이상. 선호하는 방법으로 CLI를 설치하세요.
  • 선택사항: Firebase 프로젝트에서 결제 사용 설정(SSR을 사용하려는 경우는 필수)

Firebase 초기화

시작하려면 프레임워크 프로젝트를 위해 Firebase를 초기화하세요. 새 프로젝트에 Firebase CLI를 사용하거나 기존 프로젝트에서 firebase.json을 수정합니다.

새 프로젝트 초기화

  1. Firebase CLI에서 웹 프레임워크 미리보기를 사용 설정합니다. 
    firebase experiments:enable webframeworks

  2. CLI에서 초기화 명령어를 실행한 후 메시지를 따릅니다. 

    firebase init hosting

  3. '웹 프레임워크(실험용)를 사용하시겠어요?'라는 질문에 '예'라고 답하세요.

  4. 호스팅 소스 디렉터리를 선택합니다. 기존 웹 앱일 수 있습니다.

  5. 메시지가 표시되면 Express.js / custom을 선택합니다.

기존 프로젝트 초기화

firebase.json에서 호스팅 구성을 변경하여 public 옵션이 아닌 source 옵션을 갖도록 합니다. 예를 들면 다음과 같습니다.

{
  "hosting": {
    "source": "./path-to-your-express-directory"
  }
}

정적 콘텐츠 제공

정적 콘텐츠를 배포하기 전에 애플리케이션을 구성해야 합니다.

구성

애플리케이션을 배포하는 방법을 알아보려면 Firebase CLI에서 앱을 빌드하고 도구가 Hosting용 자산을 배치하는 위치를 모두 알아야 합니다. 이 작업은 package.json의 npm 빌드 스크립트와 CJS 디렉터리 지시문으로 실행됩니다.

다음 package.json이 주어집니다.

{
    "name": "express-app",
    "version": "0.0.0",
    "scripts": {
        "build": "spack",
        "static": "cp static/* dist",
        "prerender": "ts-node prerender.ts"
    },
    …
}

Firebase CLI는 빌드 스크립트만 호출하므로 빌드 스크립트가 완전한지 확인해야 합니다.

{
    "name": "express-app",
    "version": "0.0.0",
    "scripts": {
        "build": "spack && npm run static && npm run prerender",
        "static": "cp static/* dist",
        "prerender": "ts-node prerender.ts"
    },
    …
}

프레임워크가 처음부터 사전 렌더링을 지원하지 않으면 Rendertron과 같은 도구를 사용하는 것이 좋습니다. Rendertron을 사용하면 앱의 로컬 인스턴스에 대한 헤드리스 Chrome 요청을 할 수 있기 때문에 결과 HTML을 Hosting에 제공할 수 있습니다.

마지막으로 여러 프레임워크와 빌드 도구가 아티팩트를 서로 다른 위치에 저장합니다. directories.serve를 사용하여 빌드 스크립트가 결과 아티팩트를 출력하는 위치를 CLI에 전달합니다.

{
    "name": "express-app",
    "version": "0.0.0",
    "scripts": {
        "build": "spack && npm run static && npm run prerender",
        "static": "cp static/* dist",
        "prerender": "ts-node prerender.ts"
    },
    "directories": {
        "serve": "dist"
    },
    …
}

배포

앱을 구성한 후 표준 배포 명령어를 사용하여 정적 콘텐츠를 제공할 수 있습니다.

firebase deploy

동적 콘텐츠 제공

Cloud Functions for Firebase에서 Express 앱을 제공하려면 라이브러리가 npm으로 압축된 후 Firebase에서 찾을 수 있도록 Express 앱(또는 Express 스타일의 URL 핸들러)을 내보내야 합니다.

이렇게 하려면 files 지시어가 서버에 필요한 모든 것을 포함하고 기본 진입점이 package.json에서 올바르게 설정되어 있어야 합니다.

{
    "name": "express-app",
    "version": "0.0.0",
    "scripts": {
        "build": "spack && npm run static && npm run prerender",
        "static": "cp static/* dist",
        "prerender": "ts-node tools/prerender.ts"
    },
    "directories": {
        "serve": "dist"
    },
    "files": ["dist", "server.js"],
    "main": "server.js",
    ...
}

app이라는 함수에서 express 앱을 내보냅니다.

// server.js
export function app() {
  const server = express();
   …
   return server;
}

또는 express 스타일 URL 핸들러를 내보내려면 이름을 handle로 지정합니다.

export function handle(req, res) {
   res.send(‘hello world’);
}

배포

firebase deploy

이렇게 하면 정적 콘텐츠가 Firebase Hosting에 배포되고 Firebase가 Cloud Functions for Firebase에 호스팅된 Express 앱으로 대체됩니다.

선택사항: Firebase 인증과 통합

웹 프레임워크 인식 Firebase 배포 도구는 쿠키를 사용하여 클라이언트 및 서버 상태를 자동으로 동기화합니다. 인증 컨텍스트에 액세스하기 위해 Express res.locals 객체에는 인증된 Firebase 앱 인스턴스(firebaseApp)와 현재 로그인한 사용자(currentUser)가 필요에 따라 포함됩니다.