Next.js 프로젝트를 세팅한 뒤 yarn start 스크립트를 실행했을 때 실행되는 코드를 nextjs github 레포지토리에서 찾은 뒤, 해당 파일에 대한 간단한 설명을 첨부해주세요.
원티드 프리온보딩 프론트엔드 챌린지에서 사전 과제로 주어진 문제 중 마지막 문제였다.
그동안 Next.js를 두 차례 프로젝트에서 사용해봤지만 한 번도 생각해보지 못한 부분이라 생각해보는 것도 좋을 것 같았다.
next-start
처음에는 문제를 보고 방대한 레포지토리에서 저 코드를 어떻게 찾을까 싶었지만 의외로 빠르게 찾을 수 있었다.
next start가 package.json의 scripts에 명시되어있으니 packages 폴더 아래 있지 않을까 했는데 실제로 여기 있는 게 맞았던 것이다.
packages > next > cli > next-start.ts에 next start를 입력했을 때 어떤 코드들이 실행되는지 적혀있다.
1. 유효한 옵션 명시 및 확인
const validArgs: arg.Spec = {
// Types
'--help': Boolean,
'--port': Number,
'--hostname': String,
'--keepAliveTimeout': Number,
// Aliases
'-h': '--help',
'-p': '--port',
'-H': '--hostname',
}
let args: arg.Result<arg.Spec>
try {
args = arg(validArgs, { argv })
} catch (error) {
if (isError(error) && error.code === 'ARG_UNKNOWN_OPTION') {
return printAndExit(error.message, 1)
}
throw error
}먼저 next start 뒤에 올 수 있는 옵션들에 대해 명시한다.
그리고 유효하지 않은 옵션이라면 에러 메세지를 프린트한 뒤 error를 던져 실행을 종료한다.
2. --help 옵션이 있는 경우
if (args['--help']) {
console.log(`
Description
Starts the application in production mode.
The application should be compiled with \`next build\` first.
Usage
$ next start <dir> -p <port>
<dir> represents the directory of the Next.js application.
If no directory is provided, the current directory will be used.
Options
--port, -p A port number on which to start the application
--hostname, -H Hostname on which to start the application (default: 0.0.0.0)
--keepAliveTimeout Max milliseconds to wait before closing inactive connections
--help, -h Displays this message
`)
process.exit(0)
}이때 --help 또는 -h라면 next start에 대한 설명을 프린트하고 종료한다.
3. 서버 실행에 필요한 변수 선언
const dir = getProjectDir(args._[0])
const host = args['--hostname'] || '0.0.0.0'
const port = getPort(args)--help 옵션이 붙지 않았을 경우는 next start를 통해 서버를 실행하겠다는 뜻이다.
따라서 서버 실행에 필요한 dir, host, port 등을 입력받은 값 또는 기본 값으로 선언, 초기화한다.
const keepAliveTimeoutArg: number | undefined = args['--keepAliveTimeout']
if (
typeof keepAliveTimeoutArg !== 'undefined' &&
(Number.isNaN(keepAliveTimeoutArg) ||
!Number.isFinite(keepAliveTimeoutArg) ||
keepAliveTimeoutArg < 0)
) {
printAndExit(
`Invalid --keepAliveTimeout,
expected a non negative number but received "${keepAliveTimeoutArg}"`,
1
)
}
const keepAliveTimeout = keepAliveTimeoutArg
? Math.ceil(keepAliveTimeoutArg)
: undefined이때 옵션 중 하나인 --keepAliveTimeout의 값이 유효하지 않을 경우 이또한 에러 메세지를 프린트한 뒤 실행을 종료한다.
4. 서버 실행
startServer({
dir,
hostname: host,
port,
keepAliveTimeout,
})
.then(async (app) => {
const appUrl = `http://${app.hostname}:${app.port}`
Log.ready(`started server on ${host}:${app.port}, url: ${appUrl}`)
await app.prepare()
})
.catch((err) => {
console.error(err)
process.exit(1)
})서버 실행에 필요한 dir, hostname, port, keepAliveTimeout이 모두 유효한 값이고 준비가 되었다면 startServer 함수를 통해 서버를 실행한다.
이때 appUrl은 http://{hostname}:{port}가 된다.
4-1. startServer 함수에 대해
startServer 함수에 대한 코드는 링크에 있다.
let requestHandler: RequestHandler
const server = http.createServer((req, res) => {
return requestHandler(req, res)
})node.js 기반 웹 서버 어플리케이션은 웹 서버 객체를 만들 때 createServer를 사용한다.
위 코드로 server라는 웹 서버 객체를 만든 것이다.
server.on('listening', () => {
const addr = server.address()
const hostname =
!opts.hostname || opts.hostname === '0.0.0.0'
? 'localhost'
: opts.hostname
const app = next({
...opts,
hostname,
customServer: false,
httpServer: server,
port: addr && typeof addr === 'object' ? addr.port : port,
})
requestHandler = app.getRequestHandler()
upgradeHandler = app.getUpgradeHandler()
resolve(app)
})
server.listen(port, opts.hostname)마지막으로 아까 인자로 넘겨준 hostname, port 등을 통해 server를 실행한다.
관련 링크
