Next.js의 로컬 개발 시https 사용
개시하다
우리 제품 중 하나는 넥스트입니다.js 프레임워크(이하 Next.js)를 사용하여 구현된 제품이 있습니다.
이 제품은 SNS 인증을 실시할 때 현지 개발 시 HTTPS를 사용하려고 조사했다.
이 보도는 이 뉴스다.js의 로컬 개발 시 HTTPS+localhost, 즉
https://localhost:3000
(port는 무엇이든지 가능)로 개발된 Tips를 소개합니다.컨디션
메시지
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")
이렇게 하면 ~/
바로 아래에 두 개의 파일이 생성됩니다.따라서'zsh'나'bash'로 바꾸어 지령을 집행하는 것이 좋겠다(필자는 귀찮아서 이렇게 했다).
생성된 파일입니다.js로 건너뛰는 항목
생성된 파일은next입니다.config.js
fs.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"
}
끝말
그게 다야.
여러분들에게 참고가 되었으면 좋겠습니다.읽어주셔서 감사합니다.
참조 링크
Reference
이 문제에 관하여(Next.js의 로컬 개발 시https 사용), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://zenn.dev/sotszk/articles/b4e6a4e19d2e35텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)