Next.js의 로컬 개발 시https 사용

이 글은 YAMAP 엔지니어 어드벤트 칼렌다어 2020의 열흘째 기사다.
https://qiita.com/advent-calendar/2020/yamap-engginers

개시하다

우리 제품 중 하나는 넥스트입니다.js 프레임워크(이하 Next.js)를 사용하여 구현된 제품이 있습니다.
이 제품은 SNS 인증을 실시할 때 현지 개발 시 HTTPS를 사용하려고 조사했다.
이 보도는 이 뉴스다.js의 로컬 개발 시 HTTPS+localhost, 즉 https://localhost:3000(port는 무엇이든지 가능)로 개발된 Tips를 소개합니다.

컨디션

Mac OS 10.15.7 Catalina

메시지

Ceertificates 생성

다음 명령을 터미널에 붙여넣고 리턴 키를 누르십시오.

openssl req -x509 -out localhost.crt -keyout localhost.key \
  -newkey rsa:2048 -nodes -sha256 \
  -subj '/CN=localhost' -extensions EXT -config <( \
   printf "[dn]\nCN=localhost\n[req]\ndistinguished_name = dn\n[EXT]\nsubjectAltName=DNS:localhost\nkeyUsage=digitalSignature\nextendedKeyUsage=serverAuth")

이렇게 하면 ~/ 바로 아래에 두 개의 파일이 생성됩니다.

localhost.key

localhost.crt

주의해야 할 것은 케이스에 fish를 사용할 때 상기 문자열을 직접 사용하면 문법 오류가 발생할 수 있다는 것이다.이것은 피쉬와 bash와zsh의 문법이 좀 다르기 때문이다.
따라서'zsh'나'bash'로 바꾸어 지령을 집행하는 것이 좋겠다(필자는 귀찮아서 이렇게 했다).

생성된 파일입니다.js로 건너뛰는 항목

생성된 파일은next입니다.config.jsfs.readFileSync부터 읽기 위해서는 프로젝트에 파일을 넣으십시오.

$ mkdir ~/{YOUR_PROJECT}/certificates
$ mv ~/localhost.key ~ ~/{YOUR_PROJECT}/certificates/localhost.key
$ mv ~/localhost.crt ~ ~/{YOUR_PROJECT}/certificates/localhost.crt

Next.js 사용자 정의 서버 사용하기

보통, Next.js 개발 시 서버 코드를 따로 쓸 필요가 없습니다.바로 제로 config입니다.
하지만 이번에 하고 싶은 일을 이루기 위해서는 반드시 써야 한다Next.의 Custom Server.주의점은 이것을 이용하면 일부 성능이 최적화된 은혜는 받아들일 수 없다는 것이다.
A custom server will remove important performance optimizations, like serverless functions and Automatic Static Optimization.
사용자 정의 서버를 사용하려면 프로젝트 디렉터리에 있는 서버를 사용하십시오.제작

$ touch ~/{YOUR_PROJECT}/server.js

server.js는 이런 느낌입니다.

const express = require('express');
const next = require('next');

const port = parseInt(process.env.PORT || '3000');
const host = '0.0.0.0';

const app = next({
  dev: process.env.NODE_ENV !== 'production',
});
const handle = app.getRequestHandler();

(async () => {
  await app.prepare();
  const server = express();
  server.get('*', (req, res) => handle(req, res));
  server.listen(port, host);
  console.log(`> Ready on http://localhost:${port}`);
})();

그리고 패키지.제이슨도 수정하고.

{
  "scripts": {
-   "dev": "next dev",
+   "dev": "node ./server.js",
-   "start": "next start",
+   "start": "NODE_ENV=production node ./server.js",
    "build": "next build"
  }
}

Express+https 모듈로 HTTPS 서버 구축

상기 서버.js 상태http://localhost:3000에서 서버가 일어납니다. 따라서 HTTPS를 사용할 때 다음과 같은 서버를 사용합니다.js 수정.

const express = require('express');
const next = require('next');
const https = require('https');
const fs = require('fs');

const port = parseInt(process.env.PORT || '4300');
const host = '0.0.0.0';

const app = next({
  dev: process.env.NODE_ENV !== 'production',
});
const handle = app.getRequestHandler();

(async () => {
  await app.prepare();
  const expressApp = express();

  expressApp.get('*', (req, res) => handle(req, res));

  // Use HTTPS if HTTPS option enabled
  const hasCertificates =
    fs.existsSync('./certificates/localhost.key') &&
    fs.existsSync('./certificates/localhost.crt');
  const useHttps =
    process.env.HTTPS === 'true' &&
    hasCertificates;

  if (useHttps) {
    const options = {
      key: fs.readFileSync('./certificates/localhost.key'),
      cert: fs.readFileSync('./certificates/localhost.crt'),
    };
    const server = https.createServer(options, expressApp);
    server.listen(port, host);
    console.log(`> Ready on https://localhost:${port}`);
  } else {
    expressApp.listen(port, host);
    console.log(`> Ready on http://localhost:${port}`);
  }
})();

package.제이슨은 그렇습니다.

{
  "dev": "node ./server.js"
+ "dev:https": "HTTPS=true node ./server.js"
  "start": "NODE_ENV=production node ./server.js"
  "build": "next build"
}

끝말

그게 다야.
여러분들에게 참고가 되었으면 좋겠습니다.읽어주셔서 감사합니다.

참조 링크

Node.js Express에서 HTTPS 모드 활용 - Qita

Secure your local development server with HTTPS (Next.JS)

How can I use Next.js over HTTPS instead of HTTP? - GitHub