로컬환경에서 실데이터 테스트 환경 구성하기

로컬에서 프런트를 개발하다 보면, 실제 나가 있는 서버의 데이터를 직접 가져다가 테스트를 해보고 싶은 경우가 생기게 된다.

그러나 프로덕션 혹은 알파 환경에는 해당 페이지의 인증(쿠키)이 필요해서 로컬에서 테스트 해보려할때 사용하는 방식을 기록해두려 한다.

 

예시는 tistory.com의 쿠키를 활용해서 CRA를 통해 만들어진 React 앱에서 요청해보는 것으로 잡는다.

tistory에서 사용하는 쿠키.

localhost 수정하기

CRA는 HOST 환경변수를 이용해서 url 커스터마이즈를 제공한다.

// package.json
...
"scripts": {
  "start": "HOST=local.tistory.com react-scripts start",
  ...
}
...

이렇게 한다고 해도 webpack dev server의 HOST만을 수정하는 거지 실제 dns에 질의할 때 local의 서비스로 요청이 되지 않는다.

그렇기 때문에 이를 바꾸어주기 위해서 /etc/hosts 파일을 수정해주어야 한다.

 

$ sudo vi /etc/hosts
Password:

// /etc/hosts
##
# Host Database
#
# localhost is used to configure the loopback interface
# when the system is booting.  Do not change this entry.
##

127.0.0.1       localhost
255.255.255.255 broadcasthost
::1             localhost

# tistory local dev
127.0.0.1       local.tistory.com

/etc/hosts 파일을 변경하는 걸로 이제 "local.tistory.com"는 제 껍니다.

첫 단계는 완료했다.

 

HTTPS 환경 만들기

brower api를 사용은 경우 localhost가 아닌 경우에는 chrome의 보안정책에 따라 http에서는 일부 api들이 제한이 된다.

이를 위해 local환경의 도메인에 인증서를 붙여주고 이를 신뢰시키는 과정이 필요하다.

 

로컬에서 CA를 생성하는 방법에는 여러 방법이 있는데 오늘은 mkcert를 소개해보려고 한다.

mkcert는 이런 상황을 위해 만들어진 도구로 간편하게 인증 서울 만들떄 유용하고 설치도 brew로 간단하게 가능하기에 추천한다.

$ brew install mkcert

 

mkcert가 준비되었다면 인증서을 만들고 webpack-dev-server에 연결해보자.

인증서 생성 끝.

mkcert -install 

CRA 환경에서 webpack을 수정해주기 위해서는 craco나 react-app-rewired를 활용해주어야 한다.

$ yarn add react-app-rewired

// config-overrides.js
module.exports = {
  devServer: function (configFunction) {
    return function (proxy, allowedHost) {
      const config = configFunction(proxy, allowedHost);
      const fs = require('fs');
      config.https = {
        key: fs.readFileSync('./local.tistory.com-key.pem', 'utf8'),
        cert: fs.readFileSync('./local.tistory.com.pem', 'utf8'),
      };

      return config;
    };
  },
};

webpack-dev-server에 인증서 파일을 연결해주었다.

이제 react-scripts가 아닌 react-app-rewired를 통해 앱을 실행하게 하고, HTTPS=true 플래그를 줘서 https로 실행하게 npm script를 수정하면 된다.

// package.json
...
"scripts": {
  "start": "HOST=local.tistory.com HTTPS=true react-app-rewired start",
  ...
}
...

https로 성공적으로 떴다.

만약 신뢰할 수 없는 인증서라고 나온다면,

$ mkcert -install

 

을 하고 다시 인증서를 발급해보면 된다.

또는 

$ sudo security add-trusted-cert -d -r trustRoot -k /Library/Keychains/System.keychain ./local.tistory.com.pem

 

를 해주고, mac 키체인 접근에 들어가서 mkcert에서 발급된 인증서의 신뢰 단계를 항상 신뢰로 변경하면 됩니다.

항상 신뢰로 변경

마무리

이렇게 해서 우리는 로컬 페이지에서. tistory.com의 쿠키를 전부 액세스 할 수 있게 구성을 했고, XMLHttpRequest.withCredentials옵션을 사용해서 서버로 요청하게 된다면 동일한 인증을 가져갈 수 있다. 

 

cors 정책으로 인한 이슈를 피하기 위해서는 3000번 포트를 443으로 해주긴 해야 한다.

저는 이럴 때 docker로 nginx를 띄워서 아래와 같이 conf를 적용해서 작업합니다.

nginx.conf

user  nginx;
worker_processes  1;
error_log  /var/log/nginx/error.log warn;
pid        /var/run/nginx.pid;
events {                     
    worker_connections  1024;
}
http {
    include       /etc/nginx/mime.types;
    default_type  application/octet-stream;
    
    server {
        listen 443 ssl;
        server_name local.tistory.com;
        
        ssl_certificate /app/cert/cert.pem;
        ssl_certificate_key /app/cert/key.pem;
        ssl_prefer_server_ciphers on;

        location / {
            proxy_pass         http://host.docker.internal:3000;
            proxy_redirect     off;
            proxy_set_header   Host $host;
            proxy_set_header   X-Real-IP $remote_addr;        
        }
    }
    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';
    access_log  /var/log/nginx/access.log  main;
                                                
    sendfile        on;                                                                         
    keepalive_timeout  65;                                                                      
    include /etc/nginx/conf.d/*.conf;           
}