nextj PWA 설정 하기 4차 / HTTPS 설정

npm run dev할때는 에러가 안나 던 곳에서

npm run dev-http 명령어 실행 후 에러가 나기 시작함

 

로컬 HTTPS 설정 문제

HTTPS 설정 문제 설정 문제 인것 같아서

HTTPS 환경에서 PWA를 테스트 할 수 있도록 설정 

- Chocolatey 설치 ( PowerShell을 관리자 권한으로 실행 )

Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://community.chocolatey.org/install.ps1'))

 

- Chocolatey 설치 확인

choco -v

 

- mkcert 설치

choco install mkcert

 

- 로컬 인증서 생성

mkcert localhost 127.0.0.1 ::1

 

- package.json

"scripts": {
  "dev-https": "node server.js"
}

 

-server.js

const { createServer } = require('https');
const { parse } = require('url');
const next = require('next');
const fs = require('fs');
const path = require('path');

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

const httpsOptions = {
    key: fs.readFileSync(path.join(__dirname, './localhost+2-key.pem')),
    cert: fs.readFileSync(path.join(__dirname, './localhost+2.pem')),
};

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');
    });
});

 

- 생성 했던 local파일 해당 프로 젝트로 가져 오기

 

-next.config.js

/** @type {import('next').NextConfig} */

const withPWA = require('next-pwa')({
    dest: 'public',
});

const fs = require('fs');
const path = require('path');

const nextConfig = {
    reactStrictMode: false,
    images: {
        domains: ["ebdiiujp.supabase.co"],
    },
    async headers() {
        return [
            {
                source: '/(.*)',
                headers: [
                    {
                        key: 'X-Content-Type-Options',
                        value: 'nosniff',
                    },
                    {
                        key: 'X-Frame-Options',
                        value: 'DENY',
                    },
                    {
                        key: 'Referrer-Policy',
                        value: 'strict-origin-when-cross-origin',
                    },
                ],
            },
            {
                source: '/sw.js',
                headers: [
                    {
                        key: 'Content-Type',
                        value: 'application/javascript; charset=utf-8',
                    },
                    {
                        key: 'Cache-Control',
                        value: 'no-cache, no-store, must-revalidate',
                    },
                    {
                        key: 'Content-Security-Policy',
                        value: "default-src 'self'; script-src 'self'",
                    },
                ],
            },
        ];
    },
  
};

module.exports = withPWA(nextConfig);