<div id="readability-page-1" class="page"><div>
                  <p><a href="/m/category/FRONTEND"><span>FRONTEND</span></a></p><h3>nextjs 프로젝트에서 https 로 서버 실행하기</h3>
                </div><p><cite>나를찾는아이</cite>
                  <span> 2022. 9. 14. 17:56</span>
                </p><div>
                                <p data-ke-size="size16">nextjs 기반의 프로젝트는 아래의 명령어를 통해 로컬 개발서버를 실행하게 됩니다</p>

<pre id="code_1662623413361" data-ke-language="typescript" data-ke-type="codeblock"><code>npm run dev
yarn dev</code></pre>

<p data-ke-size="size16">그런데 다른 목적으로 http 서버를 직접 커스텀하여 실행해야하는 경우가 있는데요</p>

<p data-ke-size="size16">대표적인예가 SSL인증서를 등록하여 https 서버를 실행하는 경우가 있겠네요</p>

<p data-ke-size="size16">nextjs 공식문서에는 이를 위한 고급안내 문서가 있습니다</p>

<p data-ke-size="size16"><a href="https://nextjs.org/docs/advanced-features/custom-server" target="_blank" rel="noopener">https://nextjs.org/docs/advanced-features/custom-server</a></p>
<figure id="og_1662623483774" contenteditable="false" data-ke-type="opengraph" data-ke-align="alignCenter" data-og-type="website" data-og-title="Advanced Features: Custom Server | Next.js" data-og-description="Start a Next.js app programmatically using a custom server." data-og-host="nextjs.org" data-og-source-url="https://nextjs.org/docs/advanced-features/custom-server" data-og-url="https://nextjs.org/docs/advanced-features/custom-server" data-og-image="https://scrap.kakaocdn.net/dn/bA9Pv0/hyPICV1hGD/jgw4CCk6etXuvoEVj2mPXK/img.png?width=2048&amp;height=1170&amp;face=0_0_2048_1170"><a href="https://nextjs.org/docs/advanced-features/custom-server" target="_blank" rel="noopener" data-source-url="https://nextjs.org/docs/advanced-features/custom-server">

<div>
<p data-ke-size="size16">Advanced Features: Custom Server | Next.js</p>
<p data-ke-size="size16">Start a Next.js app programmatically using a custom server.</p>
<p data-ke-size="size16">nextjs.org</p>
</div>
</a><img src="https://scrap.kakaocdn.net/dn/bA9Pv0/hyPICV1hGD/jgw4CCk6etXuvoEVj2mPXK/img.png?width=2048&amp;height=1170&amp;face=0_0_2048_1170"></figure>


<p data-ke-size="size16">기본적인 구조는 다음과 같습니다</p>

<pre id="code_1662623551184" data-ke-language="typescript" data-ke-type="codeblock"><code>// server.js
const { createServer } = require('http')
const { parse } = require('url')
const next = require('next')

const dev = process.env.NODE_ENV !== 'production'
const hostname = 'localhost'
const port = 3000
// when using middleware `hostname` and `port` must be provided below
const app = next({ dev, hostname, port })
const handle = app.getRequestHandler()

app.prepare().then(() =&gt; {
  createServer(async (req, res) =&gt; {
    try {
      // Be sure to pass `true` as the second argument to `url.parse`.
      // This tells it to parse the query portion of the URL.
      const parsedUrl = parse(req.url, true)
      const { pathname, query } = parsedUrl

      if (pathname === '/a') {
        await app.render(req, res, '/a', query)
      } else if (pathname === '/b') {
        await app.render(req, res, '/b', query)
      } else {
        await handle(req, res, parsedUrl)
      }
    } catch (err) {
      console.error('Error occurred handling', req.url, err)
      res.statusCode = 500
      res.end('internal server error')
    }
  }).listen(port, (err) =&gt; {
    if (err) throw err
    console.log(`&gt; Ready on http://${hostname}:${port}`)
  })
})</code></pre>


<p data-ke-size="size16">이렇게 코드를 작성하여 프로젝트의 루트에 server.js 라는 파일을 생성하고</p>

<p data-ke-size="size16">package.json 파일의 명령어로 이 파일을 실행하는 명령어를 넣으면 됩니다</p>

<pre id="code_1662623589387" data-ke-language="typescript" data-ke-type="codeblock"><code>"scripts": {
  "dev:custom": "node server.js",
}</code></pre>

<p data-ke-size="size16">SSL인증서를 등록하여 https 서버를 실행할때는 이렇게 작성해주세요</p>

<pre id="code_1662623733989" data-ke-language="typescript" data-ke-type="codeblock"><code>const { createServer } = require("https");
const { parse } = require("url");
const next = require("next");
const fs = require("fs");

const hostname = "호스트명";
const port = 포트번호;

const dev = process.env.NODE_ENV !== "production";
const app = next({ dev, hostname, port });
const handle = app.getRequestHandler();

const httpsOptions = {
  key: fs.readFileSync("키파일경로"),
  cert: fs.readFileSync("인증서파일경로"),
};

app.prepare().then(() =&gt; {
  createServer(httpsOptions, async (req, res) =&gt; {
    try {
      const parsedUrl = parse(req.url, true);
      await handle(req, res, parsedUrl);
    } catch (err) {
      console.error("Error occurred handling", req.url, err);
      res.statusCode = 500;
      res.end("internal server error");
    }
  }).listen(port, (err) =&gt; {
    if (err) throw err;
    console.log(`&gt; Ready on https://${hostname}:${port}`);
  });
});</code></pre>

