MERN - ex - 클라이언트/서버 프로젝트 내 하위폴더 프로젝트 프리뷰 설정 통합 프로젝트 프리뷰/미리보기 환경설정

MERN - ex - 클라이언트/서버 프로젝트 내 하위폴더 프로젝트 프리뷰 설정 통합 프로젝트 프리뷰/미리보기 환경설정 

 

​

웹서비스, 웹프로젝트 포트폴리오 작업과 연습을 겸해

클라이언트 프로젝트와 서버 프로젝트를 각각 따로 만들어보았다.

​

하지만 결국, 이 두 프로젝트를 하나로 통합하여 메인 프로젝트로 만들어야 했고,

개별적으로 클라이언트와 서버, 각각의 프리뷰 테스트가 필요하도록 설정해야 했다.

​

로컬 환경에서는 프리뷰 설정이 단순하지만,

파이어베이스 스튜디오 FIREBASE STUDIO나 가상 IDE 환경에서는 설정이 어렵고 까다롭다.

​

지금도 각각 만들어보고 통합해 보고 해보았고, 최종적으로 깔끔한 방법을 다시 설정해가며, 기록 차원으로 블로그 글로 남기며 이어서 작업을 하고 있다.

​

​

@프로젝트 구조 확인

메인 프로젝트의 루트 디렉터리를 /라고 칭하겠다.

클라이언트 프로젝트가 담긴 폴더는 /client

서버 프로젝트가 담긴 폴더는 /server

​

먼저 클라이언트 프로젝트가 완성되었다면,

이를 메인 프로젝트 루트에서 실행되거나 프리뷰 할 수 있도록 하고자 한다.

​

확인해야 할 파일은 가상환경 프리뷰 설정 파일인 nix, 그리고 npm 설정 파일인 package.json이다.

​

​

@메인 프로젝트 설정

빈 폴더 생성이 되었고 package.json 초기 생성을 위해 루트 디렉터리에서 아래 명령어를 실행하여 기본 파일을 생성한다

$ npm init -y

​

​

@메인 스크립트 설정

생성된 josn에 아래 스크립트를 추가해야 한다.

예를 들면 아래 소스처럼 스크립트에 프리픽스와 경로를 넣어야 한다

--예시

{

"name": "main-project",

"scripts": {

"start": "npm --prefix client start",

"build": "npm --prefix client build",

"install": "npm --prefix client install",

"dev": "npm --prefix client run dev"

}

}

​

나의 경우

--원본

"scripts": {

"test": "echo \"Error: no test specified\" && exit 1",

"dev": "vite",

"build": "vite build",

"lint": "eslint .",

"preview": "vite preview"

}

​

--수정

"scripts": {

"test": "echo \"Error: no test specified\" && exit 1",

"devOri": "vite",

"dev": "npm run dev",

"build": "vite build",

"lint": "eslint .",

"previewOri": "vite preview",

"preview": "npm --prefix client run preview"

},

​

원본 소스를 남겨두었다. JSON에서는 주석이 허용되지 않기 때문에, 원본 보관용으로 Ori를 넣어두었다

​

​

@메인 nix 환경 파일 수정

nix 파일에서도 프리픽스를 사용하여 경로 설정만 해주면 된다.

--수정

previews = {

enable = true;

previews = {

web = {

# Example: run "npm run dev" with PORT set to IDX's defined port for previews,

# and show it in IDX's web preview panel

##command = ["npm" "run" "dev"];

##command = ["npm" "run" "dev" "--" "--port" "$PORT" "--host" "0.0.0.0"];

command = ["npm" "--prefix" "client" "run" "dev" "--" "--port" "$PORT" "--host" "0.0.0.0"];

manager = "web";

# env = {

# # Environment variables to set for your server

# PORT = "$PORT";

# };

};

};

};

​

기존 주석과 구분하기 위해 추가 주석은 ##를 사용하였다.

​

​

@참고

처음에는 메인 프로젝트에 별도로 node_modules를 설치해야 하는 줄 알았지만,

실제로는 --prefix 옵션을 사용하여 하위 프로젝트 경로와 실행 설정을 해주면 되었다.

처음에 사용했던 방법이 각 프로젝트에서 모듈 설정값을 빼내 npm 명령어를 만드는 것이었다.

당시 사용한 명령어를 남겨놓는다.

-- 추출

deps=$(jq -r '.dependencies | to_entries | map("\(.key)@\(.value)") | join(" ")' package.json)

devdeps=$(jq -r '.devDependencies | to_entries | map("\(.key)@\(.value)") | join(" ")' package.json)

​

echo "npm install $deps --save"

echo "npm install $devdeps --save-dev"

​

​

필요에 따라 /server 쪽도 유사하게 설정할 수 있을 것 같다.