개념
클라이언트(브라우저)가 Apache 웹 서버(80번 포트)에 요청을 보내면, Apache가 그 요청을 대신 받아서 Next.js 개발 서버(예: 3000번 포트)로 전달해 주고, Next.js 서버에서 처리된 응답을 다시 받아서 클라이언트에게 전달해 주는 역할을 해요.
준비물
- Apache 웹 서버: 컴퓨터에 Apache가 설치되어 있고 실행 중이어야 합니다.
- Ubuntu/WSL:
sudo apt update && sudo apt install apache2 - Windows: Apache를 별도로 설치하거나 XAMPP 같은 툴을 사용할 수 있습니다.
- Ubuntu/WSL:
- Next.js 개발 서버: 3000번 포트(또는 다른 포트)에서 Next.js 앱이 실행 중이어야 합니다.
npm run dev로 Next.js 앱을 실행해 주세요.
Apache 리버스 프록시 설정 단계
이제 단계별로 Apache를 설정해 볼게요! 이 설명은 Ubuntu/WSL 환경을 기준으로 작성되었지만, Windows 환경에서도 설정 파일 위치만 다를 뿐 유사하게 적용할 수 있습니다.
단계 1: 필요한 Apache 모듈 활성화
리버스 프록시 기능을 사용하려면 몇 가지 Apache 모듈이 활성화되어 있어야 해요. 터미널을 열고 다음 명령어를 입력해 주세요.
bash
sudo a2enmod proxy proxy_http headers
sudo systemctl restart apache2 # 또는 sudo service apache2 restartproxy: 프록시 기능을 담당하는 핵심 모듈proxy_http: HTTP/HTTPS 프록시 기능을 담당headers: 응답 헤더를 조작하는 데 사용 (선택적이지만 유용해요)
모듈을 활성화한 후에는 Apache 서비스를 꼭 다시 시작해 줘야 변경사항이 적용됩니다.
단계 2: 가상 호스트(Virtual Host) 설정 파일 생성 및 편집
이제 Apache가 Next.js 앱으로 요청을 전달하도록 설정하는 파일을 만들 거예요.
- 새 설정 파일 생성:
/etc/apache2/sites-available/디렉터리에 새로운 설정 파일을 생성합니다. 이름은nextjs.conf또는your-project.conf등으로 지정하는 것이 좋아요.sudo nano /etc/apache2/sites-available/nextjs.conf - 설정 내용 추가: 파일을 열고 다음 내용을 붙여넣으세요.
<VirtualHost *:80> ServerName localhost # 여기에 실제 도메인이나 IP 주소를 넣어주세요 (예: yourdomain.com 또는 127.0.0.1) ServerAdmin webmaster@localhost DocumentRoot /var/www/html # 필요 없지만, 기본값으로 두거나 Next.js 앱 경로로 지정해도 됩니다. ErrorLog ${APACHE_LOG_DIR}/error.log CustomLog ${APACHE_LOG_DIR}/access.log combined # 리버스 프록시 설정 시작 ProxyRequests Off # Apache가 정방향 프록시로 동작하지 않도록 설정 ProxyPreserveHost On # 원본 요청의 Host 헤더를 그대로 백엔드 서버(Next.js)로 전달합니다. [【3】](https://dev.to/techwithhari/mastering-nextjs-deployment-on-ec2-direct-vs-apache-setup-1h3i) ProxyVia On # 프록시를 통해 요청이 전달되었음을 나타내는 Via 헤더를 추가합니다. # 다음은 퐁코님의 Next.js 앱이 3000번 포트에서 실행될 때의 설정이에요. # Apache가 받은 모든 요청("/")을 http://localhost:3000/으로 전달합니다. ProxyPass / http://localhost:3000/ # 백엔드 서버(Next.js)로부터의 응답 헤더를 재작성하여 외부 리디렉션 등이 올바르게 처리되도록 합니다. ProxyPassReverse / http://localhost:3000/ # 웹 소켓을 위한 프록시 설정 (Next.js HMR 등을 위해 필요할 수 있습니다) # ProxyPass /_next/webpack-hmr ws://localhost:3000/_next/webpack-hmr </VirtualHost>ServerName localhost: 개발 환경에서는localhost로 두셔도 되지만, 실제 도메인을 사용한다면yourdomain.com등으로 변경해야 합니다.ProxyPass / http://localhost:3000/: 이 부분이 가장 중요해요! Apache 80번 포트로 들어오는 모든 요청(/)을http://localhost:3000/으로 보내라는 뜻입니다.ProxyPassReverse / http://localhost:3000/: 응답 헤더를 재작성하여 클라이언트가 원래 Apache 주소로 인식하도록 도와줍니다.ProxyPreserveHost On: 클라이언트가 접속한 원래 Host 헤더를 Next.js 서버에 전달해줍니다.
- 설정 파일 저장 및 닫기:
nano에디터에서는Ctrl+O를 눌러 저장하고,Ctrl+X를 눌러 닫습니다.
단계 3: 가상 호스트 활성화 및 Apache 재시작
새로 만든 설정 파일을 Apache에 알려주고 적용해야 합니다.
bash
sudo a2ensite nextjs.conf
sudo systemctl restart apache2 # 또는 sudo service apache2 restarta2ensite:sites-available디렉터리의 설정 파일을sites-enabled디렉터리에 링크하여 활성화합니다.systemctl restart apache2: Apache 서비스를 재시작하여 변경 사항을 적용합니다.
확인 방법
- Next.js 개발 서버가 3000번 포트에서 실행 중인지 확인합니다.
npm run dev - 웹 브라우저를 열고
http://localhost/또는http://127.0.0.1/로 접속해 보세요. - 성공적으로 설정되었다면, Next.js 앱이 80번 포트로 보이게 될 거예요!
윈도우 환경에서 Apache 설정 시 유의사항
- 설정 파일 위치: 윈도우용 Apache(또는 XAMPP/WAMP)를 사용하신다면
httpd.conf또는httpd-vhosts.conf파일을 찾아 편집해야 할 수 있습니다. 일반적으로conf/extra/httpd-vhosts.conf에 가상 호스트 설정을 추가하고,httpd.conf에서 이 파일을 include하도록 되어 있어요. - Wslrelay.exe 문제: 앞서
wslrelay.exe가 80번 포트를 점유하고 있었던 문제는 Apache를 80번 포트에 띄우면 해결됩니다. Next.js 앱은 3000번 포트에서 돌아가고, Apache가 80번 포트를 맡아 처리하게 되니까요.