1台のTIL#156サーバにバックエンドフロントエンドのように配備


アマゾンLightsailを初めて使用した後、バックエンドとfrontendを1台のサーバに同時に導入しました.1つの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は1つしかないので、フロントエンドアイテムがバックエンドに要求を送信するuriをフロントエンドと同じIPに設定することができる.もちろん、バックエンドapiのurlアドレスを/apiで始まる必要があります.