백엔드 연동

백엔드 연동 (Backend Integration)

HTML을 전통적인 백엔드(예: Rails, Laravel)로 서빙하면서 자산만 Vite로 처리하고 싶다면, 기존 통합을 찾아보거나 직접 구성할 수 있어요. Awesome Vite에 백엔드 연동 예시가 정리되어 있으니 먼저 확인해 보는 걸 추천해요. 커스텀 통합이 필요하면 아래 단계로 직접 설정할 수 있어요.

출처: Vite — Backend Integration

1. 엔트리 설정과 빌드 매니페스트

Vite 설정에서 엔트리를 정하고 빌드 매니페스트를 활성화해요.

// vite.config.js
export default defineConfig({
  // 기본 .html 엔트리를 덮어쓴다
  input: '/path/to/main.js',
  server: {
    cors: {
      // 브라우저에서 접근할 origin
      origin: 'http://my-backend.example.com',
    },
  },
  build: {
    // outDir에 .vite/manifest.json을 생성한다
    manifest: true,
  },
})

모듈 프리로드 폴리필을 비활성화하지 않았다면, 앱 엔트리 시작 부분에 폴리필도 import 해야 해요.

// 앱 엔트리의 맨 앞에 추가
import 'vite/modulepreload-polyfill'

2. 개발 환경

개발 중에는 서버의 HTML 템플릿에 다음 스크립트들을 주입해요(http://localhost:5173은 Vite가 실행되는 로컬 URL로 치환).

<!-- 개발 중 -->
<script type="module" src="http://localhost:5173/@vite/client"></script>
<script type="module" src="http://localhost:5173/main.js"></script>

이미지 같은 자산이 제대로 로드되려면 자산 요청을 Vite 서버로 프록시하도록 서버를 구성하거나, server.origin을 설정해서 생성되는 자산 URL이 상대 경로 대신 백엔드 서버 URL로 해석되게 해야 해요.

React를 @vitejs/plugin-react와 함께 쓴다면, 플러그인이 직접 서빙하는 HTML을 수정할 수 없기 때문에 위 스크립트들 앞에 리프레시 런타임 프리앰블을 추가해야 해요.

<script type="module">
  import RefreshRuntime from 'http://localhost:5173/@react-refresh'
  RefreshRuntime.injectIntoGlobalHook(window)
  window.$RefreshReg$ = () => {}
  window.$RefreshSig$ = () => (type) => type
  window.__vite_plugin_react_preamble_installed__ = true
</script>

3. 프로덕션

vite build를 실행하면 다른 자산 파일들과 함께 .vite/manifest.json이 생성돼요. 이 매니페스트를 백엔드가 읽어서 HTML에 올바른 해시 자산 경로를 넣어 주면 돼요.

백엔드 연동