<p data-ke-size="size16">로컬개발시 사용할 인증서를 만드는 방법도 알고 싶으시다면 아래 링크를 참조하세요</p>
<p data-ke-size="size16"><a href="https://trend21c.tistory.com/2267" target="_blank" rel="noopener">https://trend21c.tistory.com/2267</a></p>
<figure id="og_1662623828981" contenteditable="false" data-ke-type="opengraph" data-ke-align="alignCenter" data-og-type="article" data-og-title="로컬환경에서 사용할 개발용 SSL 인증서 만들기" data-og-description="아래 가이드는 Mac을 기준으로 작성되어있습니다 로컬환경에서 개발을 할때 ssl 인증서가 필요한 경우가 있습니다 로컬환경에서 사용할 개발용 인증서를 만들기 위해 brew를 통해 mkcert를 설치합" data-og-host="trend21c.tistory.com" data-og-source-url="https://trend21c.tistory.com/2267" data-og-url="https://trend21c.tistory.com/2267" data-og-image="https://scrap.kakaocdn.net/dn/fncoK/hyPJWyzyZW/2Up0MtRgs2USSglG940Yj0/img.png?width=800&amp;height=800&amp;face=0_0_800_800,https://scrap.kakaocdn.net/dn/dagIPt/hyPJWFlaAL/GYcdvL6x0D8546Mn3Ndqe0/img.png?width=800&amp;height=800&amp;face=0_0_800_800"><a href="https://trend21c.tistory.com/2267" target="_blank" rel="noopener" data-source-url="https://trend21c.tistory.com/2267">

<div>
<p data-ke-size="size16">로컬환경에서 사용할 개발용 SSL 인증서 만들기</p>
<p data-ke-size="size16">아래 가이드는 Mac을 기준으로 작성되어있습니다 로컬환경에서 개발을 할때 ssl 인증서가 필요한 경우가 있습니다 로컬환경에서 사용할 개발용 인증서를 만들기 위해 brew를 통해 mkcert를 설치합</p>
<p data-ke-size="size16">trend21c.tistory.com</p>
</div>
</a><img src="https://scrap.kakaocdn.net/dn/fncoK/hyPJWyzyZW/2Up0MtRgs2USSglG940Yj0/img.png?width=800&amp;height=800&amp;face=0_0_800_800,https://scrap.kakaocdn.net/dn/dagIPt/hyPJWFlaAL/GYcdvL6x0D8546Mn3Ndqe0/img.png?width=800&amp;height=800&amp;face=0_0_800_800"></figure>



            
            
                </div></div>

나를 찾는 아이

Kyoung min, Kim

nextjs 기반의 프로젝트는 아래의 명령어를 통해 로컬 개발서버를 실행하게 됩니다
 
npm run dev
yarn dev
 
그런데 다른 목적으로 http 서버를 직접 커스텀하여 실행해야하는 경우가 있는데요
 
대표적인예가 SSL인증서를 등록하여 https 서버를 실행하는 경우가 있겠네요
 
nextjs 공식문서에는 이를 위한 고급안내 문서가 있습니다
 
https://nextjs.org/docs/advanced-features/custom-server
 
 
기본적인 구조는 다음과 같습니다
 
// server.js
const { createServer } = require('http')
const { parse } = require('url')
const next = require('next')
const dev = process.env.NODE_ENV !== 'production'
const hostname = 'localhost'
const port = 3000
// when using middleware `hostname` and `port` must be provided below
const app = next({ dev, hostname, port })
const handle = app.getRequestHandler()
app.prepare().then(() => {
  createServer(async (req, res) => {
    try {
      // Be sure to pass `true` as the second argument to `url.parse`.
      // This tells it to parse the query portion of the URL.
      const parsedUrl = parse(req.url, true)
      const { pathname, query } = parsedUrl
      if (pathname === '/a') {
        await app.render(req, res, '/a', query)
      } else if (pathname === '/b') {
        await app.render(req, res, '/b', query)
      } else {
        await handle(req, res, parsedUrl)
      }
    } catch (err) {
      console.error('Error occurred handling', req.url, err)
      res.statusCode = 500
      res.end('internal server error')
    }
  }).listen(port, (err) => {
    if (err) throw err
    console.log(`> Ready on http://${hostname}:${port}`)
  })
})
 
 
이렇게 코드를 작성하여 프로젝트의 루트에 server.js 라는 파일을 생성하고
 
package.json 파일의 명령어로 이 파일을 실행하는 명령어를 넣으면 됩니다
 
"scripts": {
  "dev:custom": "node server.js",
}
 
SSL인증서를 등록하여 https 서버를 실행할때는 이렇게 작성해주세요
 
const { createServer } = require("https");
const { parse } = require("url");
const next = require("next");
const fs = require("fs");
const hostname = "호스트명";
const port = 포트번호;
const dev = process.env.NODE_ENV !== "production";
const app = next({ dev, hostname, port });
const handle = app.getRequestHandler();
const httpsOptions = {
  key: fs.readFileSync("키파일경로"),
  cert: fs.readFileSync("인증서파일경로"),
};
app.prepare().then(() => {
  createServer(httpsOptions, async (req, res) => {
    try {
      const parsedUrl = parse(req.url, true);
      await handle(req, res, parsedUrl);
    } catch (err) {
      console.error("Error occurred handling", req.url, err);
      res.statusCode = 500;
      res.end("internal server error");
    }
  }).listen(port, (err) => {
    if (err) throw err;
    console.log(`> Ready on https://${hostname}:${port}`);
  });
});
 
로컬개발시 사용할 인증서를 만드는 방법도 알고 싶으시다면 아래 링크를 참조하세요
https://trend21c.tistory.com/2267

nextjs 프로젝트에서 https 로 서버 실행하기

댓글