Frontend 배포

로컬 PC

# ---------프론트 빌드---------
# 빌드
npm run build

# ---------파일 전송---------
cd dist
zip -r dist.zip ./*
scp -i "C:/Users/KimSangMin/git/miniPX/ignore/mpx2026_3.pem" ./dist.zip ec2-user@43.202.50.109:/home/ec2-user/

서버

# ---------파일 준비---------
sudo mkdir -p /var/www/mpx-frontend
sudo unzip /home/ec2-user/dist.zip -d /var/www/mpx-frontend

# ---------권한 부여---------
sudo chown -R nginx:nginx /var/www/mpx-frontend

# ---------Nginx 설치 및 기본 실행---------
sudo dnf install -y nginx
sudo systemctl enable nginx
sudo systemctl start nginx
sudo systemctl status nginx

# ---------Nginx 설정(프론트 + 백엔드 연동)---------
sudo vi /etc/nginx/conf.d/mpx-frontend.conf

Nginx 설정 파일(그대로 사용하면 됨)

server {
    listen 80;
    server_name _;  # 나중에 도메인 붙이면 여기에 도메인 쓴다 (ex. mini-px.mycompany.com)

    # ─ 프론트 정적 파일 위치 ─
    root /var/www/mpx-frontend;
    index index.html;

    # ─ Vue3 SPA 라우팅 처리 (/some/path도 전부 index.html로) ─
    location / {
        try_files $uri $uri/ /index.html;
    }

    # ─ 백엔드 API 프록시 (/api → Spring Boot 8080) ─
    location /api/ {
        proxy_pass http://127.0.0.1:8080;
        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;
    }
}

• 브라우저에서 서버 ip(80포트)로 접속하면 frontend가 조회됨.

로그 확인

sudo tail -n 100 /var/log/nginx/access.log
sudo tail -n 100 /var/log/nginx/error.log

재배포

로컬

npm run build
cd dist
zip -r dist.zip ./*
scp -i "C:/Users/KimSangMin/git/miniPX/mpxLive2026.pem" dist.zip ec2-user@43.200.173.163:/home/ec2-user/

서버

sudo rm -rf /var/www/mpx-frontend/*
sudo unzip /home/ec2-user/dist.zip -d /var/www/mpx-frontend
sudo chown -R nginx:nginx /var/www/mpx-frontend
# (Nginx 설정 안 건드렸으면 reload 필요 없음, 바로 적용)