nginx로 https 연결하기(502 error해결)

개발공부·2022년 12월 1일
0

React 공부하기

목록 보기
9/14

* 참고

https://opentutorials.org/module/384/3462
https://whatisthenext.tistory.com/123

* 인증서는 발급 받았는 502 error가 뜹니다

(추가사항 2023/02/17)

에러 확인 -> tail /var/log/nginx/error

  • 오류가 [emerg] 8410#8410: bind() to [::]:80 failed (98: Unknown error) 인 경우

lsof -i tcp:80
-> 결과가 아무것도 안 나와야 정상 작동

  • 결과가 나왔는데 아래와 같을 경우
COMMAND  PID     USER   FD   TYPE DEVICE SIZE/OFF NODE NAME
nginx   7995     root    6u  IPv4  37497      0t0  TCP *:http (LISTEN)
nginx   8002 www-data    6u  IPv4  37497      0t0  TCP *:http (LISTEN)

kill -9 8002 kill -9 7995 진행

lsof -i tcp:80 다시 확인 했을 때 아무것도 나오지 않아야 함

systemctl restart nginx 다시 nginx 설정

npx pm2 kill -> npm start로 서버 재시작

* 서버와 클라이언트

▶ 서버 : 정보를 제공하는 쪽
▶ 클라이언트 : 정보를 요청하는 쪽

* http

통신규약(protocol), 웹을 이용하기 위해 준수해야하는 것
▶ 웹서버와 웹클라이언트가 서로 정보를 주고 받기 위한 약속

* 웹 서버(HTTP Server)

웹이라는 서비스를 제공하는 소프트웨어

ex) Apache, Nginx

* Nginx

▶ 동시 접속에 특화된 웹 서버 프로그램
▶ Apache보다 동작이 단순하고 전달자 역할만 함
▶ 비동기적 방식

▶ 1. 웹 브라우저에 HTML, CSS, Javascript, 이미지 같은 정보(정적 파일)를 전송(HTTP 프로토콜 준수)

▶ 2. 리버스 프록시(reverse proxy) : 클라이언트는 가짜 서버에 요청(request)하면 프록시 서버가 배후 서버로부터 데이터를 가져오는 역할
(프록시 서버 : Nginx, 리버스 서버 : 응용 프로그램 서버)
→ 리버스 프록시를 두는 이유 : 요청(request)에 대한 버퍼링이 있기 때문(요청을 배분)

nginx.config 파일에서 location 지시어를 사용해 요청 배분

* 기존 프로젝트(nodebirde)에서 nginx 연결 시 문제점

▶ 기존의 next가 80포트를 사용했는데 nginx 적용 시 nginx가 80포트, next는 80 -> 3060포트로 변경해야 함

front ssh에서 설치, vs code에서 설치함
(설치) sudo apt-get install nginx
(삭제) sudo apt-get remove nginx
(버전 확인) nginx -v

vim /etc/nginx/nginx.conf

proxy_pass는 http://로 시작해야 함

http 설정
include /etc/nginx/conf.d/*.conf;
include /etc/nginx/sites-enabled/*;
                server {
                        server_name 사이트 이름;
                        listen 80;
                        location / {
                                proxy_set_header HOST $host;
                                proxy_pass http://127.0.0.1:3060;
                                proxy_redirect off;
                        }
                }
        }

* https를 위한 인증서를 certbot을 통해 받기

(출처 : https://www.zerocho.com/category/NodeJS/post/5ef450a5701d8a001f84baeb)

sudo snap install certbot --classic
sudo certbot --nginx

* (오류나는 경우)

ertbot.errors.MisconfigurationError: nginx restart failed

nginx -t (nginx는 정상 작동)
nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
nginx: configuration file /etc/nginx/nginx.conf test is successful

▶ nginx가 정상적으로 작동하는데 sudo certbot --nginx 오류라면
pm2가 문제일 수 있음

(포트 80 확인) lsof -i tcp:80
sudo kill pm2 (혹은 sudo pkill -f nginx & wait $!)
sudo certbot --nginx (정상적으로 인증서 발급)

[결과]

Certificate is saved at: /etc/letsencrypt/live/사이트 이름/fullchain.pem
Key is saved at:/etc/letsencrypt/live/사이트 이름/privkey.pem

(sudo nginx -t : nginx 설정 파일 확인)
sudo service nginx restart (재시작)

* systemctl

(설치) sudo apt install systemd
sudo systemctl start nginx

[결과]

COMMAND   PID     USER   FD   TYPE DEVICE SIZE/OFF NODE NAME
nginx   49100     root    6u  IPv4 447719      0t0  TCP *:http (LISTEN)
nginx   49100     root    7u  IPv6 447720      0t0  TCP *:http (LISTEN)
nginx   49101 www-data    6u  IPv4 447719      0t0  TCP *:http (LISTEN)
nginx   49101 www-data    7u  IPv6 447720      0t0  TCP *:http (LISTEN)

* vim /etc/nginx/nginx.conf
▶ 아래 내용이 자동 추가됨

내용 확인 후 저장 esc 버튼 -> :wq!

listen [::]:443 ssl ipv6only=on; # managed by Certbot
    listen 443 ssl; # managed by Certbot
    ssl_certificate /etc/letsencrypt/live/seongong.site/fullchain.pem; # managed by Certbot
    ssl_certificate_key /etc/letsencrypt/live/seongong.site/privkey.pem; # managed by Certbot
    include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot

* nginx 설정 변경 시 다시 시작

sudo systemctl restart nginx

* 43일 때는 location / 적용 (localhost:3060)

* 80일 때 https://$host$request_uri (301은 redirect)

[front]
* vim package.json (i -> :wq! 수정 후 저장)

"start": "cross-env NODE_ENV=production next start -p 80"
-> "start": "cross-env NODE_ENV=production next start -p 3060"

[back]

  • vim server.js(혹은 app.js)

    app.listen(80, (req, res) => {
    console.log("The server is running at port 80");
    });
    -> app.listen(3065, (req, res) => {
    console.log("The server is running at port 80");
    });

* pm2 다시 시작

sudo npx pm2 start npm -- start
sudo npx pm2 monit

사이트 들어가면 주소 옆에 자물쇠 모습 보임(https가 적용된 채 정상적으로 동작함)

profile
개발 블로그, 티스토리(https://ba-gotocode131.tistory.com/)로 갈아탐

0개의 댓글