diff --git a/frontend/web/src/lib/api.ts b/frontend/web/src/lib/api.ts
new file mode 100644
index 0000000..c605f30
--- /dev/null
+++ b/frontend/web/src/lib/api.ts
@@ -0,0 +1 @@
+export const APIUrl = import.meta.env.DEV ? 'http://localhost:8000' : '/api'
diff --git a/frontend/web/src/lib/components/Filepreview.svelte b/frontend/web/src/lib/components/Filepreview.svelte
index 0d1ab8e..3061149 100644
--- a/frontend/web/src/lib/components/Filepreview.svelte
+++ b/frontend/web/src/lib/components/Filepreview.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { onMount } from 'svelte'
+  import { APIUrl } from '$lib/api';
 
 	export let filePath: string
 	export let fileType: string
@@ -12,7 +13,7 @@
 
 	async function loadFile() {
 		try {
-			const response = await fetch(`http://localhost:8000/stream/file/${fileId}`)
+			const response = await fetch(`${APIUrl}/stream/file/${fileId}`)
 			if (!response.ok) throw new Error('檔案載入失敗')
 
 			if (fileType === 'txt') {
diff --git a/frontend/web/src/lib/stores/player.ts b/frontend/web/src/lib/stores/player.ts
index f9d89a7..4c87ff5 100644
--- a/frontend/web/src/lib/stores/player.ts
+++ b/frontend/web/src/lib/stores/player.ts
@@ -2,6 +2,7 @@ import { writable } from 'svelte/store'
 import type { MusicTrack, Video } from '$lib/types'
 import type { MediaPlayerElement } from 'vidstack/elements'
 import { playerliststat } from '$lib/stores/playerlist'
+import { APIUrl } from '$lib/api'
 
 interface PlayerState {
 	type: 'video' | 'audio' | null
@@ -50,7 +51,7 @@ function createPlayerState() {
 			return
 		}
 		try {
-			currentState.player.src = `http://localhost:8000/stream/music/${track.id}`
+			currentState.player.src = `${APIUrl}/stream/music/${track.id}`
 			await new Promise<void>((resolve, reject) => {
 				const onCanPlay = () => {
 					currentState.player?.removeEventListener('can-play', onCanPlay)
diff --git a/frontend/web/src/routes/app/+layout.svelte b/frontend/web/src/routes/app/+layout.svelte
index b21024c..eece155 100644
--- a/frontend/web/src/routes/app/+layout.svelte
+++ b/frontend/web/src/routes/app/+layout.svelte
@@ -20,6 +20,7 @@
 	import type { MusicTrack, Video } from '$lib/types'
 	import Cd from '$lib/image/cd.svelte'
 	import Cookies from 'js-cookie'
+  import { APIUrl } from '$lib/api'
 
 	let player = $state<MediaPlayerElement | null>(null)
 
@@ -77,7 +78,7 @@
 		}
 	})
 	function getCoverArtUrl(coverArt: string) {
-		return `http://localhost:8000/file/image?image_id=${coverArt}&image_size=300`
+		return `${APIUrl}/file/image?image_id=${coverArt}&image_size=300`
 	}
 </script>
 
diff --git a/frontend/web/src/routes/app/+page.svelte b/frontend/web/src/routes/app/+page.svelte
index 18585e7..29e681e 100644
--- a/frontend/web/src/routes/app/+page.svelte
+++ b/frontend/web/src/routes/app/+page.svelte
@@ -7,6 +7,7 @@
 	import CD from '$lib/image/cd.svelte'
 	import Album from '$lib/image/album.svelte'
 	import { goto } from '$app/navigation'
+  import { APIUrl } from '$lib/api'
 	export let data
 	const { info, error, status } = data
 
@@ -24,7 +25,7 @@
 		playVideo(video)
 	}
 	function getCoverArtUrl(coverArt: string) {
-		return `http://localhost:8000/file/image?image_id=${coverArt}&image_size=400`
+		return `${APIUrl}/file/image?image_id=${coverArt}&image_size=400`
 	}
 </script>
 
diff --git a/frontend/web/src/routes/app/+page.ts b/frontend/web/src/routes/app/+page.ts
index ff66e86..b035272 100644
--- a/frontend/web/src/routes/app/+page.ts
+++ b/frontend/web/src/routes/app/+page.ts
@@ -1,8 +1,9 @@
 import type { PageLoad } from './$types'
+import { APIUrl } from '$lib/api'
 
 export const load = (async ({ fetch }) => {
 	try {
-		const responsemusic = await fetch('http://localhost:8000/file/info')
+		const responsemusic = await fetch(`${APIUrl}/file/info`)
 
 		if (!responsemusic.ok) {
 			return {
diff --git a/frontend/web/src/routes/app/albums/+page.svelte b/frontend/web/src/routes/app/albums/+page.svelte
index 9a05b65..a2e1918 100644
--- a/frontend/web/src/routes/app/albums/+page.svelte
+++ b/frontend/web/src/routes/app/albums/+page.svelte
@@ -5,13 +5,14 @@
 	import { getContext } from 'svelte'
 	import type { MusicTrack } from '$lib/types'
 	import Album from '$lib/image/album.svelte'
+  import { APIUrl } from '$lib/api'
 
 	export let data: PageData
 	const { albums, error, status } = data
 	const playMusic = getContext<(track: MusicTrack) => void>('playMusic')
 
 	function getCoverArtUrl(coverArt: string) {
-		return `http://localhost:8000/file/image?image_id=${coverArt}&image_size=400`
+		return `${APIUrl}/file/image?image_id=${coverArt}&image_size=400`
 	}
 
 	function playAlbum(album: any) {
diff --git a/frontend/web/src/routes/app/albums/+page.ts b/frontend/web/src/routes/app/albums/+page.ts
index e0320d0..69e0f46 100644
--- a/frontend/web/src/routes/app/albums/+page.ts
+++ b/frontend/web/src/routes/app/albums/+page.ts
@@ -1,8 +1,9 @@
 import type { PageLoad } from './$types'
+import { APIUrl } from '$lib/api'
 
 export const load = (async ({ fetch }) => {
 	try {
-		const response = await fetch('http://localhost:8000/file/album')
+		const response = await fetch(`${APIUrl}/file/album`)
 
 		if (!response.ok) {
 			return {
diff --git a/frontend/web/src/routes/app/albums/[albumid]/+page.svelte b/frontend/web/src/routes/app/albums/[albumid]/+page.svelte
index 74d978c..fe9843f 100644
--- a/frontend/web/src/routes/app/albums/[albumid]/+page.svelte
+++ b/frontend/web/src/routes/app/albums/[albumid]/+page.svelte
@@ -4,6 +4,7 @@
 	import { getContext } from 'svelte'
 	import type { MusicTrack } from '$lib/types'
 	import Album from '$lib/image/album.svelte'
+  import { APIUrl } from '$lib/api'
 
 	export let data: PageData
 	const { album } = data
@@ -11,7 +12,7 @@
 	const playMusiclist = getContext<(track: MusicTrack) => void>('playMusiclist')
 
 	function getCoverArtUrl(coverArt: string) {
-		return `http://localhost:8000/file/image?image_id=${coverArt}&image_size=400`
+		return `${APIUrl}/file/image?image_id=${coverArt}&image_size=400`
 	}
 
 	function formatDuration(seconds: number) {
diff --git a/frontend/web/src/routes/app/albums/[albumid]/+page.ts b/frontend/web/src/routes/app/albums/[albumid]/+page.ts
index ca63434..479cddb 100644
--- a/frontend/web/src/routes/app/albums/[albumid]/+page.ts
+++ b/frontend/web/src/routes/app/albums/[albumid]/+page.ts
@@ -1,7 +1,8 @@
 import type { PageLoad } from './$types'
+import { APIUrl } from '$lib/api'
 
 export const load: PageLoad = async ({ fetch, params }) => {
-	const response = await fetch(`http://localhost:8000/file/album?album_id=${params.albumid}`)
+	const response = await fetch(`${APIUrl}/file/album?album_id=${params.albumid}`)
 	const album = await response.json()
 	return { album }
 }
diff --git a/frontend/web/src/routes/app/file/+page.ts b/frontend/web/src/routes/app/file/+page.ts
index 0f55842..2abf710 100644
--- a/frontend/web/src/routes/app/file/+page.ts
+++ b/frontend/web/src/routes/app/file/+page.ts
@@ -1,8 +1,9 @@
 import type { PageLoad } from './$types'
+import { APIUrl } from '$lib/api'
 
 export const load = (async ({ fetch }) => {
 	try {
-		const response = await fetch('http://localhost:8000/file/file')
+		const response = await fetch(`${APIUrl}/file/file`)
 
 		if (!response.ok) {
 			return {
diff --git a/frontend/web/src/routes/app/music/+page.svelte b/frontend/web/src/routes/app/music/+page.svelte
index 5ba8ab0..bebe53e 100644
--- a/frontend/web/src/routes/app/music/+page.svelte
+++ b/frontend/web/src/routes/app/music/+page.svelte
@@ -4,6 +4,7 @@
 	import type { MusicTrack } from '$lib/types'
 	import { Play } from 'lucide-svelte'
 	import CD from '$lib/image/cd.svelte'
+  import { APIUrl } from '$lib/api'
 	const { musics, error, status } = data
 	const playMusic = getContext<(track: MusicTrack) => void>('playMusic')
 
@@ -12,7 +13,7 @@
 	}
 
 	function getCoverArtUrl(coverArt: string) {
-		return `http://localhost:8000/file/image?image_id=${coverArt}&image_size=400`
+		return `${APIUrl}/file/image?image_id=${coverArt}&image_size=400`
 	}
 </script>
 
diff --git a/frontend/web/src/routes/app/music/+page.ts b/frontend/web/src/routes/app/music/+page.ts
index ea5d946..8722fbd 100644
--- a/frontend/web/src/routes/app/music/+page.ts
+++ b/frontend/web/src/routes/app/music/+page.ts
@@ -1,8 +1,9 @@
 import type { PageLoad } from './$types'
+import { APIUrl } from '$lib/api'
 
 export const load = (async ({ fetch }) => {
 	try {
-		const response = await fetch('http://localhost:8000/file/music')
+		const response = await fetch(`${APIUrl}/file/music`)
 
 		if (!response.ok) {
 			return {
diff --git a/frontend/web/src/routes/app/setting/+page.svelte b/frontend/web/src/routes/app/setting/+page.svelte
index c889de1..8da1dad 100644
--- a/frontend/web/src/routes/app/setting/+page.svelte
+++ b/frontend/web/src/routes/app/setting/+page.svelte
@@ -2,6 +2,8 @@
 	import { on } from 'svelte/events'
 	import type { PageData } from './$types'
 	import { Folder, File } from 'lucide-svelte'
+  import { APIUrl } from '$lib/api'
+
 	let { data }: { data: PageData } = $props()
 
 	interface DirectoryContent {
@@ -27,7 +29,7 @@
 	async function fetchDirs(path: string) {
 		try {
 			const response = await fetch(
-				`http://localhost:8000/setting/dir?path=${encodeURIComponent(path)}`
+				`${APIUrl}/setting/dir?path=${encodeURIComponent(path)}`
 			)
 			const data: DirectoryContent = await response.json()
 
@@ -69,7 +71,7 @@
 	async function handleScan() {
 		try {
 			scanStatus = '掃描中...'
-			const response = await fetch(`http://localhost:8000/file/parse_file`, {
+			const response = await fetch(`${APIUrl}/file/parse_file`, {
 				method: 'POST',
 				headers: {
 					'Content-Type': 'application/json'
@@ -101,7 +103,7 @@
 	async function handleScanDir() {
 		try {
 			scanStatus = '掃描中...'
-			const response = await fetch(`http://localhost:8000/file/scanall`, {
+			const response = await fetch(`${APIUrl}/file/scanall`, {
 				method: 'POST',
 				headers: {
 					'Content-Type': 'application/json'
diff --git a/frontend/web/src/routes/app/video/+page.svelte b/frontend/web/src/routes/app/video/+page.svelte
index 8629bd9..bc7f9ce 100644
--- a/frontend/web/src/routes/app/video/+page.svelte
+++ b/frontend/web/src/routes/app/video/+page.svelte
@@ -3,6 +3,7 @@
 	import { getContext } from 'svelte'
 	import type { Video } from '$lib/types'
 	import { Play } from 'lucide-svelte'
+  import { APIUrl } from '$lib/api'
 
 	export let data
 	const { videos, error, status } = data
@@ -23,7 +24,7 @@
 		return `${minutes}:${remainingSeconds.toString().padStart(2, '0')}`
 	}
 	function getCoverArtUrl(coverArt: string) {
-		return `http://localhost:8000/file/image?image_id=${coverArt}&image_size=400`
+		return `${APIUrl}/file/image?image_id=${coverArt}&image_size=400`
 	}
 </script>
 
diff --git a/frontend/web/src/routes/app/video/+page.ts b/frontend/web/src/routes/app/video/+page.ts
index 7a595e1..4b2287e 100644
--- a/frontend/web/src/routes/app/video/+page.ts
+++ b/frontend/web/src/routes/app/video/+page.ts
@@ -1,8 +1,9 @@
 import type { PageLoad } from './$types'
+import { APIUrl } from '$lib/api'
 
 export const load = (async ({ fetch }) => {
 	try {
-		const response = await fetch('http://localhost:8000/file/video')
+		const response = await fetch(`${APIUrl}/file/video`)
 
 		if (!response.ok) {
 			return {
diff --git a/frontend/web/src/routes/app/videoplay/+page.svelte b/frontend/web/src/routes/app/videoplay/+page.svelte
index 50ed7af..be300fa 100644
--- a/frontend/web/src/routes/app/videoplay/+page.svelte
+++ b/frontend/web/src/routes/app/videoplay/+page.svelte
@@ -4,6 +4,7 @@
 	import type { PageData } from './$types'
 	import 'vidstack/bundle'
 	import type { MediaPlayerElement } from 'vidstack/elements'
+  import { APIUrl } from '$lib/api'
 
 	export let data: PageData
 	const { video } = data
@@ -42,7 +43,7 @@
 <div class="fixed inset-0 bg-black">
 	<media-player bind:this={player} class="h-full" autoplay>
 		<media-provider>
-			<source src={`http://localhost:8000/stream/video/${video.id}`} type="video/mp4" />
+			<source src={`${APIUrl}/stream/video/${video.id}`} type="video/mp4" />
 		</media-provider>
 		<media-video-layout>
 			<media-controls></media-controls>
diff --git a/frontend/web/src/routes/app/videoplay/+page.ts b/frontend/web/src/routes/app/videoplay/+page.ts
index c369fa4..2d3718b 100644
--- a/frontend/web/src/routes/app/videoplay/+page.ts
+++ b/frontend/web/src/routes/app/videoplay/+page.ts
@@ -1,5 +1,6 @@
 import type { PageLoad } from './$types'
 import { error } from '@sveltejs/kit'
+import { APIUrl } from '$lib/api'
 
 export const load: PageLoad = async ({ url, fetch }) => {
 	const videoId = url.searchParams.get('id')
@@ -9,7 +10,7 @@ export const load: PageLoad = async ({ url, fetch }) => {
 	}
 
 	try {
-		const response = await fetch(`http://localhost:8000/file/video?video_id=${videoId}`)
+		const response = await fetch(`${APIUrl}/file/video?video_id=${videoId}`)
 		if (!response.ok) throw new Error('影片載入失敗')
 
 		const video = await response.json()
diff --git a/frontend/web/src/routes/login/+page.svelte b/frontend/web/src/routes/login/+page.svelte
index 2f30c10..b7a641a 100644
--- a/frontend/web/src/routes/login/+page.svelte
+++ b/frontend/web/src/routes/login/+page.svelte
@@ -2,6 +2,7 @@
 	import { goto } from '$app/navigation'
 	import { Music } from 'lucide-svelte'
 	import Cookies from 'js-cookie'
+  import { APIUrl } from '$lib/api';
 
 	interface LoginResponse {
 		access_token: string
@@ -20,7 +21,7 @@
 		}
 
 		try {
-			const response = await fetch('http://localhost:8000/auth/login', {
+			const response = await fetch(`${APIUrl}/auth/login`, {
 				method: 'POST',
 				headers: {
 					'Content-Type': 'application/json'
diff --git a/frontend/web/vite.config.ts b/frontend/web/vite.config.ts
index a215d01..1320fe2 100644
--- a/frontend/web/vite.config.ts
+++ b/frontend/web/vite.config.ts
@@ -3,5 +3,10 @@ import { vite as vidstack } from 'vidstack/plugins'
 import { defineConfig } from 'vite'
 
 export default defineConfig({
-	plugins: [vidstack(), sveltekit()]
+	plugins: [vidstack(), sveltekit()],
+	server: {
+		proxy: {
+			'/api': 'http://localhost:8000'
+		}
+	}
 })