[Winection(2)] 인프라 구축(로컬 서버, nginx, SSL인증서 발급, 프론트 백 https)
https://velog.io/@woo2083/Winection2-인프라-구축로컬-서버-nginx-도커-SSL인증서-발급-https

내가 쓴 이 글을 다 적용했으면 이제는 프론트엔드와 백엔드 모두 https로 통신이 이뤄진다.
하지만 서버 컴퓨터와 개발 컴퓨터가 다르면 ssl인증서가 없기에 localhost에서 통신이 안된다.
그렇기에 테스트 코드를 실행할 때 계속 배포해서 실행하는 식으로 해야하는가? 아니다.
mkcert을 사용해서 localhost에서 https로 실행할 수 있도록 변경해볼 것이다.

📚 mkcert 설치

우선 나는 맥 환경에서 실행한다.
다만, 윈도우 환경에서도 나중에 실행할 것을 대비해 둘다 하는 방법을 적어보려고 한다.
초반에 mkcert 설치 방법만 다르고 나중에는 적용방법이 같다.

Mac OS

brew install mkcert

이 명령어로 mkcert를 설치해준다.

그후

mkcert -install

명령어를 사용해서 mkcert를 세팅해준다.

Window OS

https://github.com/FiloSottile/mkcert/releases
위의 링크에서 자신의 OS에 맞는 exe파일을 다운로드한다.

다운받은 폴더에서 exe파일 mkcert.exe로 이름을 변경하고

./mkcert -install

이 파일을 실행하기위해 터미널에서 위와 같은 명령어를 입력한다.

📚 인증서 다운

이제 localhost로 된 간단한 ssl 인증서를 다운받아볼 것이다.
프론트엔드 프로젝트의 루트 디렉토리로 이동해서 mkcert라는 디렉토리를 만들어준다.

cd (프로젝트 루트디렉토리)/mkcert
mkcert -key-file key.pem -cert-file cert.pem "localhost" 

를 통해 mkcert에 인증서를 다운받는다.

이렇게 인증서가 제대로 다운받아졌는지 확인해본다.

📚 적용하기

프론트엔드(vite 기준)의 vite.config에 가서 아래 사진과 같이 적용시켜준다.

https: {
      key: fs.readFileSync("./mkcert/key.pem"),
      cert: fs.readFileSync("./mkcert/cert.pem"),
    }

실제 배포할 때는 저 부분에서 주석을 해놓고 배포해야 503 오류가 안뜸

백엔드(FastAPI)에서는 CORS 허용를 localhost:포트까지 잘 풀어주고 실행 명령어에서

 uvicorn src.app:app --host 0.0.0.0 --port 9090 --reload --reload-dir src --ssl-keyfile ./mkcert/key.pem --ssl-certfile ./mkcert/cert.pem

key.pem과 cert.pem 경로를 잘 설정해준다.(나같은 경우에는 그냥 백엔드에도 mkcert 폴더 자체를 루트 디렉토리에 복사해주었다.