HomeAboutMeBlogGuest
© 2025 Sejin Cha. All rights reserved.
Built with Next.js, deployed on Vercel
🌟
Programmers 최종 플젝 6조/
[프론트] 배포 세팅
[프론트] 배포 세팅
[프론트] 배포 세팅

[프론트] 배포 세팅

🌈 파이어베이스로 배포하기 (211209 기준)

💡
우리 팀은 배포를 하다가 불맛을 보았는데요! 제가 파이어베이스는 처음이라 배포에 워낙 약했고, Next 배포는 좀 달랐던 것 같아요. 따라서, 우리가 추후 다시 같은 실수를 반복하지 않도록 글로 남깁니다. 우리는 배포에 있어 어떤 것을 잘못했고, 앞으로 어떻게 세팅해야 할지 점검하는 원천으로 해당 페이지를 사용합시다 🙃 -Jason

이름을 정해줘요!

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

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

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

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

notion image
 

결과

notion image
notion image
 

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

notion image
 

호스팅을 추가해주죠 🙂

notion image
 

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

notion image
// 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를 하기 위해 전역 설치를 해줍시다.
notion image
yarn global add firebase-tools
 

로그인

이후, 명시된 대로 구글에 먼저 로그인을 해주죠!
firebase login
notion image
 

프로젝트 시작

파이어베이스 세팅을 본격적으로 시작해요!
firebase init
notion image
notion image
스페이스바를 눌러줍니다.
notion image
 
이후, 다음과 같이 하고 있는 프로젝트가 있다고 알려줍니다.
notion image
 
저는 현재 에버이벤트를 하고 있죠?!
notion image
 

기타 내용 설정

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

이후 배포를 시작해보죠!

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

결과

호스팅을 해보러 가보겠습니다 🙂
notion image
notion image
 
먼저 Get Started를 눌러볼까요?
notion image
 

호스팅 CLI 입력하기

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

호스팅 시작하기

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

정보를 한 번 살펴보죠!

그러니까... 별칭을 등록할 수 있다는 내용인 것 같아요.
또한, 퍼블릭 디렉토리란 정적인 자산들이 어디에 등록되어 있는지를 말하는 것 같네요. 저는 .next를 입력해주었습니다.
notion image
 
notion image
 

다시 호스팅 시도하기

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

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"
      }
    ]
  }
}
결과적으로 잘 동작하는군요! 😆
notion image

Google Analytics

역시 잘 되는군요?!🙃
notion image
 

동적 라우팅 미적용 현상 발생(211209, 12:00 해결 완료)

Firebase 동적 라우팅 미적용 현상
Firebase 동적 라우팅 미적용 현상 을 참고하며 세팅하시기를 바랍니다 😉
 
 

👏🏻 참고자료

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