사용자의 현재위치를 알고 싶어요

개발자 왜?전·2020년 11월 23일
2

진행중인 프로젝트인 Futchall에서 발생한 위치정보 문제를 해결하기 위한 과정을 적은 글 입니다.



기존의 문제점


사용자의 📌위치정보를 가져오기

사용자의 현재위치를 가져오는 API는 Geolocation API가 존재한다. 이는 사용자에게 권한 확인을 받은 후 사용할 수 있다. 사용법은 매우 간단하다.

navigator.geolocation 객체를 이용하면 된다. 그러나 해당 객체가 없을 수도 있으므로 다음과 같은 방식으로 처리하여 사용할 수 있다.

if('geolocation' in navigator) {
  // 위치정보 사용 가능
} else {
  // 위치정보 사용 불가능
}


그러나 오직 https환경에서만 사용가능했다.

따라서 현재 http인 나의 프로젝트에서는 사용이 불가능했다. 애초에 location설정이 Block되어있는 모습이다.

왜?

먼저 HTTPS에 대해 알아볼 필요가 있었다.

HTTPS🔒

http는 hypertext transfer protocol의 약자로 쉽게말해 브라우저와 서버의 통신 규약이다. 다시말해 우리가 데이터를 주고 받는 통신에 있어서의 약속이고 방법이라 할 수 있다.

그러나 이러한 http에는 데이터가 암호화되지 않은 날 것의 상태이기에 정보가 탈취되거나, 전송중 데이터가 변형된다면 치명적이 문제가 발생한다. 그래서 http에 Secure(SSL)를 결합한 HTTPS를 고안했다.

SSL은 http와 독립된 프로토콜이며 http이외에도 사용할 수 있는 네트워크보안기술이다. 상세한 내용은 거두절미하고, SSL프로토콜에 의해 데이터가 암호화된다. 그리고 암호화 할 때 사용되는 Key가 필요하다. 키는 대칭키와 비대칭키가 있다.

대칭키는 하나의 키로 암호화와 복호화한다. 반면 비대칭키는 2개의 키(공개키, 비공개키)로 암호화와 복호화를 한다. 하나의 키로 암호화를 하면 다른 키로 복호화를 할 수 있다. 그렇다면 우리는 키를 가지고 있어야하는데 이러한 키는 CA로 불리는 인증기관에서 인증서를 발급받아야 한다.

돈이 드는거야?


Let`s encrypt

SSL인증서는 이 든다. 그러나 let`s encrypt를 통해 무료로 발급받을 수 있다. let`s encrypt는 자동화된 프로세스를 통해 암호화를 위해 무료 인증서를 제공하는 인증 기관이다.

HTTPS서버

SSL인증서를 받았다고 끝이 아니다. Front node서버가 https서버로 바꿔줘야 한다. 방법은 크게 greenlock을 사용하는 방법과 nginx를 사용하는 방법이 있었다.

greenlock은 lets encrypt를 사용해 SSL을 적용할 수 있는 모듈이다. 반면 nginx는 웹서버로서 더 많은 역할을 담당할 수 있다. 리버스 프록시, 정적파일 처리, 메일 프록시 서버 등 다양한 역할을 할 수 있다. 이러한 이점에 nginx를 사용하기로 결정했다.

Nginx

Nginx는 웹 서버로, 가볍고 높은 성능을 특징으로 한다. Nginx는 요청에 응답하기 위해 비동기 이벤트 기반 구조를 가진다. 점유율이 가장 높은 아파치와 매우 달리한다. 이러한 Event-driven 구조는 여러 커넥션을 Event Handler에서 비동기 방식으로 처리해서 먼저 처리되는 것부터 로직이 진행되도록 한다.



어떻게?🧐


AWS에 nginx 설치

  1. apt-get을 이용해 설치를 한다.
    sudo apt-get install nginx
  2. 이후 vim을 통해 설정파일을 확인할 수 있다.
    sudo vim /etc/nginx/nginx.conf

certbot을 통해 let`s crypt 발급받기

  1. 먼저 certbot-auto를 다운받는다.
    wget https://dl.eff.org/certbot-auto
  2. certbot-auto에 실행권한을 추가한다. (a+x, 모든 사용자에게 실행권한을 부여)
    chmod a+x certbot-auto
  3. 기존서버가 있다면 종료해준다.
    sudo lsof -i tcp:80: 80번 포트에 실행중인지 확인
    kill -9 프로세스아이디 실행중이라면 해당 프로세스아이디를 입력하여 종료
    혹은 pm2를 통해 실행중이라면 npx pm2 kill을 통해 종료
  4. certbot 실행
    ./certbot-auto
    이후 이메일 입력. 해당 이메일은 나중에 3개월이 되면 인증연장 관련 이메일이 오는 계정이다.
  5. 설정이 제대로 되어있는지 확인
    sudo vim /etc/nginx/nginx.conf
    아래와 같이 필요한 내용이 자동으로 설정되어 있다.
  6. 리버스 프록시 설정
    (5)의 설정에 이어서 http블럭내의 server블럭에서 아래와 같이 본 서버(3060port)를 설정해준다.
	location / {proxy_set_header HOST$host;
		proxy_pass http://127.0.0.1:3060;
		proxy_redirect off;
	}


7. nginx를 재실행한다.
sudo systemctl start nginx
8. https설정이 되어있는지 확인한다.



마무리

https의 이해와 더불어 https를 왜 보급하려는지, 왜 let`s encrypt재단을 만들어서까지 노력을 하는지 이해할 수 있었다.
실력을 더 키워, 작게는 npm에 모듈을 올려보며 더 나아가 docker같은 오픈소스를 만들 그날까지 더 노력해야겠다.

profile
하고 싶어 개발하는, 능동개발자

0개의 댓글