보통 프론트에서 백엔드 API 로 데이터 요청을 할때 같은 서버내에 프론트서버,백엔드서버 둘다 존재한다면
localhost.. 이런식으로 요청하거나 xxxx.co.kr 이런식으로 도메인을 따서 요청할 것이다.
그런 경우 .env 파일에 경로를 지정해서 import 해서 요청하는 방식을 적용할 것이다.
// .env 파일
VITE_API_BASE_URL=http://localhost:8081// api 요청 파일
const apiBaseUrl = import.meta.env.VITE_API_BASE_URL;
const login = (e : any) => {
const url = `${apiBaseUrl}/sign-api/sign-in`
}
위와 같은 식으로 말이다..
그러나 그것을 매번 소스코드에 입력하기도 귀찮고 보안상 그리 좋은 거 같지는 않다.
스벨트에 vite 를 적용했다면 다음과 같이 설정해보자
import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vite';
export default defineConfig({
plugins: [sveltekit()],
server: {
proxy: {
'/api': {
target: 'http://localhost:8081',
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, ''),
},
},
},
});위의 target은 실질적으로 백엔드 API 주소 를 말하며, '/api' 는 백엔드 API 주소를 치환하겠다는 말이다.
그럼 위 코드를 변경하면
// api 요청 파일
const login = (e : any) => {
const url = "/api/sign-api/sign-in"
}이런식으로
.env 파일이 필요 없어지고 긴 api 주소는 /api 문자열로 처리한다.
훨씬 깔끔한거 같다.
'Svelte.js' 카테고리의 다른 글
| [Svelte.js] 객체,배열 반복문 (0) | 2025.02.20 |
|---|---|
| [Svelte.js] build 시 console.log 제거(Feat.vite) (0) | 2025.02.20 |
| [Svelte.js] Dockerfile, dockerignore 설정 (0) | 2025.02.17 |
| [Svelte.js] node_modules의 css 파일을 전역으로 사용할 수 있게 설정해보자. (0) | 2025.02.17 |