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
  • 좋은 웹페이지 즐겨찾기