ec2로 next 배포한 환경에서 nginx로 https 설정하기

naring·2024년 3월 13일
post-thumbnail

우리 프로젝트는 이미 nginx를 설치하고 서버 블록을 설정해둔 상태였다. 따라서 nginx가 잘 설치 되어 있는지 확인하고 바로 certbot을 설치해 주었다.

nginx 설치 확인

sudo service nginx start # nginx 실행
sudo service nginx status # nginx가 잘 실행중인지 확인

lets ecrypt 인증서 발급

certbot 설치

sudo snap install certbot --classic

이때 사용자 이메일을 입력하라고 나온다. 입력하면 된다.

nginx에 ssl 적용하기

sudo certbot --nginx -d stelligence.site
  • 위 명령어로 인증서 발급 & nginx에 인증서 관련 자동 설정 -> 이 부분에 의해 뒷 내용..
  • 위 명령어 작성하면 successfully received certificate 안내와 인증서 정보 줌
  • default 파일 확인
cd /etc/nginx/sites-available
vi default

해당 파일이 존재하는 것을 확인할 수 있다.
보통 sites-available 폴더에 서버 블록을 설정한 설정 파일을 담아놓는다.

원하는이름.conf 파일 작성

conf 파일 앞 이름은 상관 없지만, 위치는 /etc/nginx/sites-available이어야 한다.
이는 ssl 관련 설정을 담는 파일이다.
cd /etc/nginx/sites-available 폴더 내에 원하는이름.conf 파일을 만들어서 설정할 내용을 아래 코드와 같이 작성한다.

# etc/nginx/sites-available/stelligence-ssl.conf

server {
        listen 443 ssl;
        server_name stelligence.site www.stelligence.site;

        location / {
              proxy_pass http://localhost:3000;
        }

        ssl_certificate /etc/letsencrypt/live/stelligence.site/fullchain.pem;
        ssl_certificate_key /etc/letsencrypt/live/stelligence.site/privkey.pem;
        include /etc/letsencrypt/options-ssl-nginx.conf;
        ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem;

}

이때 next를 사용한다면 location/을 proxy_pass로 설정해주어야한다!!! 이 내용을 몰라서 index.html로 설정했다가 오류가 났다 ...
프록시 해줄 내부 주소를 쓰면 된다. localhost를 써도 되고 127.0.0. .. 그거 써도 된다.

sites-avaliable과 sites-enable 심볼릭링크 설정

sites-available 디렉토리와 sites-enable 디렉토리에 심볼릭링크 걸기

  • 심볼릭링크: 링크를 연결하여 원본 파일을 직접 사용하는 것과 같은 효과를 내는 링크
sudo ln /etc/nginx/sites-available/2022-sokdak.conf /etc/nginx/sites-enabled/
  • sites-enable에 존재하는 default 파일은 삭제

nginx 재시작

모두 작성한 뒤 nginx를 재시작 하면 된다!!

쫘라란~

https로 아주 잘 연결된다!~!




혹시 궁금하다면...

우리가 마주했던 많은 에러

처음에는 이렇게 두 개의 서버 블록을 써줬다. 하지만 에러가 났다.
다음 nginx 명령어를 활용해 로그를 찍어 봤다.

nginx에서 에러로그가 존재하는 주소다.

/var/log/nginx/error.log

처음에 다른 글을 참고해서 다음과 같이 설정했는데, index.html 설정 부분에서 에러가 났다. 왜냐... next는 index.html이 없기 때문!
따라서 proxy_pass로 location 부분을 변경해 주었다.

server {
        listen 443 ssl; 
        server_name stelligence.site;

        location / { 
               root /home/ubuntu/stelligence-deploy; 
               index index.html; 
               try_files $uri $uri/ /index.html;
        }

        ssl_certificate /etc/letsencrypt/live/stelligence.site/fullchain.pem;
        ssl_certificate_key /etc/letsencrypt/live/stelligence.site/privkey.pem;
        include /etc/letsencrypt/options-ssl-nginx.conf;
        ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem;

}

server {
        listen 80;
        server_name stelligence.site;
        return 301 https://stelligence.site$request_uri;
}

코드 리팩토링

또한 지난 nginx 설정파일과 certbot이 자동으로 생성해준 코드들이 생겨서 좀 깔끔하게 리팩토링 했다. 각각 코드가 동작하는 방식과 우리의 요구사항을 분석하고 이에 맞춰 코드를 수정했다.

서버 블록에서 server_name은 해당 서버 주소에 해당하는 요청이 왔을 때 해당 블록이 맡아서 처리하도록 하는 역할을 한다.

최종본

# etc/nginx/nginx.conf

server {
    server_name [우리ip주소] stelligence.site www.stelligence.site;
    ## 여기서 ip주소 및 기본 도메인으로 들어오면 해당 서버 블록이 동작해 https로 연결되도록 설정
    listen 80;
    ## http 요청을 해당 블록에서 받는다
    return 301 https://www.stelligence.site$request_uri;
}
# etc/nginx/sites-available/stelligence-ssl.conf
# 해당 서버 블록에서는 https 설정만. 

server {
		listen 443 ssl;
		server_name stelligence.site www.stelligence.site;
		
		location / {
		       proxy_pass http://localhost:3000;
		}
		
		ssl_certificate /etc/letsencrypt/live/stelligence.site/fullchain.pem;
		ssl_certificate_key /etc/letsencrypt/live/stelligence.site/privkey.pem;
		include /etc/letsencrypt/options-ssl-nginx.conf;
		ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem;

}
profile
개발은 즐거워

2개의 댓글

comment-user-thumbnail
2024년 3월 14일

이대로 따라하고 드디어 nginx에 https 설정을 성공했습니다 ㅜㅜ 감사합니다!!

답글 달기
comment-user-thumbnail
2024년 3월 14일

오 써보고 싶네요 감사합니다~! 👍🏻

답글 달기