[Firebase / Next.js] 파이어베이스로 Next.js 웹 SPA(Single Page Application) 배포하기

- 목차 방법 1. 파이어베이스 접속 2. 프로젝트 만들기 3. Firebase CLI 설치 4. Firebase 로그인 5. Firebase init 6. Config 7. 배포 문제 해결 터미널에서 && 사용 안 되는 문제 배포에 사용할 폴더 설정

 

안녕하세요!

 

최근에 웹 개발을 공부하면서 웹 배포를 어디서 할 지 고민하는 중 편하게 백엔드 개발 없이 배포가 가능하고

NoSQL 기반의 데이터베이스도 사용이 가능한 파이어베이스로 해보자 싶어 공부해보았습니다.

 

처음 사용하는 것이어서 DB 사용 없이 가장 기본적인 형태로 정적인 페이지를 배포하는 것을 연습해보았습니다.

 

사실 Next.js는 서버 사이드 렌더링을 지원하는 프레임워크이기 때문에...

정적 페이지 배포할 거면 그냥 리액트만 써도 되고 큰 의미가 없긴 하지만

일단은 Next.js를 써서 접속이 되는 홈페이지를 만들어 배포해보자는 것이 제 목표였기 때문에 그 과정을 소개해보고자 합니다.

 

배포할 프로젝트는 이미 있다고 가정하고 작성하겠습니다.

 

방법

 

1. 파이어베이스 접속

Firebase 홈페이지

https://firebase.google.com/?hl=ko

Firebase | Google's Mobile and Web App Development Platform

 

그냥 접속하셔서 로그인하고 시작하기 버튼을 누르시면 됩니다!

 

2. 프로젝트 만들기

미리 프로젝트를 하나 만들어두겠습니다.

 

대충 짓고 싶은 이름으로 지어줍니다~

3. Firebase CLI( Command-Line Interface) 설치

npm i -g firebase-tools

 

터미널 환경에서 위 명령어를 치면 Firebase CLI가 설치됩니다.

터미널에서 firebase 작업을 할 수 있게 설치합니다.

 

4. Firebase 로그인

firebase login

 

위 명령어를 쓰면 구글 창이 뜰텐데, 본인의 구글 아이디로 로그인하면 됩니다.

 

5. Firebase init

 

이제 파이어베이스에 배포할 준비를 합니다.

 

터미널에서

firebase init

 

을 실행해주세요.

 

 

바로 y 엔터 후

 

사용할 기능을 선택하는 화면이 뜨는데 우리는 웹 호스팅 기능이 필요하기 때문에

Hosting에 체크해주고 넘어갑니다.

 

우리는 아까 프로젝트를 만들어두었기 때문에

Use an existing project를 선택하고 아까 만든 프로젝트를 선택해줍니다.

 

public directory를 쓰는 곳에 out이라고 적어줍니다.

 

 

SPA를 배포할 거니까 Y, Github Actions는 이번엔 사용하지 않기 때문에 N을 선택해주면

환경설정이 끝났습니다.

 

6. Config 수정

---

예전에는 next export 라는 명령어로 따로 정적 파일을 만들었었는데, 이제는 next.config.js에서 설정해주면

빌드 시에 정적 파일을 만들어줄지 말지 지정할 수가 있습니다.

 

next.config.js 파일을 다음과 같이 수정합니다.

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  output : "export",
};

export default nextConfig;

 

nextConfig 부분에 한 줄만 추가하면 됩니다.

 

7. 배포!

이제 다 왔습니다.

npm run build && firebase deploy

 

터미널에서 이 명령어를 작성해주세요.

 

&&는 앞 명령어를 실행하고 성공 시 그 뒤에 명령어를 실행한다는 뜻입니다.

즉 npm run build 후 빌드 성공 시 firebase deploy를 실행합니다.

 

따로따로 쓰셔도 아무 문제 없습니다.

 

deploy가 완료되면 뜨는 URL로 접속해보면?

 

완성!

이제 localhost에서만 접속 가능한 홈페이지가 아닌 진짜 홈페이지를 만들었습니다!

Firebase 무료 요금제는 월 10GB까지만 지원합니다.

 

 

실제 사용하기엔 무리가 있는 양을 지원하지만..

잠시 테스트해보거나 사용자가 매우 적은 홈페이지를 호스팅하는 정도로 사용하기 좋을 것 같네요!

 

이렇게 AWS EC2 같은 복잡한 클라우드 환경과 백엔드 코드 한 줄 없이 페이지를 배포했습니다.

여러분도 직접 웹페이지를 배포해보세요.

감사합니다.

---

문제 해결

터미널에서 && 사용하는 문제

 

윈도우 터미널 환경에서

npm run build && firebase deploy

 

를 실행하려는데 && 를 사용할 수 없다는 에러가 떴습니다.

 

Windows Powershell은 &&를 인식하지 못하는 문제가 있다고 합니다.

 

 

이럴 땐 따옴표 사이에 &&를 사용해주면 문제없이 작동합니다.

 

또는

npm run build; firebase deploy

 

이렇게 세미콜론 (;) 으로 구분해서 적어주세요.

대신 이 방법은 빌드가 실패해도 firebase deploy가 실행되어 오류가 발생할 수도 있습니다.

 

배포에 사용할 폴더 설정

firebase.json

 

배포할 때 public 폴더 설정을 .next로 해야 되는 줄 알고 맨 처음에 잘못했다가 

 

Firebase Hosting Setup Complete 페이지가 떴었는데요.

이 페이지가 원래 뭔가 잘못되면 뜨는 디폴트 페이지인데..

 

뭔가 설정이 잘못 되어서 뜰 페이지가 안 뜬 상황이니 폴더 설정을 잘 해주어야 합니다.