Portfolio

🌈 파이어베이스로 배포하기 A-Z

이름을 정해줘요!

일단 프로젝트에 이름을 달아줍시다 :)

애널리틱스 사용 설정을 해요!

이후에 사용자 추적을 통한 UX 개선을 진행할 것이므로, 애널리틱스를 사용한다고 하겠습니다!

이후 세부설정하면 간단하게 마칩니다!

결과

여기서 `</>` (웹 추가)를 해봅시다!

호스팅을 추가해주죠 🙂

아! 이게 SDK였군요~ 이를 한 번 추가해볼까요~?


// Import the functions you need from the SDKs you need
import { initializeApp, getApps, getApp } from 'firebase/app';
import { getAnalytics } from 'firebase/analytics';
import 'firebase/auth';
import 'firebase/firestore';

// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries

import '@styles/globals.css';

import type { AppProps } from 'next/app';
import Head from 'next/head';

/* eslint-disable prefer-destructuring */
const NEXT_PUBLIC_FIREBASE_API_KEY = process.env.NEXT_PUBLIC_FIREBASE_API_KEY;
const NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN =
  process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN;
const NEXT_PUBLIC_FIREBASE_PROJECT_ID =
  process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID;
const NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET =
  process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET;
const NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID =
  process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID;
const NEXT_PUBLIC_FIREBASE_APP_ID = process.env.NEXT_PUBLIC_FIREBASE_APP_ID;

function MyApp({ Component, pageProps }: AppProps) {
  // Your web app's Firebase configuration
  // For Firebase JS SDK v7.20.0 and later, measurementId is optional
  /* eslint-disable no-template-curly-in-string */
  const firebaseConfig = {
    apiKey: NEXT_PUBLIC_FIREBASE_API_KEY,
    authDomain: NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
    projectId: NEXT_PUBLIC_FIREBASE_PROJECT_ID,
    storageBucket: NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
    messagingSenderId: NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
    appId: NEXT_PUBLIC_FIREBASE_APP_ID,
    measurementId: '${config.measurementId}',
  };

  if (!getApps().length) {
    const app = initializeApp(firebaseConfig);
    getAnalytics(app);
  } else {
    getApp();
  }

  return (
    <>
      <Head>
        <link rel="preconnect" href="https://fonts.googleapis.com" as="font" />
        <link
          rel="preconnect"
          href="https://fonts.gstatic.com"
          crossOrigin="true"
        />
        <link
          rel="preload"
          as="style"
          type="text/css"
          href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;700&display=block"
        />
        <link
          rel="stylesheet"
          href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;700&display=block"
        />
      </Head>
      <Component {...pageProps} />
    </>
  );
}

export default MyApp;

파이어베이스 CLI 전역 설치

이후, 파이어베이스 CLI를 하기 위해 전역 설치를 해줍시다.


yarn global add firebase-tools

프로젝트 시작

파이어베이스 세팅을 본격적으로 시작해요!


firebase init

스페이스바를 눌러줍니다.

이후, 다음과 같이 하고 있는 프로젝트가 있다고 알려줍니다.

저는 현재 에버이벤트를 하고 있죠?!

기타 내용 설정

다음과 같이 이제 설정을 해줍시다!

이후 배포를 시작해보죠!


firebase deploy

성공했다는 메시지가 나오고 URL이 나오네요!

결과

호스팅을 해보러 가보겠습니다 🙂

먼저 Get Started를 눌러볼까요?

호스팅 CLI 입력하기

여기서는 다음과 같이 하라고 하네요!

호스팅 시작하기

다음과 같이 Y를 입력합니다.

정보를 한 번 살펴보죠!

그러니까... 별칭을 등록할 수 있다는 내용인 것 같아요.

또한, 퍼블릭 디렉토리란 정적인 자산들이 어디에 등록되어 있는지를 말하는 것 같네요. 저는 .next를 입력해주었습니다.

다시 호스팅 시도하기

결과적으로 현재 배포 설정을 다 끝냈으니, 호스팅을 시도해보죠!

window is not defined

앗! window 객체가 없다고 하네요.

이유가 무엇일까요?

저는 다음 글에서 찾았는데요. 아무래도 next로 빌드할 때 완전히 독립적인 어떤 결과물로 export되지 않는 현상이 발생하는 듯합니다. (아무래도, server와 client 둘 다 렌더링하는 기법을 사용하는 next이기 때문이죠.)

따라서... 저는 다음 명령어를 하나 추가했습니다.

package.json


...
scripts: {
	"deploy": "next build && next export"
}

이후, firebase.json도 다음과 같이 수정합니다.


{
  "hosting": {
    "public": "out",
    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
    "cleanUrls": true,
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

결과적으로 잘 동작하는군요! 😆

👏🏻 참고자료

https://firebase.google.com/docs/reference/js/app.md#app_package

https://firebase.google.cn/docs/web/setup?hl=ko

https://bongster88.blogspot.com/2019/09/nextjs-firebase-hosting.html

Firebase로 배포하기

🌈 파이어베이스로 배포하기 A-Z

이름을 정해줘요!

애널리틱스 사용 설정을 해요!

이후 세부설정하면 간단하게 마칩니다!

결과

여기서 `</>` (웹 추가)를 해봅시다!

호스팅을 추가해주죠 🙂

아! 이게 SDK였군요~ 이를 한 번 추가해볼까요~?

파이어베이스 CLI 전역 설치

로그인

프로젝트 시작

기타 내용 설정

이후 배포를 시작해보죠!

결과

호스팅 CLI 입력하기

호스팅 시작하기

정보를 한 번 살펴보죠!

다시 호스팅 시도하기

window is not defined

package.json

👏🏻 참고자료

Firebase로 배포하기

🌈 파이어베이스로 배포하기 A-Z

이름을 정해줘요!

애널리틱스 사용 설정을 해요!

이후 세부설정하면 간단하게 마칩니다!

결과

여기서 </> (웹 추가)를 해봅시다!

호스팅을 추가해주죠 🙂

아! 이게 SDK였군요~ 이를 한 번 추가해볼까요~?

파이어베이스 CLI 전역 설치

로그인

프로젝트 시작

기타 내용 설정

이후 배포를 시작해보죠!

결과

호스팅 CLI 입력하기

호스팅 시작하기

정보를 한 번 살펴보죠!

다시 호스팅 시도하기

window is not defined

package.json

👏🏻 참고자료

여기서 `</>` (웹 추가)를 해봅시다!