node.js 서버를 자동으로 다시 로드하는 방법

소스 코드: https://github.com/taowen/vite-howto/tree/main/packages/SSR/auto-reload-node-server

코드 구조 및 동기

이것은 node.js 응용 프로그램이며 express를 사용하여 수신합니다http://localhost:3000.

server/server-entry.ts는 http 포트를 수신하는 진입점입니다

.

server/server.ts가 기본 로직입니다

.

DX 문제

dev 서버는 소스를 변경했을 때 node.js 서버를 자동으로 다시 로드해야 합니다. nodemon은 소스 코드 변경을 모니터링하고 노드 프로세스를 다시 시작할 수 있지만 다시 시작하는 데 시간이 걸립니다. 프로세스를 다시 시작하지 않고 변경하는 것이 좋습니다.

UX 문제

vite build server는 모든 server-entry.ts 종속성(노드 자체 제외)을 패키징해야 하므로 배포 시 다시 패키징npm install할 필요가 없습니다.

솔루션 연습

node.js 애플리케이션을 번들로 빌드

서버/vite.config.ts

import { defineConfig } from 'vite'

export default defineConfig({
    build: {
        ssr: './server-entry.ts',
        outDir: '../dist'
    },
})

참조하는 모든 항목(node.js 표준 라이브러리 제외)과 함께 server/server-entry.ts ~ dist/server-entry.js를 번들로 묶습니다. node.js 환경에서 실행할 준비가 된 commonjs 형식입니다. build.ssr는 node.js 서버를 구축하기 위해 vite에서 제공합니다.

개발 서버

개발 중에http://localhost:3000/ vite가 server.ts를 즉시 변환하기를 원하므로 변경 후 컴파일 프로세스를 건너뛸 수 있습니다.

import express from 'express';
import { createServer as createViteServer } from 'vite';

async function main() {
    const app = express()
    // auto reload in dev mode
    const vite = await createViteServer({
        server: {
            middlewareMode: 'ssr',
            watch: {
                // During tests we edit the files too fast and sometimes chokidar
                // misses change events, so enforce polling for consistency
                usePolling: true,
                interval: 100
            }
        }
    });
    app.all('/(.*)', async (req, resp) => {
        req.url = req.originalUrl;
        console.log(req.method, req.url);
        const { default: handle } = await vite.ssrLoadModule('./server/server.ts');
        handle(req, resp, (e) => {
            if (e) {
                vite.ssrFixStacktrace(e)
                console.error(e.stack)
                resp.status(500).end(e.stack);
            } else {
                resp.status(404).end();
            }
        });
    })
    app.listen(3000, () => {
        console.log('http://localhost:3000')
    });
}

main();

await vite.ssrLoadModule('./server/server.ts')를 사용하여 코드를 변환하고 실행합니다. ssrLoadModule이 요청당 호출되고 server.watch가 구성되기 때문에

 const vite = await createViteServer({
    server: {
        middlewareMode: 'ssr',
        watch: {
            // During tests we edit the files too fast and sometimes chokidar
            // misses change events, so enforce polling for consistency
            usePolling: true,
            interval: 100
        }
    }
});

서버 코드를 변경하면 브라우저를 새로고침하여 dev 서버에 또 다른 요청을 보내는 것만으로도 효과를 볼 수 있습니다. vite.ssrFixStacktrace(e) 변환된 파일의 줄 번호 대신 올바른 원래 줄 번호를 보고하도록 예외 스택 추적을 수정합니다.