[스나이퍼팩토리] 한컴AI아카데미(26.05.13)

 

- 네트워크

https://www.hosting.kr/

호스팅케이알 - Your Global IT Partner | 도메인, 웹호스팅, SSL, 오피스, 서버

 

https://dash.cloudflare.com/

Cloudflare Dashboard | Manage Your Account

 

- PythonAnyWhere: 파이썬 프로그래밍 언어 기반의 웹 호스팅 서비스이자 온라인 통합 개발 환경

 

가상 서버 3개 구성 (Front Server, Back Server, DB Server)

 

- 구성

---

1. Front Server

 

1단계: BACK(Flask) Server를 Front Server에 복사하기

(단, Flask, GNICON 등 NGINX 외의 구성은 삭제)

 

2단계: 웹 리소스 저장소(www) 생성 및 권한 설정

Nginx가 특정 폴더의 파일을 읽으려면 시스템 권한이 정확히 설정되어야 합니다.

• 폴더 생성: 홈 디렉토리에 정적 파일을 담을 www 폴더를 만듭니다.

cd ~
mkdir www
#www 경로: home/hancom/www

• 소유권 변경: 폴더 관리 권한은 본인(hancom)이 갖고, Nginx(www-data 그룹)도 읽을 수 있게 설정합니다.

#소유자는 hancom 유지, 그룹만 www-data로 변경
sudo chown -R hancom:www-data www

#소유자(hancom)에게 읽기/쓰기/실행(7) 권한 부여, 그룹 및 타인에게는 읽기/실행(5) 권한 부여
sudo chmod -R 755 www

#www-data 가 /home/hancom 을 통과(x)할 수 있도록 권한 조정
sudo chmod 711 /home
sudo chmod 711 /home/hancom

 

3단계: Nginx 설정

• 1: Nginx 설치 및 기본 설정 초기화
• 2: 서비스 설정 파일 생성

Flask 앱을 위한 전용 설정 파일을 생성합니다.

sudo nano /etc/nginx/sites-available/myflaskapp

편집기(nano)가 열리면 아래 내용을 복사-붙여넣기

Nginx

server {
    listen 80;
    server_name localhost;
    # listen 80;: HTTP 기본 포트인 80번으로 들어오는 요청을 듣겠다는 뜻입니다.
    # server_name localhost;: 서버의 이름을 정의합니다. 로컬 환경에서 테스트 중이거나, 특정 도메인이 없을 때 주로 사용합니다.

      location / {

        root /var/www/html; 
        index index.html index.htm;

    }
    # location /: 사용자가 주소 뒤에 아무것도 붙이지 않고 접속했을 때(예: http://localhost/)의 동작입니다.
    # root /var/www/html;: 웹사이트의 실제 파일들이 저장된 경로를 지정합니다.
    # index index.html;: 해당 폴더에서 어떤 파일을 기본으로 보여줄지 결정합니다. 즉, 프론트엔드(HTML/JS/CSS) 파일을 배포하는 설정입니다.

        location /api {
        proxy_pass http://10.0.2.17:5000;
        include proxy_params;

    }
    # location /api: 주소창에 http://localhost/api...라고 요청이 들어오면 이 규칙을 따릅니다.
    # proxy_pass [http://127.0.0.1:5000/](http://127.0.0.1:5000/);: 핵심 기능입니다! /api로 들어온 요청을 서버 내부에서 실행 중인 5000번 포트(예: Python Flask, Node.js 등)로 토스(Toss)해줍니다.
    # 주의할 점: 끝에 /가 붙어 있으면, 들어온 요청에서 /api를 떼고 전달합니다. (예: /api/login -> 5000번 서버의 /login으로 전달)
    # 만약 /가 안 붙어있으면 Nginx가 /api라는 경로를 떼지 않고 통째로 넘겨버립니다. 따라서 백엔드 서버에서도 /api/login이라는 경로로 API가 만들어져 있어야 합니다.
    # include proxy_params;: 프록시 전달 시 필요한 부가적인 정보(접속자의 원래 IP 주소, 프로토콜 등)를 담은 설정 파일을 불러옵니다. 이게 있어야 백엔드 서버가 "누가 접속했는지" 정확히 알 수 있습니다.
}

• 3: 설정 활성화 및 적용

4단계: www 폴더에 index.html 파일 생성

---

2. Back Server

 

1단계: Back 서버에 있는 Flask 코드 (app.py)에 flask_cors 모듈 설치하기

(flask_cors: Flask 애플리케이션에서 교차 출처 리소스 공유(CORS) 문제를 해결하기 위한 파이썬 확장 라이브러리)

from flask import Flask, jsonify
from flask_cors import CORS # CORS 라이브러리 가져오기

app = Flask(__name__)
CORS(app) # 💡 핵심: 모든 외부 직접 요청을 허용하겠다는 설정!

@app.route('/api/movies')
def get_movies():
    return jsonify(["인셉션", "인터스텔라", "다크나이트"])

if __name__ == '__main__':
    app.run(host='0.0.0.0', port=8080)

 

2단계: Gunicorn, Nginx 연결하기

* 연결하는 이유

1. 백엔드 서버의 권장 구조
백엔드 서버 내부에서는 다음과 같은 흐름으로 요청이 처리됩니다. 브라우저 → 백엔드 Nginx → Gunicorn → Flask

Nginx (Reverse Proxy): 프론트엔드 서버로부터 오는 요청을 제일 먼저 맞이합니다. 보안(SSL/HTTPS 설정), 버퍼링, 정적 파일 처리 등을 담당합니다.

Gunicorn (WSGI Server): Flask는 태생이 "개발용" 서버라 한 번에 많은 요청을 처리하지 못합니다. Gunicorn이 중간에서 여러 개의 프로세스(Worker)를 띄워 Flask가 동시에 여러 요청을 처리할 수 있게 도와줍니다.

Flask (App): 순수하게 비즈니스 로직(DB 연동 등)만 처리합니다.

2. 왜 백엔드에도 Nginx가 필요한가요?
이미 프론트 서버에 Nginx가 있는데 왜 백엔드에 또 설치해야 하는지 의문이 드실 수 있습니다.
보안 및 포트 관리: Flask는 보통 5000번 포트를 쓰지만, 외부에는 80이나 443으로 노출하고 싶을 때 Nginx가 이를 중계해 줍니다.안정성: Flask가 직접 외부 인터넷에 노출되면 공격에 취약할 수 있습니다. Nginx가 방패막이 역할을 합니다.로드 밸런싱: 나중에 백엔드 서버를 여러 대(백엔드1, 백엔드2...)로 늘릴 때, Nginx가 요청을 골고루 분배해 줍니다.

 

---

3. DB Server

 

1단계: DB 생성 및 테이블 생성 (DDL 외 DML 작업)

 

2단계: Back 서버와 연결할 때 사용할 유저한테 해당 DB 권한 부여하기

 

                                                        

 

 

 

 

 

 

——————————————————————————

본 후기는 [한글과컴퓨터x한국생산성본부x스나이퍼팩토리] 한컴 AI 아카데미 (B-log) 리뷰로 작성 되었습니다.