[ Svelte ] Svelte-kit 으로 build 후 배포

아무리 찾아봐도 정보가 너무 적어서 직접 작업하면서 삽질한 내용을 적어 내려간다고 함.

 

svelte-kit을 설치하면 보통 vite 로 작업하게 되고, npm run dev 커맨드로 로컬을 돌릴건데

이걸 서버에 올려서 작업해보고 싶어서, build 후 올릴려고 하니까 너무 막막한 것 이다.

 

기본적으로 node.js 서버로 맞물려서 svelte를 올릴건데.

 

[ Frontend ]

    Host - localhost 

    Port - 5173

 

[ Backend ]

    Host - localhost

    Port - 8080

 

[ Database ] 

    Host - localhost

    Port - 3306

 

위와 동일하게 일단 npm run build 를 해준다.

 

그리고 /build/index.js 로 돌리는걸로 알고 있는데 나는 proxy를 쓸거라서 외부에 server.js 를 만들어 작업 하도록 할 것 입니다.

 

/build/index.js 를 사용하지 않는 이유는

 

1. build 할 때 마다 초기화가 된다.

2. 복잡하다

 

그래서 프로젝트 최상단 위치에 server.js 파일을 만들고 다음과 같이 작업해줍니다.

 

다음 코드를 참고 해보세요.

 

import polka from 'polka';
import httpProxy from 'http-proxy';
import { handler } from './build/handler.js';

const targetURL = 'http://localhost:8080'; // 타겟 서버 URL

const proxy = httpProxy.createProxyServer({
  target: targetURL,
  changeOrigin: true
});

// CORS 헤더 추가
proxy.on('proxyRes', (proxyRes, req, res) => {
  res.setHeader('Access-Control-Allow-Origin', '*');
  res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
  res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization');
});

const server = polka();

server.use((req, res, next) => {
  console.log('🟡 요청 들어옴:', req.method, req.url);

  if (req.url.startsWith('/api/v1/')) {
    console.log(`➡️ 프록시 작동: ${req.method} ${req.url}`);

    proxy.web(req, res, (err) => {
      console.error('❌ 프록시 오류:', err);
    });

    return;
  }

  next();
});

// ✅ 나머지는 SvelteKit에게 넘김
server.use(handler);

// ✅ 서버 실행
server.listen(5173, () => {
  console.log('✅ Server running at http://localhost:5173');
});

 

node 서버를 쓸건데 유명한 express 를 사용하지 않고, polka 를 사용 할 것입니다.

polka 에 대한 정보는 여기에 자세하게 설명이 되어 있습니다.

 

https://www.npmjs.com/package/polka/v/0.4.0

polka

 

요약 하자면 express보다 30% 더 빠르고 경량화 되어 있고 간소화 되어있으며, 필요한 기능들만 들어가 있다고 보시면

됩니다.

 

고생 했던 부분이 있다면
server.use("/api/v1", ( req, res ) => {
    con
});

server.use("/api/v1", ( req, res ) => {
    console.log("TEST");
});

proxy를 쓸려고 /api/v1 으로 붙었을 때, 이 부분이 작동을 하지않았다는 것인데, polka 같은 경우 자동으로 붙지 않는 문제가 발생한다고 함.. 그래서 이 경우 위와 같이 모든 req를 받고 난 뒤, startsWith를 통해 걸러줘야 하는 것 으로 ... 작동 한다.