[Vue] localhost에 SSL 적용

date

Apr 21, 2023

thumbnail

gsc

Done

public

slug

localhost-http-vue2

author

Introdution

PWA를 이용한 토이프로젝트를 진행하며 HTTPS(443) 적용했던 내용을 간단하게 공유하고자 한다. 본 글에서는 Windows10 환경을 기준으로 설명할 것 이다.

SSL 이란?

SSL(Secure Sockets Layer)은 인터넷 상에서 정보를 안전하게 전송하기 위한 프로토콜 중 하나이다. SSL을 사용하면 정보가 제3자에게 노출되거나 조작되지 않도록 보호할 수 있다. SSL은 HTTP와 함께 사용되며, HTTPS라는 보안 프로토콜을 형성한다.

설치 준비

chocolatey

윈도우 패키지 매니저로 유용한 chocolatey를 설치한다.

아래 설치 방법은 공식 페이지와 동일하다. CMD 혹은 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'))

설치 확인


# 버전정보를 확인한다.
choco --version

mkcert

SSL 인증서 적용을 위해 mkcert를 설치한다.


choco install mkcert

인증서 생성 및 적용

로컬 인증 기관 등록

아래 명령어를 실행하여 로컬 인증 기관을 등록한다.


mkcert -install

인증서 생성

mkcert를 이용하여 localhost의 인증서를 생성한다. 생성되는 파일은 외부에 공유하거나 노출시키지 않도록 디렉토리를 구성해서 아래 명령어를 실행한다.


mkcert localhost

실행하면 이미지와 같이 Private Key와 Certificate가 생성된다.

Vue에 인증서 적용

Vue 프로젝트에서 새성된 vue.config.js 파일에 아래와 같은 항목을 추가해준다.


const fs = require('fs')
module.exports = {
  devServer: {
    https: {
      key: fs.readFileSync('.{디렉토리 경로}/localhost-key.pem'),
      cert: fs.readFileSync('.{디렉토리 경로}/localhost.pem'),
    },
  },
}

결과 확인

설정 이후 서버를 기동한다. 필자의 경우 pagekage.json에 "dev": "vue-cli-service serve” 설정해놓았고, npm run dev 명령어로 develop mode로 서버를 실행했다.

이미지와 같이 https://localhost:8080 으로 실행된 것을 확인할 수 있다.

브라우저로 이동하여 적용되었는지 확인하고 마무리한다.

마무리

HTTP/HTTPS, SSL 등 관련 이론은 생략하고, 아주 간단하게 적용하는 방법을 기록해보았다. MacOS의 경우 brew 등 다른 방법으로 진행할 수 있으니 링크 내용을 살펴보도록 하자.

참고

How to use HTTPS for local development (web.dev)

mkcert.org

아래로 당겨서 새로고침