From 3dc205cb461b3ab15b4056ccf7b31a0b9f34ccbf Mon Sep 17 00:00:00 2001 From: yoosangwook Date: Thu, 29 May 2025 13:05:47 +0900 Subject: [PATCH] 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. --- .env.localhost | 28 ++++++++++++++++++++++++++++ package.json | 12 +++++++----- src/components/Main.jsx | 6 ++++++ src/config/config.common.js | 11 +++++++++++ src/config/config.development.js | 13 +++++++++++++ src/config/config.export.js | 19 +++++++++++++++++++ src/config/config.local.js | 13 +++++++++++++ src/config/config.production.js | 13 +++++++++++++ src/hooks/common/useRefFiles.js | 11 ++++++----- src/hooks/floorPlan/useImgLoader.js | 3 ++- 10 files changed, 118 insertions(+), 11 deletions(-) create mode 100644 .env.localhost create mode 100644 src/config/config.common.js create mode 100644 src/config/config.development.js create mode 100644 src/config/config.export.js create mode 100644 src/config/config.local.js create mode 100644 src/config/config.production.js diff --git a/.env.localhost b/.env.localhost new file mode 100644 index 00000000..08261ec0 --- /dev/null +++ b/.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" \ No newline at end of file diff --git a/package.json b/package.json index bbddf9ad..4dfc44ef 100644 --- a/package.json +++ b/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", diff --git a/src/components/Main.jsx b/src/components/Main.jsx index 520014b1..7ba7c07e 100644 --- a/src/components/Main.jsx +++ b/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() { )} + {Config().mode} +
+ {Config().baseUrl} +
+ {process.env.NEXT_PUBLIC_API_HOST_URL} ) } diff --git a/src/config/config.common.js b/src/config/config.common.js new file mode 100644 index 00000000..dc2208ae --- /dev/null +++ b/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, + } +} diff --git a/src/config/config.development.js b/src/config/config.development.js new file mode 100644 index 00000000..2c9870a4 --- /dev/null +++ b/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 diff --git a/src/config/config.export.js b/src/config/config.export.js new file mode 100644 index 00000000..89487634 --- /dev/null +++ b/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 diff --git a/src/config/config.local.js b/src/config/config.local.js new file mode 100644 index 00000000..b0bee8ad --- /dev/null +++ b/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 diff --git a/src/config/config.production.js b/src/config/config.production.js new file mode 100644 index 00000000..fc012875 --- /dev/null +++ b/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 diff --git a/src/hooks/common/useRefFiles.js b/src/hooks/common/useRefFiles.js index d13e7213..a74a7f8a 100644 --- a/src/hooks/common/useRefFiles.js +++ b/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) diff --git a/src/hooks/floorPlan/useImgLoader.js b/src/hooks/floorPlan/useImgLoader.js index ca5fef79..12c9cbb2 100644 --- a/src/hooks/floorPlan/useImgLoader.js +++ b/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)