Next.js 프로젝트를 bat파일로 실행하기(개인기록)

목차

 

 

 왜 bat파일로 Next.js를 실행하려고 하나요?

사용자는 웹이라는 형태에 익숙합니다. 하지만 웹에선 행동할수 있는 것에 제약이있습니다 어떠한 폴더에 내용을 저장하거나 자동화 브라우저를 열거나 등등 웹으로는 해당 행동들을 제어할 수가 없습니다.

 

bat파일 구성

@echo off
:: 스크립트 위치를 기반으로 Node.js와 npm 경로 설정
set NODE_PATH=%~dp0node\node.exe
set NPM_PATH=%~dp0node\node_modules\npm\bin\npm-cli.js

:: Next.js 애플리케이션 디렉토리로 이동 (현재 위치)
cd %~dp0

:: 필요한 패키지 설치
echo Installing dependencies...
%NODE_PATH% %NPM_PATH% install


:: Next.js 애플리케이션 시작
echo Starting the Next.js application...
%NODE_PATH% %NPM_PATH% run start

:: 종료하지 않고 유지하기 위해 일시 정지
pause

[파일] 프로젝트 root에 위치한 build-and-run.bat

위 코드는 프로젝트 root에 위치할 build-and-run.bat라는 파일입니다.

 

cmd대신 node를 가져오는 방식 채용

사용자에게 프로그램을 배포할때 npm run start를 shell cmd.exe로 수행하면되지만

node가 안깔려있을 가능성이있고 여러 이슈를 제어하고싶어서 

https://nodejs.org/en/download/prebuilt-binaries

Node.js — Download Node.js®

해당 다운로드를 활용하고자 합니다.

 

개발자라면 설치가 되어있겠지만 일반 사용자라면 Node가 설치가 안되어 있을수도있고 node의 버전이 다를 수도 있습니다.

그렇기에 node환경을 제쪽에서 제어하기위해 위 링크에서 zip파일을 다운받아줍니다.

 

폴더구성은 어떻게 되나요?

폴더는 npm run build를 통해 build된 .next폴더와, 위에서 가져온 node폴더,

build-and-run.bat 그리고 package.json정도면 되는 것으로 보입니다

내용이 다를경우 알려주시면 감사하겠습니다!

 

저 폴더 구성은 사용자에게 어플리케이션처럼 제공하고싶을때 주는 세팅입니다.

사용자는 프로그래밍을 모를 수 있기 때문에 최소한의 bat실행 한번으로 사용자가 이용할 수 있게 하려고 합니다.

 

왜 Electron은 사용하지 않나요?

Electron을 사용하면 앱으로 구현할 수 있겠지만 세팅이 많이 까다로운 문제도 있었고 가벼움이 너무 덜어져서

요즘 AI 프로젝트 에서도 보이는 bat파일로 실행하여 웹사이트에 연결하는 방식을 채용하였습니다.

nextron이라는 next.js와 electron을 합쳐진 프로젝트를 진행해도 되겠지만

웹만의 강점도 살려 보고싶었습니다. 

 

 

bat파일 정상적인 실행 모습

위에서 적힌 코드로 루트프로젝트에 위치하고 실행을한다면

npm install을 통해 package.json파일을 읽어 한번 node_modules를 설치합니다 만약 설치되어있다면 위 사진처럼 넘어갈 것입니다.

그다음 npm run start를 해줍니다. 그다음에 나오는 http://localhost:7000이라는 경로로 해당 cmd창이 닫히지 않은상태에서

웹에서 들어가서 작업을 하면되는 구조입니다.

 

 마무리

느낀 점

해당 작업을 진행하면서 지금 과정도 일반사용자에게 나름 까다롭거나 생소하게 보이는 방식인데 더욱 사용자 친화적인 프로그램을 만든다는 것이 어렵다는 것을 느꼈습니다.

 

보완할 점

그리고 자동화하려면 한번더 위의 폴더구성을만드는 로직을 짜야하기때문에 지금은 사실상 반자동 상태라서 후에 수정을 좀더 해야할 것으로 보입니다.