Merge pull request 'Refactor environment configuration: update package.json scripts to use env-cmd for different environments and replace process.env.NEXT_PUBLIC_API_HOST_URL with Config().baseUrl in API calls across multiple components.' (#75) from feature/chore-env into dev

Reviewed-on: #75

.env.localhost

@@ -0,0 +1,28 @@
+NEXT_PUBLIC_API_SERVER_PATH="https://dev-api.hanasys.jp"
+
+NEXT_PUBLIC_HOST_URL="//1.248.227.176:4000"
+
+NEXT_PUBLIC_API_HOST_URL="http://localhost:3000"
+
+SESSION_SECRET="i3iHH1yp2/2SpQSIySQ4bpyc4g0D+zCF9FAn5xUG0+Y="
+
+# NEXT_PUBLIC_CONVERTER_API_URL="https://v2.convertapi.com/convert/dwg/to/png?Secret=secret_bV5zuYMyyIYFlOb3"
+# NEXT_PUBLIC_CONVERTER_API_URL="https://v2.convertapi.com/convert/dwg/to/png?Secret=secret_yAS4QDalL9jgQ7vS"
+NEXT_PUBLIC_CONVERTER_API_URL="https://v2.convertapi.com/convert/dwg/to/png?Secret=secret_a0FLEK6M2oTpXInK"
+
+NEXT_PUBLIC_Q_ORDER_AUTO_LOGIN_URL="http://q-order-stg.q-cells.jp:8120/eos/login/autoLogin"
+NEXT_PUBLIC_Q_MUSUBI_AUTO_LOGIN_URL="http://q-musubi-stg.q-cells.jp:8120/qm/login/autoLogin"
+
+# 테스트용
+# AWS_REGION="ap-northeast-2"
+# AMPLIFY_BUCKET="interplug"
+# AWS_ACCESS_KEY_ID="AKIAVWMWJCUXFHEAZ4FR"
+# AWS_SECRET_ACCESS_KEY="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"
+# NEXT_PUBLIC_AWS_S3_BASE_URL="https://interplug.s3.ap-northeast-2.amazonaws.com"
+
+# 실제 일본 서버
+AWS_REGION="ap-northeast-1"
+AMPLIFY_BUCKET="files.hanasys.jp"
+AWS_ACCESS_KEY_ID="AKIA3K4QWLZHFZRJOM2E"
+AWS_SECRET_ACCESS_KEY="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"
+NEXT_PUBLIC_AWS_S3_BASE_URL="//files.hanasys.jp"

package.json

@@ -3,11 +3,12 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "next dev",
-    "build": "next build",
-    "start:cluster1": "next start -p 5000",
-    "start:cluster2": "next start -p 5001",
-    "start:dev": "next start -p 5010",
+    "dev": "env-cmd -f .env.localhost next dev",
+    "build": "env-cmd -f .env.productionnext build",
+    "build:dev": "env-cmd -f .env.development next build",
+    "start:cluster1": "env-cmd -f .env.production next start -p 5000",
+    "start:cluster2": "env-cmd -f .env.production next start -p 5001",
+    "start:dev": "env-cmd -f .env.development next start -p 5010",
     "lint": "next lint",
     "serve": "node server.js"
   },
@@ -18,6 +19,7 @@
     "big.js": "^6.2.2",
     "chart.js": "^4.4.6",
     "dayjs": "^1.11.13",
+    "env-cmd": "^10.1.0",
     "fabric": "^5.3.0",
     "framer-motion": "^11.2.13",
     "fs": "^0.0.1-security",

src/components/Main.jsx

@@ -14,6 +14,7 @@ import { sessionStore } from '@/store/commonAtom'
 import { isObjectNotEmpty } from '@/util/common-utils'
 
 import BoardDetailModal from './community/modal/BoardDetailModal'
+import Config from '@/config/config.export'
 
 export default function MainPage() {
   const [sessionState, setSessionState] = useRecoilState(sessionStore)
@@ -135,6 +136,11 @@ export default function MainPage() {
           <ChangePasswordPop setChagePasswordPopOpen={setChagePasswordPopOpen} />
         </>
       )}
+      {Config().mode}
+      <br />
+      {Config().baseUrl}
+      <br />
+      {process.env.NEXT_PUBLIC_API_HOST_URL}
     </>
   )
 }

src/config/config.common.js

@@ -0,0 +1,11 @@
+// local, development, production 과 관계없이 동일한 값으로 반환되는 부분은 해당 함수의 return 되는 부분만 수정하면 됩니다. (달라져야 하는 값이 아닌, 같은 값에 대해서는 local, development, production 파일을 모두 수정할 필요가 없어지게 됩니다.)
+export default function getConfigs(params) {
+  // local, development, production 마다 달라지는 값
+  const { baseUrl, mode } = params
+
+  // 공통으로 반환되는 구조
+  return {
+    baseUrl,
+    mode,
+  }
+}

src/config/config.development.js

@@ -0,0 +1,13 @@
+import getConfigs from './config.common'
+
+// 환경마다 달라져야 할 변수, 값들을 정의합니다. (여기는 development 환경에 맞는 값을 지정합니다.)
+const baseUrl = 'https://dev.hanssys.jp'
+const mode = 'development'
+
+// 환경마다 달라져야 할 값들을 getConfig 함수에 전달합니다.
+const configDevelopment = getConfigs({
+  baseUrl,
+  mode,
+})
+
+export default configDevelopment

src/config/config.export.js

