build: setup proxy

.eslintignore

+/src/setupProxy.js

package-lock.json

@@ -8,6 +8,7 @@
       "name": "ajou-pay-client-user",
       "version": "1.0.0",
       "dependencies": {
+        "http-proxy-middleware": "^2.0.6",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-router-dom": "^6.16.0",

package.json

@@ -3,6 +3,7 @@
   "version": "1.0.0",
   "private": true,
   "dependencies": {
+    "http-proxy-middleware": "^2.0.6",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.16.0",

src/common/utils/api.ts

@@ -19,10 +19,10 @@ const PROD_API_URL = 'https://ajou-eats-api.seunglab.dev';
 const DEV_SOCKET_URL = 'ws://localhost:8080';
 const PROD_SOCKET_URL = 'wss://ajou-eats-api.seunglab.dev';
 
-const API_URL = process.env.NODE_ENV === 'production' ? PROD_API_URL : DEV_API_URL;
-// const API_URL = PROD_API_URL;
-const SOCKET_URL = process.env.NODE_ENV === 'production' ? PROD_SOCKET_URL : DEV_SOCKET_URL;
-// const SOCKET_URL = PROD_SOCKET_URL;
+// const API_URL = process.env.NODE_ENV === 'production' ? PROD_API_URL : DEV_API_URL;
+const API_URL = PROD_API_URL;
+// const SOCKET_URL = process.env.NODE_ENV === 'production' ? PROD_SOCKET_URL : DEV_SOCKET_URL;
+const SOCKET_URL = PROD_SOCKET_URL;
 
 /**
  * @name fetchData
@@ -42,7 +42,7 @@ async function fetchData<T> (
     let status;
 	
     try {
-        request = await fetch(`${API_URL}${url}`, {
+        request = await fetch(`/api${url}`, {
             method,
             headers: {
                 'Content-Type': 'application/json',

src/setupProxy.js

+const { createProxyMiddleware } = require('http-proxy-middleware');
+
+module.exports = function (app) {
+    app.use(
+        createProxyMiddleware('/api', {
+            target: 'https://ajou-eats-api.seunglab.dev',
+            changeOrigin: true,
+        }),
+    );
+};