03352025년 11월 8일

[SvelteKit] Firebase Hosting 배포했지만, 아무것도 안 보이는 문제

| 서론

Firebase Hosting을 통해 배포를 무사히 끝내고, 기대감을 갖고 배포 주소로 접속했지만,,

제가 마주해야 했던 것은 위의 사진과 같은 모습이었습니다.

즉, 제가 작업했던 내용이 배포 과정에 반영되지 않았던 것이었습니다.

보통 이런 경우라면, 생성된 build 폴더에 문제가 있을 것이라 판단되어 확인해본 결과,

역시나 예상은 적중했습니다.

Hosting 설정의 옵션을 선택하면서 "Configure as a single-page app (rewrite all urls to /index.html)? (y/n) Y" 라는 부분을 선택하게 되어 build 폴더가 생성은 되었지만, 기본 index.html 템플릿 코드가 생성된 상태에서 배포가 된 것이었습니다.

그래서 기존의 build 폴더를 지우고 npm run build 명령어를 입력하여 빌드 과정을 거쳤으나,

완료는 됐다는 결과와 달리 build 폴더가 없었습니다.

| 왜 build 폴더가 없을까?

어떤 이유 때문에 build 폴더가 생기지 않았는지에 대해서 찾아본 결과,

현재 프로젝트의 SvelteKit이 기본 어댑터인 @sveltejs/adapter-auto를 사용하고 있어서 빌드 결과물이 build/폴더에 생기지 않고.svelte-kit/output/...형태로 나오는 상태였습니다.

이 경우, @sveltejs/adapter-static 같은 정적 사이트용 어댑터로 변경하면 build/ 폴더가 생성할 수 있다는 것을 알게 되었습니다.

또한, Firebase Hosting은 정적 배포 환경이라, 반드시 static 어댑터를 써야 했습니다.

1) 시도 1 : svelte.config.js 변경

그래서 svelte.config.js 파일을 열어서 다음과 같이 어댑터를 변경해주었습니다.

bash

// 이전 코드
import adapter from '@sveltejs/adapter-auto';
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';

/** @type {import('@sveltejs/kit').Config} */
const config = {
	// Consult https://svelte.dev/docs/kit/integrations
	// for more information about preprocessors
	preprocess: vitePreprocess(),
	kit: {
		// adapter-auto only supports some environments, see https://svelte.dev/docs/kit/adapter-auto for a list.
		// If your environment is not supported, or you settled on a specific environment, switch out the adapter.
		// See https://svelte.dev/docs/kit/adapters for more information about adapters.
		adapter: adapter()
	}
};

export default config;

bash

// 이후 코드
import adapter from '@sveltejs/adapter-static';
import { vitePreprocess } from '@sveltejs/kit/vite';

/** @type {import('@sveltejs/kit').Config} */
const config = {
  preprocess: vitePreprocess(),
  kit: {
    adapter: adapter({
      pages: 'build',
      assets: 'build',
      fallback: 'index.html',
      strict: false
    })
  }
};

export default config;

2) 시도 2 : static 어댑터 사용

하지만 여전히 build 폴더는 생기지 않았고, 더 알아본 결과,

static 어댑터를 사용하기 위해 패키지를 설치해야 했습니다.

(1) @sveltejs/adapter-static 설치

: 아래의 명령어를 입력하여 adapter-static을 설치했습니다.

bash

npm install -D @sveltejs/adapter-static

(2) svelte.config.js 수정

: 아래와 같이 어댑터를 staticd으로 수정했습니다.

bash

import adapter from '@sveltejs/adapter-static';
import { vitePreprocess } from '@sveltejs/kit/vite';

/** @type {import('@sveltejs/kit').Config} */
const config = {
	preprocess: vitePreprocess(),
	kit: {
		adapter: adapter({
			pages: 'build',   // firebase.json에서 public과 일치
			assets: 'build',
			fallback: 'index.html', // SPA 라우팅용
		}),
		alias: {
			$lib: './src/lib',
		}
	}
};

export default config;

3) 시도 3 : vitePreporcess의 import 구문 문제

이제는 되겠지,, 라는 희망을 갖고 빌드 과정을 거쳤지만, 여전히 문제가 발생했습니다.

이 부분을 두고 어떤 import 구문을 사용해야 하는지 알아보니, 버전 별로 import 구문이 다르다는 것을 알게 되었습니다.

(1) 버전 별 import문

SvelteKit 버전	올바른 import 문
1.x ~ 2.4x	import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'
2.5x 이상	import { vitePreprocess } from '@sveltejs/kit'

(2) 버전 확인

: 아래의 명령어를 사용하여 현재 진행중인 SvelteKit 버전을 확인했습니다.

bash

npm list @sveltejs/kit

bash

re-log@0.0.1 /Users/kimkwang-il/Documents/Dev/woowacourse/precourse/open_mission/re-log
├─┬ @sveltejs/adapter-auto@7.0.0
│ └── @sveltejs/kit@2.48.4 deduped
├─┬ @sveltejs/adapter-static@3.0.10
│ └── @sveltejs/kit@2.48.4 deduped
└── @sveltejs/kit@2.48.4

현재 프로젝트의 경우 SvelteKit 2.48.4 버전이기에, import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'를 사용했습니다.

bash

import adapter from '@sveltejs/adapter-static';
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'; 

/** @type {import('@sveltejs/kit').Config} */
const config = {
	preprocess: vitePreprocess(),
	kit: {
		adapter: adapter({
			pages: 'build',
			assets: 'build',
			fallback: 'index.html'
		}),
		alias: {
			$lib: './src/lib'
		}
	}
};

export default config;

그 결과 성공적으로 build 폴더를 생성할 수 있었고,

firebase deploy 명령어를 통해 성공적으로 배포할 수 있었습니다.

성공!

| 결론

이번 문제는 SvelteKit의 어댑터 설정 때문이었습니다.

Firebase Hosting은 정적 파일만 인식하기 때문에,
기본 어댑터인 @sveltejs/adapter-auto로는 build 폴더가 생성되지 않았습니다.

이를 해결하기 위해 @sveltejs/adapter-static을 설치하고, 빌드 경로를 build/로 지정한 후,
버전에 맞는 vitePreprocess import 구문 (import { vitePreprocess } from '@sveltejs/vite-plugin-svelte')으로 수정했습니다.

그 결과, build 폴더가 정상적으로 생성되었고,

firebase deploy를 통해 SvelteKit 프로젝트를 성공적으로 배포할 수 있었습니다.

이번 과정을 통해 어댑터와 빌드 환경의 구조를 더 깊이 이해하게 되었고,
Firebase Hosting에서의 정적 배포 흐름을 완전히 익히는 계기가 되었습니다.

| 서론

| 왜 build 폴더가 없을까?

| 결론

최근 글