[알토르] #13 Web server(Nginx)를 사용해 웹페이지 배포하기

Hyungjun·2024년 6월 16일

알토르

목록 보기

15/23

Mission

웹서버가 무엇인지 (nginx, apache … )
ec2서비스에 nginx설치하고 ip주소입력을 브라우저에하면 welcome nginx페이지가 보이게끔 셋팅해보기
도메인을 구매
도메인과 Ec2서비스 연동

배경지식

1. 오해

flask로 만든 api server도 서버이다. 그럼 nginx와 apache와 같은 웹서버는 무엇인가? 또 서버가 나오니 당황해서 잘 이해가 되지 않았다. 멘토님의 답변으로 이해할 수 있었다....

결론은 flask도 서버고 nginx도 웹서버다. 앞단에 nginx를 두는 이유는 다른 언어로 동적 웹을 만들어 제공해주기 위함이다. 또한 웹서버가 제공하는 다양한 기능이 있기 때문이다.

2. Web 서버

web 서버는 컴퓨터로 하여금 웹을 제공하는 기능을 만들어주는 소프트웨어이다. 제공하는 웹은 정적 웹인지 동적 웹인지 나뉜다. 정적 웹이면 그냥 파일 내의 html, css, js 파일을 전달해 웹페이지를 제공한다. 하지만 사용자가 글이나 댓글을 입력할 때마다 변화화는 동적 웹은 WAS가 제공하거나 nginx나 apache의 모듈로도 제공가능하다.

web 서버를 사용하는 가장 큰 이유는 리버스 프록시 역할이다. 리버스 프록시(Reverse Proxy)는 클라이언트의 요청을 받아서 이를 원격 서버(예: 애플리케이션 서버)로 전달하고, 다시 원격 서버로부터의 응답을 받아 클라이언트에게 전달하는 중계 서버 역할을 하는 장치나 소프트웨어다.

3. 리버스 프록시의 주요 기능

로드 밸런싱
- 여러 서버에 걸쳐 클라이언트의 요청을 분배하여 부하를 분산시킨다.
- 고가용성과 성능 향상을 위해 사용된다.
보안
- 실제 서버의 IP 주소를 숨김으로써 보안을 강화한다.
- SSL 종료(TLS 종료) 기능을 제공하여 SSL 인증 및 처리 부담을 덜 수 있다.
캐싱
- 정적 콘텐츠 또는 빈번하게 요청되는 리소스를 캐싱하여 성능을 향상시킨다.
- 클라이언트의 요청을 조금 더 빠르게 처리할 수 있다.
압축
- 클라이언트에게 전송하기 전에 응답을 압축하여 대역폭을 절약할 수 있다.
애플리케이션 방화벽
- 특정한 HTTP 요청을 필터링하거나 도메인에 대한 접근을 제어하여 보안을 강화한다.

4. 동작 구조

리버스 프록시는 사용자의 요청을 프록시 서버가 받아서 내부 네트워크의 다른 서버로 전달한다.

클라이언트 -> 리버스 프록시 (Nginx) -> 애플리케이션 서버 (Flask, Node.js)

server {
    listen 80;
    server_name yourdomain.com;

    location / {
        proxy_pass http://localhost:3000; # Next.js 애플리케이션
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;

        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }

    location /api/ {
        proxy_pass http://localhost:5000; # Flask 애플리케이션
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;

        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}

클라이언트의 / 경로 요청을 localhost:3000 (Next.js)으로 전달한다.
클라이언트의 /api/ 경로 요청을 localhost:5000 (Flask)으로 전달한다.

실습

1. 이해

지금까지 next.js로 프론트엔드 코드를 작성하였고 flask로 api server 코드를 작성하였다. VSC에서 이 두 코드를 내 컴퓨터의 Localhost에 각각 실행할 수 있다.

이제는 다른 사람들도 내 웹페이지를 제공받을 수 있어야 한다. 이를 nginx가 한다. 하지만 내 컴퓨터에 다운받아 웹을 제공하면 내 컴퓨터가 24시간 구동되고 있어야 한다. 그것은 말이 안되기 때문에 저번에 만들어 놓은 24시간 돌아가는 AWS EC2 인스턴스를 사용해야 한다.

EC2 인스턴스는 컴퓨터라고 생각하면된다.
1. 이곳에 flask 구동을 위해 Python을 다운받고 next.js를 구동하기 위해 node.js를 다운받는다.
2. 내 컴퓨터 안에 코드 파일을 EC2로 복사해 전달한다.
3. nginx를 다운받아 flask 코드는 Localhost:4000에서 구동된다는 정보를 입력해준다. (next.js 코드는 vercel에 따로 배포할 예정이다.)
4. 여기서 Localhost는 EC2 컴퓨터 안의 localhost로 내 컴퓨터와는 전혀 상관이 없다.
5. vercel에 배포하고 도메인과 연결해 둔다.
6. flask는 백엔드 코드이기 때문에 front에서 api 요청을 하면 nginx가 flask로 연결해준다.
7. 채용담당자가 도메인을 웹브라우져에 입력하면 vercel의 네임서버에서 웹페이지를 제공해준다.
8. 챗봇에 질문을 입력하여 답변을 요청하면 웹 서버인 nginx가 flask로 연결해 assistnat api를 이용해 답변을 받아와 front에 제공한다.

출처
https://velog.io/@beegoat/Web-%EC%9B%B9%EC%84%9C%EB%B2%84-API-%EC%84%9C%EB%B2%84
https://velog.io/@ksy1221/%EC%8A%A4%ED%84%B0%EB%94%94-REST-API-%EC%9B%B9-%EC%84%9C%EB%B2%84%EC%99%80-WAS%EC%9D%98-%EC%B0%A8%EC%9D%B4%EC%A0%90