프론트엔드에서 cors를 처리하는 방법은 여러가지가 있다.
그중에서도 가장 간단한게 이미 구현되어있는 proxy서버의 url을 request api앞에다가 붙여서 cors를 우회하는 방법이 있다.
이미 cors-anywhere이라는 너무나 유명한 repository가 있을 정도로 대중적으로 쓰이는 방법이다.

헌데, cors-anywhere를 만들어주셨던 멋진 개발자분께서 heroku 서버 트래픽 문제 및 여러가지 어른의 사정으로 서버를 셧다운하셨다.
우리가 직접 해당 repo를 folk 하여 heroku에 deploy하는 방법도 있지만, heroku는 서버가 미국에 있기에 아무리 빠른 멤버십을 사용해도..통신이 오래 걸린다는 치명적인 단점이 있었다.
특히 우리 회사는 큰 용량의 pdf 파일을 CORS우회를 통해 받아내야했기에..한국에 서버를 두고 있는 AWS서비스를 이용해서 자체 proxy server를 배포하기로 결정했다.
(물론 이미 AWS를 사용했기에..겸사겸사 사용한 것!)

기능이 단순한 서버를 띄우는 것이기에 Elastic Beanstalk를 이용해서 배포를 진행했다.

AWS Elastic Beanstalk란?
heroku, netlify처럼 간단하게 프로젝트만 올리면 알아서 뚝딱뚝딱 빌드도 해주고 간단한 배포도 해주는 서비스

간단하다고는 하지만 heroku나 netlify만 사용하던 사람에게는 은근 난이도가 있는 일이기에 아래와 같이 매뉴얼을 남겨본다.
(아래의 메뉴얼은 cors-anywhere를 folk했다는 전제 하에 작성)

1. package.json 설정

Elastic Beanstalk는 npm start를 자동적으로 돌리기에, package.json부분에다가 "start" :"node server.js"와 같이 실행할 자바스크립트를 기재해준다.

"scripts": {
    "start": "node server.js", // 이런식으로 기재
    "lint": "eslint .",
    "test": "mocha ./test/test*.js --reporter spec",
    "test-coverage": "istanbul cover ./node_modules/.bin/_mocha -- test/test.js test/test-ratelimit.js --reporter spec"
  },

2. proxy port 설정

기본적으로 cors-anywhere는 host: 0.0.0.0 port: 8080으로 설정되어있다. (server.js보면 적혀있음)
이를 우선 실행하기 편하게 host를 127.0.0.1(localhost)로 변경해주었다.

Elastic Beanstalk의 config도 수정을 해줘야된다.
왜냐하면..Elastic Beanstalk는 기본적으로 nginx기반으로 움직이기에 기본 서버가 80으로 셋팅되어있다!
그렇기에 port를 변경해줘야한다.
(귀찮으면 사실 server.js에서 port변경해도됨)

Elastic Beanstalk의 config를 변경하려면, 우선 프로젝트의 root directory에다가 .ebextensions라는 폴더를 만들고, 그 안에다가 proxy.conf라는 파일을 만들어주면 된다.
(폴더명은 사실 상관이 없고..확장자만 잘 입력해주면 된다)

그리고 해당 파일에다가 아래와 같이 입력해준다.
아래는 AWS에 올라온 예제코드이다

files:
  /etc/nginx/conf.d/proxy.conf: // 파일명 변경해야되는 경우 변경할 것
    mode: "000644"
    owner: root
    group: root
    content: |
      upstream nodejs {
        server 127.0.0.1:8080; // 원하는 port로 고쳐놓는다
        keepalive 256;
      }

      server {
        listen 8080;

        if ($time_iso8601 ~ "^(\d{4})-(\d{2})-(\d{2})T(\d{2})") {
            set $year $1;
            set $month $2;
            set $day $3;
            set $hour $4;
        }
        access_log /var/log/nginx/healthd/application.log.$year-$month-$day-$hour healthd;
        access_log  /var/log/nginx/access.log  main;

        location / {
            proxy_pass  http://nodejs;
            proxy_set_header   Connection "";
            proxy_http_version 1.1;
            proxy_set_header        Host            $host;
            proxy_set_header        X-Real-IP       $remote_addr;
            proxy_set_header        X-Forwarded-For $proxy_add_x_forwarded_for;
        }

        gzip on;
        gzip_comp_level 4;
        gzip_types text/html text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript;

        location /static {
            alias /var/app/current/static;
        }

      }

  /opt/elasticbeanstalk/hooks/configdeploy/post/99_kill_default_nginx.sh:
    mode: "000755"
    owner: root
    group: root
    content: |
      #!/bin/bash -xe
      rm -f /etc/nginx/conf.d/00_elastic_beanstalk_proxy.conf
      service nginx stop 
      service nginx start

container_commands:
  removeconfig:
    command: "rm -f /tmp/deployment/config/#etc#nginx#conf.d#00_elastic_beanstalk_proxy.conf /etc/nginx/conf.d/00_elastic_beanstalk_proxy.conf"

3. 프로젝트 압축하기

Elastic Beanstalk에는 프로젝트를 한 파일로 압축해서 업로드해줘야 빌드 및 배포가 가능하다.
압축 파일은 해당 루트 디렉토리 안에다가 만들어야 한다..!
루트 디렉토리 째 압축을 하는게 아니다. 배포에 필요한 파일들만 모아서 압축해야된다

4. 프로젝트 배포하기

압축을 완료했으면 Elastic Beanstalk에다가 올린다.
(이 부분은 구글링하면 리소스가 많기에 생략)