create-react-app으로 생성한 리액트 프로젝트를 ec2의 우분투 서버(20.x.x)에서
nginx와 letencrypt를 통해 발급받은 ssl을 이용해서 https로 배포하는 방법 정리
(example.com)으로 된 부분은 각자 도메인으로 바꿔주면 됩니다
nginx설치
sudo apt-get update
sudo apt-get install nginx
웹서버 잘 돌아가나 확인 (just 확인용 ㅋㅋ)
sudo service nginx status
서버 블록 설정
우분투에서 nginx설치하면 /var/www/html 생기는데
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패키지로 실행시키거나)/etc/nginx/nginx.conf 에서는 sites-enabled 안에 있는 파일을 읽어온다. 따라서 위에서 작성한 example.com컨피그 파일을 sites-enabled에 리링크시켜줘야한다.
sudo ln -s /etc/nginx/sites-available/example.com /etc/nginx/sites-enabled/
/etc/nginx/nginx.cong 파일 안에서 해시 버킷 메모리 문제 해결하기
(이건 뭔지는 모르겠는데 해주라길래 해줬다)
...
http {
...
server_names_hash_bucket_size 64;
...
}
...
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
nginx restart해주기 → 이거 해줘야 바뀐게 반영 됨
sudo service nginx restart
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
이걸루!
ssl 인증서 얻어오기
sudo certbot --nginx -d example.com
-d 옵션을 주면 오른쪽에 써주는 도메인을 유효하게 만들어 준다고 한다. —nginx 옵션도 줘서 nginx의 설정 파일들에 바로 적용 될 수 있게 한다.
인증서 발급이 진행되면서 여러가지를 입력받는데
1.이멜주소 2.약관동의(A입력) 3.Y입력 4. 80→443 리다이렉션 여부(2입력)
certbot패키지가 인증서를 자동으로 갱신시켜준다고 한다. (야호)
sudo yarn add global serve
npx serve -s build
현재 디렉토리 기준 build 폴더를 root로 치고 안에서 실행한다는 뜻 이건 서버 꺼지면 종료됨nginx 서버를 띄웠다가 안닫고 싹 밀겠다면서 삭제했다.
위의 과정을 다시 반복하고 nginx를 start하니까 실행이 안된다.
에러로그는 뭔말인지 모르겠고 다른 사람들 글 보니까 우분투 20.x.x 문제로
서버를 닫았다가 다시 띄울 때 이전 서버가 계속 떠있는 에러가 있다고 한다.
netstat -anp | grep 80
명령어로 80번 포트를 사용하는 프로세스를 확인하고
sudo fuser -k 80/tcp
명령어로 80번 포트 사용중인 프로세스 kill시켜줬더니 스타트 잘됨
아직 pm2로 실행시키진 않았는데 pm2설치할 때 sudo 안붙여줬더니 설치는 되는데 경로를 못찾아서 pm2명령어 사용 못함
sudo yarn add global pm2
로 설치하기