[Web] 12편 - 임시로 React를 https로 호스팅하기, pm2를 곁드려서 서비스하기

현재 프로젝트는

Ubuntu(EC2)에서 nodejs+express+GraphQL로 백엔드 구성, 프론트는 React-Native와 약간의 React 기반 웹뷰로 진행되고 있다.

---

Webview에서 React로 카카오 지도API를 띄우는 과정에서, 현재 사용자의 위치정보를 받기 위해 Geolocation API를 사용했는데, 로컬에서는 잘 돌아가는 것이 서버에 띄우니까 빈화면이였다...

Geolocation PositionError 어쩌고 저쩌고 나오길래 구글링해봤더니

Geolocation API는 브라우저에서 지원하는 네이티브 API로 localhost가 아니면, https://에서 작동한다는 것이다.

 

유료 ssl을 쓰자니 아직 프로젝트 지원비 신청을 안해서 너무 비싸서 못쓰겠고, openssl 같은걸로 띄우자니 아파치한테 억까 당할 생각을 하니 벌써 머리가 아파왔다... 그렇게 apache2 위에서 ssl 설정을 하려고, 또 구글링을 뒤적뒤적 하려던 찰나에..!

React에서 자체적으로 start할 때 임시로 https로 띄울 수 있다는 어떤 외국인의 가르침을 받았다. 

하핳 어짜피 테스트만 해보면 되니까 아래와 같은 방법으로 해결했다.

 

---

// package.json 에 start-https 추가

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "start-https": "sudo PORT=443 HTTPS=true npm start"
  },

 

실행은 이렇게 해주면 pm2 위에서도 아주 잘 돌아간다.

sudo pm2 start --name "APP" npm -- start

 

단, 공인된 CA기관 인증서를 적용한게 아니기에 브라우저 상에서는 이렇게 뜨고 지도가 뜨는걸 테스트만 해볼 수 있었다.