diff --git a/.gitignore b/.gitignore
index 188d025a6fbae85d6d7ecf359443902b3f8fc217..f22c102305fa0499687270dd89aa450a9fd6b312 100644
--- a/.gitignore
+++ b/.gitignore
@@ -39,4 +39,6 @@ frontend/build
 !.vscode/extensions.json
 
 *.env
-*.local.env
\ No newline at end of file
+*.local.env
+*.env.development
+*.env.production
\ No newline at end of file
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 3eb0dafaae67c4b33f8419fdf06fc96a198d4c8e..e7676ec34aa98bc8be8448cf97b4741fcf5ac976 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -14,6 +14,7 @@
         "@testing-library/user-event": "^13.5.0",
         "axios": "^1.6.1",
         "base-64": "^1.0.0",
+        "cross-env": "^7.0.3",
         "express": "^4.18.2",
         "http-proxy-middleware": "^2.0.6",
         "jwt-decode": "^4.0.0",
@@ -6767,11 +6768,27 @@
         "node": ">=10"
       }
     },
+    "node_modules/cross-env": {
+      "version": "7.0.3",
+      "resolved": "https://registry.npmjs.org/cross-env/-/cross-env-7.0.3.tgz",
+      "integrity": "sha512-+/HKd6EgcQCJGh2PSjZuUitQBQynKor4wrFbRg4DtAgS1aWO+gU52xpH7M9ScGgXSYmAVS9bIJ8EzuaGw0oNAw==",
+      "dependencies": {
+        "cross-spawn": "^7.0.1"
+      },
+      "bin": {
+        "cross-env": "src/bin/cross-env.js",
+        "cross-env-shell": "src/bin/cross-env-shell.js"
+      },
+      "engines": {
+        "node": ">=10.14",
+        "npm": ">=6",
+        "yarn": ">=1"
+      }
+    },
     "node_modules/cross-spawn": {
       "version": "7.0.3",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
       "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
-      "dev": true,
       "dependencies": {
         "path-key": "^3.1.0",
         "shebang-command": "^2.0.0",
@@ -10516,8 +10533,7 @@
     "node_modules/isexe": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
-      "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
-      "dev": true
+      "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw=="
     },
     "node_modules/istanbul-lib-coverage": {
       "version": "3.2.2",
@@ -14003,7 +14019,6 @@
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
       "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
-      "dev": true,
       "engines": {
         "node": ">=8"
       }
@@ -16884,7 +16899,6 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
       "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
-      "dev": true,
       "dependencies": {
         "shebang-regex": "^3.0.0"
       },
@@ -16896,7 +16910,6 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
       "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
-      "dev": true,
       "engines": {
         "node": ">=8"
       }
@@ -18835,7 +18848,6 @@
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
       "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
-      "dev": true,
       "dependencies": {
         "isexe": "^2.0.0"
       },
diff --git a/frontend/package.json b/frontend/package.json
index a86c326434cd07675da084ef4fde165b50a62dd5..a9e588584fce5e0f42e8db336cd4e071a754d39f 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -9,6 +9,7 @@
     "@testing-library/user-event": "^13.5.0",
     "axios": "^1.6.1",
     "base-64": "^1.0.0",
+    "cross-env": "^7.0.3",
     "express": "^4.18.2",
     "http-proxy-middleware": "^2.0.6",
     "jwt-decode": "^4.0.0",
diff --git a/frontend/src/App.js b/frontend/src/App.js
index 8fb23ee25b40302b542ed6043f6630173cb11087..bd7bdbde55c3cf43fd8cebb55d820a0c93359542 100644
--- a/frontend/src/App.js
+++ b/frontend/src/App.js
@@ -82,7 +82,7 @@ function App() {
 
 async function requestLogout() {
   const response = await axios({
-    url: 'http://localhost:3000/auth/logout', // �듭떊�� �밸Ц��
+    url: `${process.env.REACT_APP_BACKEND_URL}/auth/logout`, // �듭떊�� �밸Ц��
     method: 'get', // �듭떊�� 諛⑹떇
   });
   return response;
@@ -90,7 +90,7 @@ async function requestLogout() {
 
 async function requestCheckSession() {
   const response = await axios({
-    url: 'http://localhost:3000/auth/session', // �듭떊�� �밸Ц��
+    url: `${process.env.REACT_APP_BACKEND_URL}/auth/session`, // �듭떊�� �밸Ц��
     method: 'get', // �듭떊�� 諛⑹떇
   });
   return response;
diff --git a/frontend/src/components/Article.js b/frontend/src/components/Article.js
index a6d66d7722eedc67828e514bb95d8ade169b83aa..dea99fa02c855d45c5ce4c0cf8d8eb2ff5e782d5 100644
--- a/frontend/src/components/Article.js
+++ b/frontend/src/components/Article.js
@@ -20,8 +20,8 @@ function Article({ data }) {
     // http://localhost:3000/uploads/21701487062905.png
     return (
       <img
-        src={`http://localhost:3000/${el.replaceAll("\\", "/").substring(7)}`}
-        alt={`http://localhost:3000/${el.replaceAll("\\", "/").substring(7)}`}
+        src={`${process.env.REACT_APP_BACKEND_URL}/${el.replaceAll("\\", "/").substring(7)}`}
+        alt={`${process.env.REACT_APP_BACKEND_URL}/${el.replaceAll("\\", "/").substring(7)}`}
         style={{ width: "100px", height: "100px" }} />
     )
   });
diff --git a/frontend/src/components/Comment.js b/frontend/src/components/Comment.js
index 186d98d8dea6b81a433ec8efa3c61b9f789faca4..9aad6054dc8fb8bdf7b72f7956c072c03e8880ce 100644
--- a/frontend/src/components/Comment.js
+++ b/frontend/src/components/Comment.js
@@ -24,7 +24,7 @@ function Comments({ data }) {
   function DeleteComment(e) {
     const data = { id: _id }
     axios
-      .delete(`http://localhost:3000/article/${params.id}/comment/${_id}`, data,
+      .delete(`${process.env.REACT_APP_BACKEND_URL}/article/${params.id}/comment/${_id}`, data,
         {
           headers: { "Content-Type": 'application/json' }
         })
diff --git a/frontend/src/components/GoogleLoginButton.js b/frontend/src/components/GoogleLoginButton.js
index d7f81263a3adf6e44bc359775f7aca6114add378..4dc2cee2bb15ba66876ea51b46626fe62f2c1d74 100644
--- a/frontend/src/components/GoogleLoginButton.js
+++ b/frontend/src/components/GoogleLoginButton.js
@@ -68,7 +68,7 @@ function b64DecodeUnicode(str) {
 
 async function requestLogin(payloadObj) {
   const response = await axios({
-    url: 'http://localhost:3000/auth/login', // �듭떊�� �밸Ц��
+    url: `${process.env.REACT_APP_BACKEND_URL}/auth/login`, // �듭떊�� �밸Ц��
     method: 'post', // �듭떊�� 諛⑹떇
     data: payloadObj
   });
diff --git a/frontend/src/pages/Main.js b/frontend/src/pages/Main.js
index 7b8e3e97a792e5fcf5e5eade9ef2255d52f0b836..d790042f5795801ab00db376694eb4029ac6eaa9 100644
--- a/frontend/src/pages/Main.js
+++ b/frontend/src/pages/Main.js
@@ -63,7 +63,7 @@ function Main() {
 
 async function requestSortArticle(crit) {
   const response = await axios({
-    url: `http://localhost:3000/article/?criteria=${crit}`, // �듭떊�� �밸Ц��
+    url: `${process.env.REACT_APP_BACKEND_URL}/article/?criteria=${crit}`, // �듭떊�� �밸Ц��
     method: 'get', // �듭떊�� 諛⑹떇
   });
   return response;
diff --git a/frontend/src/pages/MyPage.js b/frontend/src/pages/MyPage.js
index 8bfc74c173efbbcd04b85b413e988d63b93dc443..eadd984aedeb5dbf519b6fbe079e710e91e8e713 100644
--- a/frontend/src/pages/MyPage.js
+++ b/frontend/src/pages/MyPage.js
@@ -43,7 +43,7 @@ function MyPage() {
 
 async function requestArticles(id) {
   const response = await axios({
-    url: `http://localhost:3000/article/user/${id}`, // �듭떊�� �밸Ц��
+    url: `${process.env.REACT_APP_BACKEND_URL}/article/user/${id}`, // �듭떊�� �밸Ц��
     method: 'get', // �듭떊�� 諛⑹떇
   });
   return response;
diff --git a/frontend/src/pages/PostRead.js b/frontend/src/pages/PostRead.js
index 65dcfd6d2328274e137c15febaa1a111b7a79234..362769695d01f272adebd6ba7ee4b6d6c5fb0b72 100644
--- a/frontend/src/pages/PostRead.js
+++ b/frontend/src/pages/PostRead.js
@@ -45,7 +45,7 @@ function PostRead() {
   }, []);
 
   function SetLike() {
-    axios.put(`http://localhost:3000/article/${params.id}/like`)
+    axios.put(`${process.env.REACT_APP_BACKEND_URL}/article/${params.id}/like`)
       .then(res => {
         return requestLoadArticleById(params.id)
       })
@@ -69,7 +69,7 @@ function PostRead() {
       return
     }
     const data = { content: inputComment }
-    axios.post(`http://localhost:3000/article/${params.id}/comment`, data,
+    axios.post(`${process.env.REACT_APP_BACKEND_URL}/article/${params.id}/comment`, data,
       {
         headers: { "Content-Type": 'application/json' }
       })
@@ -146,7 +146,7 @@ function PostRead() {
 
 async function requestLoadArticleById(id) {
   const response = await axios({
-    url: `http://localhost:3000/article/${id}`, // �듭떊�� �밸Ц��
+    url: `${process.env.REACT_APP_BACKEND_URL}/article/${id}`, // �듭떊�� �밸Ц��
     method: 'get', // �듭떊�� 諛⑹떇
   });
   return response;
@@ -154,7 +154,7 @@ async function requestLoadArticleById(id) {
 
 async function requestDeleteArticleById(id) {
   const response = await axios({
-    url: `http://localhost:3000/article/${id}`, // �듭떊�� �밸Ц��
+    url: `${process.env.REACT_APP_BACKEND_URL}/article/${id}`, // �듭떊�� �밸Ц��
     method: 'delete', // �듭떊�� 諛⑹떇
   });
   return response;
diff --git a/frontend/src/pages/PostWrite.js b/frontend/src/pages/PostWrite.js
index 9cd9cf3c7511160566cb05ba7e0d64d3a47f8ecc..51ba8a0f59348efcb004be6f43289058298430f4 100644
--- a/frontend/src/pages/PostWrite.js
+++ b/frontend/src/pages/PostWrite.js
@@ -114,7 +114,7 @@ function PostWrite() {
     formData.append("latitude", location.center.lat);
     formData.append("longitude", location.center.lng);
     axios
-      .post("http://localhost:3000/article", formData,
+      .post(`${process.env.REACT_APP_BACKEND_URL}/article`, formData,
         {
           headers: { "Content-Type": "multipart/form-data" }
         })
diff --git a/frontend/src/pages/Search.js b/frontend/src/pages/Search.js
index 24fa73f40a1c092e95d25fd2b3c020105f3b5b84..5f164ecf85d730a67fc18453b4371a4944ad3922 100644
--- a/frontend/src/pages/Search.js
+++ b/frontend/src/pages/Search.js
@@ -87,7 +87,7 @@ function Search(props) {
 
 async function requestLoadArticleByKeyword(keyword) {
   const response = await axios({
-    url: `http://localhost:3000/article/?keyword=${keyword}`, // �듭떊�� �밸Ц��
+    url: `${process.env.REACT_APP_BACKEND_URL}/article/?keyword=${keyword}`, // �듭떊�� �밸Ц��
     method: 'get', // �듭떊�� 諛⑹떇
   });
   return response;