PWA테스트 Https에서 테스트 하기

Https는 일반적으로 배포서버라 테스트를 할수 없지만 PWA가 설치 알림을 띄우는지 확인하기 위해서는

Https서버에만 가능했다 그렇다고 배포 서버로 무작정 올려서 확인 할수가 없으니 테스트를 위해 우회하는 방법을 선택했다

난 yarn과 vite를 사용중이여서 yarn 기준으로 설명 하겠다.

1.Localtunnel 설치

Bash 환경에서 yarn 사용

• 답변: 네, Bash 환경(예: MINGW64)에서 yarn을 사용할 수 있으며, yarn global add localtunnel 명령어가 맞습니다.
  • yarn global add는 글로벌 패키지를 설치하며, Localtunnel을 시스템 전체에서 사용할 수 있도록 한다.
  • MINGW64는 Git Bash를 기반으로 하므로, Node.js와 yarn이 설치되어 있다면 정상 작동한다.
• MINGW64 또는 PowerShell에서: bash

  
  yarn global add localtunnel

• 설치 완료 메시지 확인.

2. 설치 확인

• 설치 후:

lt --version

• 버전 출력(예: 1.9.2)이 나타나면 성공.

3. 문제 발생 시

• 오류 예시: "command not found: lt"
  • 원인: yarn global bin 디렉토리가 PATH에 추가되지 않음.
  • 해결:
    1. yarn global bin 실행 후 출력 경로(예: C:\Users\”본인 사용이름”\AppData\Local\Yarn\bin) 확인.
    2. 환경 변수 PATH에 위 경로 추가:
       • Windows 설정 > "환경 변수 편집" > "Path"에 경로 추가 > 새 PowerShell 또는 Bash 세션 열기.
    3. 다시 lt --version 확인.

이러면 설치 완료

2테스트용 코드 수정

index.html파일 에서

구글 부분을

아래 사진과 같이 주석처리 한다

3.실행

실행 시킨 후

새로운 터미널 열어서 각자 사용중인 로컬 번호 입력

저 주소로 이동

이런 화면이 나오면 당황하지 말고 밑에있는

클릭

복붙하면 됨

데이터는 이미 사용중인 서버에 있어 확인은 못하지만 그래도 log보면 잘 작동이 된다

앱 설치 버튼도 나오는걸 보니 잘 작동이 되는거 같다

속도가 많이 느리고 불안정 한거 같은데 무료로 쉽게 테스트 하기에는 좋은거 같다.

이런 오류가 발생해서 막히면

vite.config.js폴더에

 export default defineConfig({
 server: {
    // Localtunnel 호스트 허용
    allowedHosts: ['.loca.lt'],
  },
  })

server 추가 해줘야 한다.