@@ -0,0 +1,19 @@
+import configDevelopment from './config.development'
+import configLocal from './config.local'
+import configProduction from './config.production'
+
+// 클라이언트에서는 이 함수를 사용하여 config 값을 참조합니다.
+const Config = () => {
+  switch (process.env.NEXT_PUBLIC_RUN_MODE) {
+    case 'local':
+      return configLocal
+    case 'development':
+      return configDevelopment
+    case 'production':
+      return configProduction
+    default:
+      return configLocal
+  }
+}
+
+export default Config

src/config/config.local.js

@@ -0,0 +1,13 @@
+import getConfigs from './config.common'
+
+// 환경마다 달라져야 할 변수, 값들을 정의합니다. (여기는 local 환경에 맞는 값을 지정합니다.)
+const baseUrl = 'http://localhost:3000'
+const mode = 'local'
+
+// 환경마다 달라져야 할 값들을 getConfig 함수에 전달합니다.
+const configLocal = getConfigs({
+  baseUrl,
+  mode,
+})
+
+export default configLocal

src/config/config.production.js

@@ -0,0 +1,13 @@
+import getConfigs from './config.common'
+
+// 환경마다 달라져야 할 변수, 값들을 정의합니다. (여기는 production 환경에 맞는 값을 지정합니다.)
+const baseUrl = 'https://www.hanasys.jp'
+const mode = 'production'
+
+// 환경마다 달라져야 할 값들을 getConfig 함수에 전달합니다.
+const configProduction = getConfigs({
+  baseUrl,
+  mode,
+})
+
+export default configProduction

src/hooks/common/useRefFiles.js

@@ -8,6 +8,7 @@ import { useCanvas } from '@/hooks/useCanvas'
 import { deleteBackGroundImage, setBackGroundImage } from '@/lib/imageActions'
 import { settingModalFirstOptionsState } from '@/store/settingAtom'
 import { popSpinnerState } from '@/store/popupAtom'
+import Config from '@/config/config.export'
 
 /**
  * 배경 이미지 관리
@@ -97,7 +98,7 @@ export function useRefFiles() {
         setPopSpinnerStore(true)
         console.log('🚀 ~ handleFileDelete ~ handleFileDelete:', refImage)
         console.log('🚀 ~ handleFileDelete ~ currentCanvasPlan.bgImageName:', currentCanvasPlan.bgImageName)
-        await del({ url: `${process.env.NEXT_PUBLIC_API_HOST_URL}/api/image/upload?fileName=${currentCanvasPlan.bgImageName}` })
+        await del({ url: `${Config().baseUrl}/api/image/upload?fileName=${currentCanvasPlan.bgImageName}` })
         setCurrentBgImage(null)
         await deleteBackGroundImage({
           objectId: currentCanvasPlan.id,
@@ -118,7 +119,7 @@ export function useRefFiles() {
       confirmFn: async () => {
         console.log('🚀 ~ handleAddressDelete ~ handleAddressDelete:', refImage)
         console.log('🚀 ~ handleAddressDelete ~ currentCanvasPlan.bgImageName:', currentCanvasPlan.bgImageName)
-        await del({ url: `${process.env.NEXT_PUBLIC_API_HOST_URL}/api/image/map?fileName=${currentCanvasPlan.bgImageName}` })
+        await del({ url: `${Config().baseUrl}/api/image/map?fileName=${currentCanvasPlan.bgImageName}` })
         setMapPositionAddress('')
         setCurrentBgImage(null)
         await deleteBackGroundImage({
@@ -149,7 +150,7 @@ export function useRefFiles() {
     }))
 
     const res = await get({
-      url: `${process.env.NEXT_PUBLIC_API_HOST_URL}/api/image/map?q=${queryRef.current.value}&fileNm=${currentCanvasPlan.id}&zoom=20`,
+      url: `${Config().baseUrl}/api/image/map?q=${queryRef.current.value}&fileNm=${currentCanvasPlan.id}&zoom=20`,
     })
     console.log('🚀 ~ handleMapImageDown ~ res:', res)
     setCurrentBgImage(`${process.env.NEXT_PUBLIC_AWS_S3_BASE_URL}/${res.fileName}`)
@@ -208,7 +209,7 @@ export function useRefFiles() {
     formData.append('file', file)
 
     const res = await post({
-      url: `${process.env.NEXT_PUBLIC_API_HOST_URL}/api/image/upload`,
+      url: `${Config().baseUrl}/api/image/upload`,
       data: formData,
     })
     console.log('🚀 ~ handleUploadImageRefFile ~ res:', res)
@@ -240,7 +241,7 @@ export function useRefFiles() {
 
     /** 캐드 도면 파일 업로드 */
     const result = await post({
-      url: `${process.env.NEXT_PUBLIC_API_HOST_URL}/api/image/cad`,
+      url: `${Config().baseUrl}/api/image/cad`,
       data: res,
     })
     console.log('🚀 ~ handleUploadConvertRefFile ~ result:', result)

src/hooks/floorPlan/useImgLoader.js

@@ -5,6 +5,7 @@ import { usePlan } from '../usePlan'
 import { POLYGON_TYPE } from '@/common/common'
 import { QcastContext } from '@/app/QcastProvider'
 import { useContext } from 'react'
+import Config from '@/config/config.export'
 
 /**
  * 이미지 로더 hook
@@ -80,7 +81,7 @@ export function useImgLoader() {
       /** 이미지 크롭 요청 */
       const result = await post({
         // url: `${process.env.NEXT_PUBLIC_API_HOST_URL}/image/canvas`,
-        url: `${process.env.NEXT_PUBLIC_API_HOST_URL}/api/image/canvas`,
+        url: `${Config().baseUrl}/api/image/canvas`,
         data: formData,
       })
       console.log('🚀 ~ handleCanvasToPng ~ result:', result)