알토르 6주차 과제 추가

알토르 6주차 과제 추가

Fetch Endpoint 수정
CORS Header 수정

systemctl daemon-reload
systemctl restart flaskapp
systemctl status flaskapp

Endpoint 수정 후
app.py fetch URL 수정

CORS 문제
Vercel 임시 도메인도 추가 입력

LOCAL에서 APP.PY 실행

CORS 문제라고 CORS만의 문제가 아니다
브라우저의 문제
Nginx 설정 파일
서버 블록 중복 시 CORS 오류 발생 가능
서버 네임 다중으로 할 시 오류 발생
루트 도메인 인증서 생성

 certbot --nginx -d orkr.shop -d www.orkr.shop

# HTTP 서버 블록 - Certbot 인증용
server {
    listen 80;
    listen [::]:80;

    server_name orkr.shop www.orkr.shop;

    root /var/www/html;  # 정적 파일 위치

    # Certbot 인증용 경로
    location /.well-known/acme-challenge/ {
        allow all;
    }

    # 인증서 발급 전에는 HTTPS 리다이렉트는 막아도 됨
    location / {
        try_files $uri $uri/ =404;
    }
}

CORS 멀티 도메인으로 오류 발생

CORS *으로 확인

로컬호스트로 접근 가능

퍼블릭 IP:5000 으로 접근 가능

퍼블릭 IP:5000 으로 접근 가능

subdomain 접근 가능

---

app.py 도메인 싱글 설정

---

80 -> 443 -> 5000

vi /etc/nginx/sites-available/default

# HTTP 요청 → HTTPS 리다이렉트
server {
    listen 80;
    server_name aws.orkr.shop;

    return 301 https://$host$request_uri;
}

# HTTPS 요청 → 백엔드 API 서버(5000) 프록시
server {
    listen 443 ssl;
    server_name aws.orkr.shop;

    # certbot에서 발급한 인증서 경로
    ssl_certificate /etc/letsencrypt/live/aws.orkr.shop/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/aws.orkr.shop/privkey.pem;
    include /etc/letsencrypt/options-ssl-nginx.conf;
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem;


    location / {
    if ($request_method = OPTIONS ) {
        add_header Access-Control-Allow-Origin "$http_origin" always;
        add_header Access-Control-Allow-Methods "GET, POST, OPTIONS" always;
        add_header Access-Control-Allow-Headers "Origin, X-Requested-With, Content-Type, Accept, Authorization";
        add_header Content-Length 0;
        add_header Content-Type text/plain;
        add_header Content-Type text/plain;
        return 204;
    }

    proxy_pass http://127.0.0.1:5000;
    proxy_http_version 1.1;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
        }

POST 200 OK

Blank Bubble

curl 정상 작동

POSTMAN 정상 작동

Browser Console 정상 작동

response로 변경

bot_reply

https://youtu.be/s54r4nRhf8Y?si=kMRaMc0eKobEJd55
https://youtu.be/HjlqpOfx_m4?si=OytiJXy4cuepT053
https://youtu.be/YSrOmbDocO0?si=YAJjI9AjebMoIAVJ

• Mongo DB가 무엇인지
• Atlas에서 몽고DB 세팅
• 사용자가 메세지를 보내고 openAI한테응답을 받고나서 mongoDB 질문과 답변, 날짜등 데이터를 저장해보기 (Backend)

SPA

• 단일 페이지로만 구성된 애플리케이션
• 최초 1번만 서버로부터 정적 리소스 다운로드 후
• 새로운 페이지 요청 시
  - 페이지 이동 없이 해당 데이터가 필요한 부분만 갱신
• 자바스크립트 라우팅으로 데이처 처리
• CSR

MPA

• 여러 페이지로 웹 아키텍쳐를 보여주는 구조
• 새로운 페이지 요청 시
  - 전체 페이지 정적 리소스를 다시 다운로드받아 다른 페이지로 보여준다
• 페이지 이동 및 수정 시 전체 페이지가 다시 렌더링
• SSR
• 이미 서버에서 모든 리소스를 다운받아서 제공하기에 SEO 유리