<div id="readability-page-1" class="page"><div id="body"> <p> <a href="/blog/category/dev">dev</a> |
2025-05-18 </p>  <div><p>스벨트킷에서 <code>src</code>나 <code>static</code> 디렉토리가 아닌 다른 곳의 파일을 브라우저에서 접근하면 아래와 같은 403 오류가 발생한다.</p>

<pre>403 Restricted

The request url "/Users/hyeonseok/repo/photo-date/uploads/c8a1cbda-d16f-4289-a2b0-318f1ddfea6e.HEIC" is outside of Vite serving allow list.

- /Users/hyeonseok/repo/photo-date/src/lib
- /Users/hyeonseok/repo/photo-date/src/routes
- /Users/hyeonseok/repo/photo-date/.svelte-kit
- /Users/hyeonseok/repo/photo-date/src
- /Users/hyeonseok/repo/photo-date/node_modules

Refer to docs https://vite.dev/config/server-options.html#server-fs-allow for configurations and more details.</pre>

<p>위에 나열된 디렉토리가 아닌 곳에 있는 파일에 접근하려면 <code>server.fs.allow</code>에 경로를 추가해 주면 된다. <code>vite.config.ts</code>에 아래와 같이 추가하면 해결된다.</p>

<pre><code>export default defineConfig({
  plugins: [sveltekit()],
  server: {
    fs: {
      allow: ['./uploads']
    }
  }
});</code></pre>

<p>알고나면 쉬운데 챗지피티나 제미나이나 둘 다 <code>svelte.config.js</code>에 <code>vite</code>나 <code>vitePlugin</code>을 추가하라고 해서 한참을 삽질하다가 혹시나 해서 <code>vite.config.ts</code>에 넣으니 바로 된다.</p>

<p>기본 디렉토리인 <code>static/</code>을 사용하면 해결되기는 하는 문제인데 상용 환경에는 <code>static</code> 디렉토리가 없고 <code>client/</code>에 내용이 복사된다. 동적으로 스태틱 파일을 저장하고 싶은데 상용과 개발이 서로 달라서 코드를 분기해 줘야 했다. 위의 방법으로 스태틱 디렉토리를 추가하면 개발 환경과 상용 환경 양쪽에서 같은 디렉토리를 사용하도록 설정할 수 있다. 상용에서는 어차피 엔진엑스를 사용하기 때문에 적절히 <code>root</code> 하나 추가해 주면 된다.</p></div>      </div></div>

신현석(Hyeonseok Shin)

스벨트킷에서 src나 static 디렉토리가 아닌 다른 곳의 파일을 브라우저에서 접근하면 아래와 같은 403 오류가 발생한다.
403 Restricted
The request url "/Users/hyeonseok/repo/photo-date/uploads/c8a1cbda-d16f-4289-a2b0-318f1ddfea6e.HEIC" is outside of Vite serving allow list.
- /Users/hyeonseok/repo/photo-date/src/lib
- /Users/hyeonseok/repo/photo-date/src/routes
- /Users/hyeonseok/repo/photo-date/.svelte-kit
- /Users/hyeonseok/repo/photo-date/src
- /Users/hyeonseok/repo/photo-date/node_modules
Refer to docs https://vite.dev/config/server-options.html#server-fs-allow for configurations and more details.
위에 나열된 디렉토리가 아닌 곳에 있는 파일에 접근하려면 server.fs.allow에 경로를 추가해 주면 된다. vite.config.ts에 아래와 같이 추가하면 해결된다.
export default defineConfig({
  plugins: [sveltekit()],
  server: {
    fs: {
      allow: ['./uploads']
    }
  }
});
알고나면 쉬운데 챗지피티나 제미나이나 둘 다 svelte.config.js에 vite나 vitePlugin을 추가하라고 해서 한참을 삽질하다가 혹시나 해서 vite.config.ts에 넣으니 바로 된다.
기본 디렉토리인 static/을 사용하면 해결되기는 하는 문제인데 상용 환경에는 static 디렉토리가 없고 client/에 내용이 복사된다. 동적으로 스태틱 파일을 저장하고 싶은데 상용과 개발이 서로 달라서 코드를 분기해 줘야 했다. 위의 방법으로 스태틱 디렉토리를 추가하면 개발 환경과 상용 환경 양쪽에서 같은 디렉토리를 사용하도록 설정할 수 있다. 상용에서는 어차피 엔진엑스를 사용하기 때문에 적절히 root 하나 추가해 주면 된다.

Vite 개발 환경에 정적 파일 디렉토리 추가하기

댓글