TIL# 156 서버 하나에서 백엔드 프론트엔드 같이 배포하기

아마존 lightsail을 처음 사용해보게 되면서 하나의 서버에서 backend, frontend를 같이 배포하게 되었다. 하나의 nginx에서 같이 배포를 하게 된거라 많은 시행착오가 있었고 시간이 오래 걸렸지만 앞으로는 절대 안 까먹을 것 같다😅

nginx 설정

# sudo vim /etc/nginx/sites-available/default

server {
	listen 80 default_server;
    listen [::]:80 default_server;
    
    # 프론트 엔드 설정
    
    root 프론트 빌드 후 생긴 dist 폴더 경로;
    
    index index.html;
    
    server_name _; # 수정해도 되고 안해도 됨
    
    location / {
    	try_files $uri $uri/ /index.html;
    }
    
    # 백엔드 설정 
    
    location /api/ {
    	# gunicorn 으로 사용할 때
        proxy_pass http://unix:/run/gunicorn.sock;
        
        # python runserver 로 사용할 때 (디버깅)
        proxy_pass http://127.0.0.1:8000;
    }

📌 IP가 하나이기 때문에 프론트 엔드 프로젝트에서 백엔드로 요청 보내는 uri를 프론트엔드와 같은 IP로 설정해주면 된다. 물론 백엔드 api들의 url 주소가 /api 로 시작하게 만들어야 가능하다.