Secure your local development server with HTTPS (Next.JS)
<p>https://anmagpie.medium.com/secure-your-local-development-server-with-https-next-js-81ac6b8b3d68</p><h1 id="8a8b" class="jg jh fu au ji jj jk ho jl jm jn hr jo jp jq jr js jt ju jv jw jx jy jz ka kb gq" data-selectable-paragraph="">Create certificate</h1>
<p id="00b7" class="hk hl fu hm b hn kc ho hp hq kd hr hs ht ke hu hv hw kf hx hy hz kg ia ib id dg gq" data-selectable-paragraph="">Creating a certificate for localhost is easy with <code class="iv kh ki kj kk b">openssl</code> . Just put the following command in the terminal. The output will be two files: localhost.key and localhost.crt</p>
<pre class="if ig ih ii ij kl km kn"><span class="gq ko jh fu kk b dh kp kq s kr" data-selectable-paragraph="">openssl req -x509 -out localhost.crt -keyout localhost.key \<br>-newkey rsa:2048 -nodes -sha256 \<br>-subj '/CN=localhost' -extensions EXT -config <( \<br> printf "\nCN=localhost\n\ndistinguished_name = dn\n\nsubjectAltName=DNS:localhost\nkeyUsage=digitalSignature\nextendedKeyUsage=serverAuth")<br><br></span></pre>
<p id="58f5" class="hk hl fu hm b hn ks ho hp hq kt hr hs ht ku hu hv hw kv hx hy hz kw ia ib id dg gq" data-selectable-paragraph="">Click on the crt file, on macOS the keychain app will open, add the key to it.</p>
<p id="e90e" class="hk hl fu hm b hn ks ho hp hq kt hr hs ht ku hu hv hw kv hx hy hz kw ia ib id dg gq" data-selectable-paragraph="">Now double click on it and under the trust section you will see “When using this certificate” select “Always Trust”.</p>
<h1 id="38f7" class="jg jh fu au ji jj jk ho jl jm jn hr jo jp jq jr js jt ju jv jw jx jy jz ka kb gq" data-selectable-paragraph="">Next.js</h1>
<p id="0604" class="hk hl fu hm b hn kc ho hp hq kd hr hs ht ke hu hv hw kf hx hy hz kg ia ib id dg gq" data-selectable-paragraph="">Now in Next.js we have to create our own server.js file if not already.</p>
<pre>const { createServer } = require('https');
const { parse } = require('url');
const next = require('next');
const fs = require('fs');
const dev = process.env.NODE_ENV !== 'production';
const app = next({ dev });
const handle = app.getRequestHandler();
const httpsOptions = {
key: fs.readFileSync('./certificates/localhost.key'),
cert: fs.readFileSync('./certificates/localhost.crt')
};
app.prepare().then(() => {
createServer(httpsOptions, (req, res) => {
const parsedUrl = parse(req.url, true);
handle(req, res, parsedUrl);
}).listen(3000, err => {
if (err) throw err;
console.log('> Ready on https://localhost:3000');
});
});<br><br><br>Modify the package.json:</pre>
<p>"scripts": {<br> "dev": "<span style="background-color: rgba(255, 255, 0, 1)"><strong>node server.js</strong></span>",<br> "build": "next build",<br> "start": "cross-env NODE_ENV=production <strong><span style="background-color: rgba(255, 255, 0, 1)">node server.js</span></strong>"<br>},</p>
<pre><br>Run <span id="rmm">the server, you now have a secure connection to localhost.</span></pre>
<pre class="if ig ih ii ij kl km kn"><span id="9037" class="gq ko jh fu kk b dh kp kq s kr" data-selectable-paragraph=""> </span></pre><br><br>
来源：https://www.cnblogs.com/clblacksmith/p/14661471.html
頁:
[1]