배포 전, 로컬에서 로그인 기능 포함 테스트해보는 법

프론트와 백앤드 둘 다 로컬에서 서버를 띄우려면 하나의 컴퓨터에서 로컬을 띄워야한다.

즉, 마위 컴퓨터의 프론트 로컬 서버 ↔ 제우스 컴퓨터의 백앤드 로컬 서버

간에는 쿠키 통신이 불가능하다.

그럼 우리는 MSW로 개발 이후, 배포 전. 이 사이에 테스트를 해보고 싶다면 어떻게 해야하냐?

프론트에서는 localhost를 https로 띄운다.

백앤드는 SSL을 써야하는데, 이건 백앤드가 해줘야해서… https://api.code-zap.com으로 요청을 해야한다.

(그럼 즉, 백앤드가 새로 만든 기능과 테스트를 해보려면 해당 기능을 배포해줘야한다. 백앤드가 로컬에서 띄우면 http이기 때문에)

그럼 프론트에서 https로 localhost를 띄워보자.

SSL 인증서를 가라로 발급받는다. (터미널을 실행시키는 위치는 2024-code-zap/frontend)

openssl genrsa -out private.key 4096
openssl req -new -sha256 -out private.csr -key private.key
openssl x509 -req -days 3650 -in private.csr -signkey private.key -out private.crt -extensions req_ext
openssl x509 -in private.crt -out private.pem -outform PEM

그럼 터미널창으로 다음과 같이 질의응답이 시작된다. 각 항목이 구체적으로 뭔지 궁금하면 [다음 링크](https://velog.io/@wjdska245/webpack-%EC%84%A4%EC%A0%95%EC%9C%BC%EB%A1%9C-localhost-https-%ED%99%98%EA%B2%BD%EC%9C%BC%EB%A1%9C-%EC%8B%A4%ED%96%89%ED%95%98%EA%B8%B0)를 보자

스크린샷 2024-08-07 오후 2.51.21.png

그럼 다음과 같이 pem과 key가 발급된다.

스크린샷 2024-08-07 오후 2.50.36.png

발급 받은 키들을 webpack의 devServer 옵션에 넣어준다.

const fs = require('fs');

devServer: {
    port: 3000,
    historyApiFallback: true,
    server: {
      type: 'https',
      options: {
        key: fs.readFileSync('./private.key'),
        cert: fs.readFileSync('./private.pem'),
      },
    },
    host: 'localhost',
  },

const fs = require('fs');

devServer: {
    port: 3000,
    historyApiFallback: true,
    server: {
      type: 'https',
      options: {
        key: fs.readFileSync('./private.key'),
        cert: fs.readFileSync('./private.pem'),
      },
    },
    host: 'localhost',
  },

이후 npm run dev로 서버를 켠다
만약 쿠키를 그래도 못 가져온다면? [다음 이슈](https://github.com/webpack/webpack-dev-server/issues/2957)를 참고하자

One convenient way of getting rid of the warning screen is to enable this flag in the browser settings chrome://flags/#allow-insecure-localhost. But the certificate is still invalid and hot-reloading doesn't work.

해당 링크로 들어가서 강제로 허용하는듯

크롬에 들어가서 인증서를 본 것

스크린샷 2024-08-07 오후 2.58.27.png

우리 로그인은 쿠키를 사용한다. 이는 http끼리 통신을 하거나 https끼리 통신을 해야한다. 다만 http끼리 통신을 할때는 쿠키를 보내지 못하는 이슈가 있다. origin, samesite 이슈. 따라서 http끼리 통신을 하려면 같은 컴퓨터에서 프론트, 백 서버를 켜야한다는 것이다. (같은 오리진이어야하기때문에)