Next-Nest 서버구축 - 기본설정

아직 블로그 포스트로 다루지는 않았지만, Next.js에서는 api를 통한 서버사이드 렌더링이 가능하다. 이는, 생산성이 높고, React.js를 다룰 줄 안다면 Next.js에 대해 좀만 학습한다면 쉽게 서버를 개발할 수 있는 장점이 있다.

 

하지만, 규모가 큰 프로젝트일수록 프론트엔드와 백엔드 개발을 구분지어 개발할 필요가 있어, Next-Nest를 연동한 서버구축을 실습하고 다뤄보고자 한다.

 

Next-Nest 포스트에서는 Next.js와 NestJS를 이용한 서버를 구축한다.

일종의 프론트엔드와 백엔드 개발을 나누어 각각 최적화된 프레임워크를 사용하여 서버를 구축해본다.

• 프론트엔트 : Next.js
• 백엔드 : NestJS

 

1. 필수 패키지

npm 설치

$> sudo apt-get install npm

node 설치

$> sudo npm i -g n

$> sudo n 14.17.6

npx 설치

$> sudo npm i npx -g

Next.js 설치 프로그램

$> sudo npm i create-next-app -g

NestJS 설치 프로그램

$> sudo npm i -g @nestjs/cli

 

2. 프론트엔드 구축

front라는 이름의 Next.js 프로젝트를 생성한다.(타입스크립트를 사용할 것으로 옵션 추가)

$> npx create-next-app front --typescript

잘 작동하는지 확인하기 위해 서버를 실행시켜본다.

$> npm run dev

 

3. 백엔드 구축

back이라는 이름의 NestJS 프로젝트를 생성한다.

$> nest new back

마찬가지로 잘 작동되는지 확인하기 위해, back 디렉토리로 이동해서 서버를 실행한다.

이 때, 현재는 Next와 Nest가 동일한 3000번 포트를 사용함으로 Next 서버는 종료시키고 실행한다.

$> npm run start:dev

백엔드 테스트를 위해 리소스를 추가한다. 당연히 back 디렉토리에서 다음 명령어를 실행한다.

$> nest g res apple

 

4. 백엔드 포트 변경

현재는 프론트엔드와 백엔드 서버 모두 동일한 3000번 포트를 사용하므로 백엔드의 포트번호를 변경한다.

back/src/main.ts 파일을 열어 3001번으로 포트를 변경한다.

// back/src/main.ts

import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';

async function bootstrap() {
  const app = await NestFactory.create(AppModule);
  await app.listen(3001);
}
bootstrap();

 

5. 프론트엔드에 프록시 설정

front 디렉토리에 프록시를 설정하기 위해 .env 파일을 생성하고 다음과 같이 작성한다.

// front/.env

SOURCE_PATH = '/api/:path*'
DESTINATION_URL = 'http://localhost:3001/:path*'

next.config.js 파일을 다음과 같이 수정한다.

// front/next.config.js

module.exports = {
  reactStrictMode: true,
  async rewrites() {
    if (process.env.NODE_ENV !== 'production') {
      return [
        {
          source: process.env.SOURCE_PATH,
          destination: process.env.DESTINATION_URL,
        },
      ];
    }
  },
}

이제 프론트엔드인 Next.js의 /api 로 수신되는 요청을 백엔드인 NestJS로 전달하도록 설정되었다.

프론트엔드 서버와 백엔드 서버를 실행시켜 잘 작동하는지 확인한다.

위와 같이 http://localhost:3000/api/apple 로 접속하여 'This action returns all apple'이 출력되면 잘 작동하는 것이다.

---

이제 Next.js와 NestJS 간의 연동이 끝났다.

Next-Nest 서버구축을 위한 환경이 준비가 되었으니 다음 포스트부터 모든 플랫폼의 기본인 회원가입과 로그인 기능을 차근차근 만들어보도록 한다.