ubuntu(20.x.x) nginx, letsencrypt(certbot)으로 cra 리액트프로젝트 https 적용하기

한지원·2022년 1월 20일
1

create-react-app으로 생성한 리액트 프로젝트를 ec2의 우분투 서버(20.x.x)에서

nginx와 letencrypt를 통해 발급받은 ssl을 이용해서 https로 배포하는 방법 정리

(example.com)으로 된 부분은 각자 도메인으로 바꿔주면 됩니다

  1. nginx없이 aws의 ACM을 통해 발급받은 SSL과 ALB을 이용해서 https 포트 열어주고 80포트의 접속 443으로 리다이렉션 시켜주기
    → 실패함, 일단 로드밸런싱의 대상그룹에서 내가 띄운 인스턴스의 헬스체크가 진행되지 않는 상태였고, 서버에서 클론받은 리액트 앱을 실행시켜줘도 502에러가 떴다.
    또 로드밸런싱이 유료서비스라는 포스팅도 있고 아니라는 글도 있어서 어딘가 찝찝했다.
    결국 방법을 바꾸기 위해 로드밸런싱, 대상그룹, ssl을 삭제했다.
  2. nginx와 certbot을 통해 발급받은 ssl이용하기

    nginx 셋팅

    1. nginx설치

      sudo apt-get update

      sudo apt-get install nginx

    2. 웹서버 잘 돌아가나 확인 (just 확인용 ㅋㅋ)

      sudo service nginx status

    3. 서버 블록 설정

      우분투에서 nginx설치하면 /var/www/html 생기는데

      • /var/www/내 도메인/으루 폴더 만들어줘야 함 글고 여기에 index.html파일 넣어줄꺼임 (←꼭 해야하는 과정일까? 나중에 /etc/nginx/sites-available/example.com 에서 config 만들어줄껀데 여기에서 root url만 내 프로젝트의 buil파일로 지정해주면 되지 않을까?)
      • /etc/nginx/sites-available/ 에 도메인명으로 된 파일(예시: example.com) 만들고 내용 추가하기
        server {
                listen 80;
                listen [::]:80;
        
                root /var/www/example.com;
                index index.html index.htm index.nginx-debian.html;
        
                server_name example.com;
        
        				location / {
        								#try_files $uri $uri/ =404; 주석처리
                        proxy_pass http://localhost:3000;
                        proxy_set_header X-Real-IP $remote_addr;
                        proxy_set_header X-Forward-For $proxy_add_x_forwarded_for;
                        proxy_set_header Host $http_host;
                }
        }
        proxy_pass : 리버스 프록시라는건데 나중에 80포트로 들어오는걸 저 아이피로 호스팅시켜준다는 뜻인것 같다. 그래서 저 3000번 포트가 실행중이어야하는데 cra으로 생성한 리액트 프로젝트는 서버를 따로 띄워주지 않으면 yarn start로는 파일을 serve하지는 않는다고 한다. 따로 서버를 띄워줘야한다는 뜻 (express건 nginx로든, 아니면 지금처럼 nginx로 프록시패스만 설정해주고 serve패키지로 실행시키거나)
    4. /etc/nginx/nginx.conf 에서는 sites-enabled 안에 있는 파일을 읽어온다. 따라서 위에서 작성한 example.com컨피그 파일을 sites-enabled에 리링크시켜줘야한다.

      sudo ln -s /etc/nginx/sites-available/example.com /etc/nginx/sites-enabled/

    5. /etc/nginx/nginx.cong 파일 안에서 해시 버킷 메모리 문제 해결하기

      (이건 뭔지는 모르겠는데 해주라길래 해줬다)

      ...
      http {
          ...
          server_names_hash_bucket_size 64;
          ...
      }
      ...
    6. nginx 설정 잘 됐는지 문법적 오류는 없는지 체크

      (이건 안해줘도 될줄알았는데 엔진엑스를 start할 때 오류가 있으면 서버가 죽는다고 한다.)

      sudo nginx -t

      요렇게 뜨면 합격

      nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
      nginx: configuration file /etc/nginx/nginx.conf test is successful

    7. nginx restart해주기 → 이거 해줘야 바뀐게 반영 됨

      sudo service nginx restart

      SSL 생성하고 nginx에 연결해주기(certbot 사용하기)

    8. certbot 설치

      sudo add-apt-repository ppa:certbot/certbot

      나는 이렇게 하면 에러났다. 그래서

      sudo apt-add-repository -r ppa:certbot/certbot 이걸루 !!!

      위에껀 레포지토리 추가해주는거고 아래가 certbot설치

      sudo apt install python-certbot-nginx

      난 이것도 에러났다. (내 ec2서버에는 python3이 깔려있어가지고~) 그래서

      sudo apt-get install certbot python3-certbot-nginx 이걸루!

    9. ssl 인증서 얻어오기

      sudo certbot --nginx -d example.com

      -d 옵션을 주면 오른쪽에 써주는 도메인을 유효하게 만들어 준다고 한다. —nginx 옵션도 줘서 nginx의 설정 파일들에 바로 적용 될 수 있게 한다.

      인증서 발급이 진행되면서 여러가지를 입력받는데
      1.이멜주소 2.약관동의(A입력) 3.Y입력 4. 80→443 리다이렉션 여부(2입력)

      certbot패키지가 인증서를 자동으로 갱신시켜준다고 한다. (야호)


    여기까지 진행하고 example.com로 접속하면 https로 리다이렉션은 잘 되는데 502에러가 뜬다. 3000번 포트가 닫혀있기 때문! 그냥 리액트 프로젝트에서 yarn start를 해주면 빌드 파일이 아닌 전체 프젝이 서버에 띄워지기 때문에 리액트 프로젝트 안에서 빌드파일을 실행시키는 서버를 띄워줘야 한다.

    serve패키지 설치

    1. sudo yarn add global serve
    2. npx serve -s build 현재 디렉토리 기준 build 폴더를 root로 치고 안에서 실행한다는 뜻 이건 서버 꺼지면 종료됨

문제들 → 해결

  1. nginx 서버를 띄웠다가 안닫고 싹 밀겠다면서 삭제했다.

    위의 과정을 다시 반복하고 nginx를 start하니까 실행이 안된다.

    에러로그는 뭔말인지 모르겠고 다른 사람들 글 보니까 우분투 20.x.x 문제로

    서버를 닫았다가 다시 띄울 때 이전 서버가 계속 떠있는 에러가 있다고 한다.

    netstat -anp | grep 80 명령어로 80번 포트를 사용하는 프로세스를 확인하고

    sudo fuser -k 80/tcp 명령어로 80번 포트 사용중인 프로세스 kill시켜줬더니 스타트 잘됨

  1. 아직 pm2로 실행시키진 않았는데 pm2설치할 때 sudo 안붙여줬더니 설치는 되는데 경로를 못찾아서 pm2명령어 사용 못함

    sudo yarn add global pm2 로 설치하기

0개의 댓글