Fix API URL for GitHub Pages deployment - use absolute URL for production, relative for development

Author: Amelia-Shin

package.json

@@ -11,7 +11,8 @@
     "build": "vite build",
     "preview": "vite preview",
     "predeploy": "pnpm run build",
-    "deploy": "npx gh-pages -d dist"
+    "deploy": "npx gh-pages -d dist",
+    "postbuild": "cp dist/index.html dist/404.html"
   },
   "dependencies": {
     "@tanstack/react-query": "^5.85.0",

src/entities/comment/api/CommentAPI.ts

@@ -3,7 +3,7 @@ import { CreateComment, CommentList, UpdateComment, LikeComment, Comment } from
 
 class CommentAPI extends ApiClient {
   constructor() {
-    super("/api/comments")
+    super("/comments")
   }
 
   /**

src/entities/post/api/PostAPI.ts

@@ -7,7 +7,7 @@ import { Post, PostItem, CreatePost, UpdatePost, Tag } from "../model/types"
  */
 class PostAPI extends ApiClient {
   constructor() {
-    super("/api/posts")
+    super("/posts")
   }
 
   /**

src/entities/user/api/UserAPI.ts

@@ -3,7 +3,7 @@ import { User } from "../model/types"
 
 class UserAPI extends ApiClient {
   constructor() {
-    super("/api/users")
+    super("/users")
   }
 
   /**

src/shared/api/api.ts

@@ -1,4 +1,9 @@
-const BASE_URL = import.meta.env.VITE_API_BASE_URL
+// GitHub Pages 배포 환경 감지
+const isGitHubPages = window.location.hostname === 'amelia-shin.github.io'
+
+// GitHub Pages에서는 전체 URL, 개발환경에서는 상대 경로
+const BASE_URL = isGitHubPages ? "https://dummyjson.com" : ""
+
 export const api = {
   get: <T>(path: string, init?: RequestInit) =>
     fetch(`${BASE_URL}${path}`, { ...init }).then((r) => r.json() as Promise<T>),
@@ -40,11 +45,18 @@ export class ApiClient {
    * @returns 전체 URL
    */
   private buildUrl(path: string): string {
-    // basePath가 이미 /api로 시작하면 중복 방지
+    // GitHub Pages 배포 환경 감지
+    const isGitHubPages = window.location.hostname === 'amelia-shin.github.io'
+    
+    // GitHub Pages에서는 전체 URL 사용
+    if (isGitHubPages) {
+      return `https://dummyjson.com${this.basePath}${path}`
+    }
+    
+    // 개발 환경에서는 상대 경로 사용
     if (this.basePath.startsWith("/api")) {
       return this.basePath + path
     }
-    // basePath가 비어있거나 /api로 시작하지 않으면 /api 추가
     return "/api" + this.basePath + path
   }
 

src/vite-env.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  readonly VITE_API_BASE_URL: string
+  // 필요한 VITE_ 변수들 추가
+  // readonly VITE_SOME_FLAG: string;
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv
+}

tsconfig.app.json

@@ -21,5 +21,5 @@
     "noFallthroughCasesInSwitch": true,
     "noUncheckedSideEffectImports": true
   },
-  "include": ["src"]
+  "include": ["src", "src/vite-env.d.ts"]
 }

vite.config.ts

@@ -2,7 +2,7 @@ import { defineConfig } from "vite"
 import react from "@vitejs/plugin-react"
 
 export default defineConfig(({ mode }) => ({
-  base: mode === "production" ? "/<리포지토리명>/" : "/",
+  base: mode === "production" ? "/front_6th_chapter2-3/" : "/",
   plugins: [react()],
   server: {
     proxy: {