local에서 https로 개발하기

 

개요

---

로컬에서 개발할때는 주소가 localhost:xxxx 형식으로 주어진다. 하지만 해당 주소는 SSL인증서가 없기에 기본적으로 http 프로토콜로 통신을 하게 된다. 이렇게 개발을 하게 되면 HTTPS, SSL, TLS, cookie 등의 기술을 테스트하기에 어려움이 있었다. 그래서 로컬에서 HTTPS 개발을 할 수 있게 하는 도구들을 찾아보던 중, 좋은 도구를 발견했다.

 

MKCert

---

일단 HTTPS를 사용하기 위해서는 인증 기관에서 인증된 TLS 인증서가 필요하다. 여기서 서명된 인증서를 생성하고, 애플리케이션에 적용시켜 실행을 하면 HTTPS로 실행이 된다. 해당 인증서는 mkcert를 사용해서 만들 것이다.

https://github.com/FiloSottile/mkcert

GitHub - FiloSottile/mkcert: A simple zero-config tool to make locally trusted development certificates with any names you'd lik

 

 

여기서 주의할 점은, 해당 작업을 완료한 이후에 만들어지는 pem 파일은 절대로 외부에 공유해서는 안된다! 악의적인 공격에 쉽게 노출이 될 수 있다. 과정은 다음과 같이 실행하면 된다.

# mkcert 설치
brew install mkcert
# 인증서 파일 설치
mkcert -install
# 프로그램 실행
mkcert localhost

 

로컬에서의 준비는 다 끝났고, 이제 애플리케이션에서 HTTPS를 사용하기 위한 준비를 해야 한다. NestJS의 경우에는 다음과 같이 설정한다. 나머지는 신경쓰지 말고, httpOptions 객체 부분의 코드를 보면 된다.

// main.ts
import { ValidationPipe } from '@nestjs/common';
import { NestFactory } from '@nestjs/core';
import * as cookieParser from 'cookie-parser';
import { AppModule } from './app.module';
import { ErrorExceptionFiter } from './middleware/logger.middleware';
import * as fs from 'fs';
import { homedir } from 'os';

const PORT = process.env.PORT || 4000;
const env = process.env.NODE_ENV;

async function bootstrap() {
  # https에 사용할 인증서를 직접 불러올 수 있다.
  const httpsOptions =
    env === 'dev'
      ? {
          key: fs.readFileSync(`${homedir}/localhost-key.pem`),
          cert: fs.readFileSync(`${homedir}/localhost.pem`),
        }
      : {};

  const app = await NestFactory.create(AppModule, {
    bodyParser: true,
    httpsOptions,
  });
  app.enableCors({
    origin: ['https://localhost:3000'],
    credentials: true,
  });
  app.useGlobalPipes(new ValidationPipe());
  app.useGlobalFilters(new ErrorExceptionFiter());
  app.use(cookieParser());
  await app.listen(PORT);
  console.log(`🚀 Application is running on: ${PORT}`);
}
bootstrap();

 

 

Create-React-App 부분에서는 다음과 같이 환경변수를 설정하면 알아서 HTTPS로 실행이 된다. start:dev의 스크립트를 보면 된다.

// package.json
...
  "scripts": {
    "start": "REACT_APP_NODE_ENV=prod react-scripts start",
    "start:dev": "HTTPS=true SSL_CRT_FILE=~/localhost.pem SSL_KEY_FILE=~/localhost-key.pem REACT_APP_NODE_ENV=dev react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
 ...

 

위에 있는 방법으로 local에서도 HTTPS를 사용해 개발할 수 있다!

 

참고자료

---

https://web.dev/i18n/ko/how-to-use-local-https/

로컬 개발에 HTTPS를 사용하는 방법