압솔공방

Google Cloud Project and credentials to backend/.env
Required .env Variables:
GOOGLE_CLIENT_ID=your_client_id
GOOGLE_CLIENT_SECRET=your_client_secret
GOOGLE_REDIRECT_URI=http://localhost:3100/api/auth/google/callback

Google Cloud Project를 설정하고 인증 정보를 backend/.env 파일에 추가하는 방법은 Google OAuth 2.0을 사용해서 사용자 인증을 할 때 주로 필요해요.

1. Google Cloud Project 설정하기

먼저 Google Cloud Platform(GCP) 콘솔에서 새로운 프로젝트를 만들고, 필요한 API를 활성화해야 해요.

1. Google Cloud 콘솔 접속: 웹 브라우저에서 Google Cloud 콘솔에 접속하고 로그인해주세요.
2. 새 프로젝트 생성:
   • 콘솔 상단 왼쪽에 있는 프로젝트 선택 드롭다운 메뉴를 클릭해주세요.
   • ‘새 프로젝트’를 클릭해서 프로젝트 이름을 지정하고 생성합니다. (예: My Awesome App 또는 Backend Auth Project)
3. API 및 서비스 활성화:
   • 왼쪽 내비게이션 메뉴에서 ‘API 및 서비스’ > ‘라이브러리’로 이동해주세요.
   • 검색창에 “Google People API”를 검색해서 활성화해주세요. (다른 Google 서비스도 필요하다면 같이 활성화해주시면 됩니다.)

2. OAuth 2.0 클라이언트 ID 생성하기

이제 애플리케이션에서 Google 로그인을 사용할 수 있도록 인증 정보를 만들어야 해요.

1. 사용자 인증 정보 생성:
   • 왼쪽 내비게이션 메뉴에서 ‘API 및 서비스’ > ‘사용자 인증 정보’로 이동해주세요.
   • 상단에 있는 ‘+ 사용자 인증 정보 만들기’ 버튼을 클릭하고 ‘OAuth 클라이언트 ID’를 선택합니다.
2. 애플리케이션 유형 선택:
   • 애플리케이션 유형으로 ‘웹 애플리케이션’을 선택해주세요.
3. 이름 지정:
   • OAuth 클라이언트 이름을 입력합니다. (예: Web Client 1)
4. 리디렉션 URI 추가:
   • ‘승인된 리디렉션 URI’ 섹션에서 ‘+ URI 추가’ 버튼을 클릭하고 다음 URL을 추가해주세요: http://localhost:3100/api/auth/google/callback
   • 이는 Google이 인증이 완료된 후 사용자를 돌려보낼 주소예요. 로컬 환경에서 테스트할 때 주로 사용하죠. 나중에 실제 서버에 배포할 때는 서버의 도메인으로 변경해야 해요.
5. 클라이언트 ID 및 시크릿 확인:
   • ‘만들기’ 버튼을 클릭하면 클라이언트 ID와 클라이언트 시크릿이 팝업으로 나타날 거예요. 이 값들을 잘 복사해두세요. 이 값들이 바로 .env 파일에 필요한 값들이에요.

3. .env 파일에 인증 정보 추가하기

마지막으로, 위에서 얻은 클라이언트 ID와 시크릿을 backend/.env 파일에 넣어주면 됩니다.

1. backend/.env 파일 열기: backend 폴더 안에 있는 .env 파일을 텍스트 편집기로 열어주세요.
2. 변수 추가: 아래와 같이 Google Cloud에서 복사한 값들을 입력하고 저장합니다.
   • GOOGLE_CLIENT_ID=여기_복사한_클라이언트_ID_붙여넣기
   • GOOGLE_CLIENT_SECRET=여기_복사한_클라이언트_시크릿_붙여넣기
   • GOOGLE_REDIRECT_URI=http://localhost:3100/api/auth/google/callback

이제 Google Cloud Project 설정과 .env 파일 구성이 완료되었어요! 이렇게 하면 백엔드 애플리케이션에서 Google OAuth를 통해 사용자 인증을 처리할 준비가 된답니다.

개념

클라이언트(브라우저)가 Apache 웹 서버(80번 포트)에 요청을 보내면, Apache가 그 요청을 대신 받아서 Next.js 개발 서버(예: 3000번 포트)로 전달해 주고, Next.js 서버에서 처리된 응답을 다시 받아서 클라이언트에게 전달해 주는 역할을 해요. 

준비물

1. Apache 웹 서버: 컴퓨터에 Apache가 설치되어 있고 실행 중이어야 합니다.
   • Ubuntu/WSL: sudo apt update && sudo apt install apache2
   • Windows: Apache를 별도로 설치하거나 XAMPP 같은 툴을 사용할 수 있습니다.
2. 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 restart

• proxy: 프록시 기능을 담당하는 핵심 모듈
• proxy_http: HTTP/HTTPS 프록시 기능을 담당
• headers: 응답 헤더를 조작하는 데 사용 (선택적이지만 유용해요)

모듈을 활성화한 후에는 Apache 서비스를 꼭 다시 시작해 줘야 변경사항이 적용됩니다.

단계 2: 가상 호스트(Virtual Host) 설정 파일 생성 및 편집

이제 Apache가 Next.js 앱으로 요청을 전달하도록 설정하는 파일을 만들 거예요.

1. 새 설정 파일 생성: /etc/apache2/sites-available/ 디렉터리에 새로운 설정 파일을 생성합니다. 이름은 nextjs.conf 또는 your-project.conf 등으로 지정하는 것이 좋아요.sudo nano /etc/apache2/sites-available/nextjs.conf
2. 설정 내용 추가: 파일을 열고 다음 내용을 붙여넣으세요.<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 서버에 전달해줍니다. 
3. 설정 파일 저장 및 닫기: nano 에디터에서는 Ctrl+O를 눌러 저장하고, Ctrl+X를 눌러 닫습니다.

단계 3: 가상 호스트 활성화 및 Apache 재시작

새로 만든 설정 파일을 Apache에 알려주고 적용해야 합니다.

bash

sudo a2ensite nextjs.conf
sudo systemctl restart apache2 # 또는 sudo service apache2 restart

• a2ensite: sites-available 디렉터리의 설정 파일을 sites-enabled 디렉터리에 링크하여 활성화합니다.
• systemctl restart apache2: Apache 서비스를 재시작하여 변경 사항을 적용합니다.

확인 방법

1. Next.js 개발 서버가 3000번 포트에서 실행 중인지 확인합니다.npm run dev
2. 웹 브라우저를 열고 http://localhost/ 또는 http://127.0.0.1/ 로 접속해 보세요.
3. 성공적으로 설정되었다면, 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번 포트를 맡아 처리하게 되니까요.

• 127.0.0.1:80을 점유한 wslrelay.exe 입니다. → 이건 WSL의 자동 localhost 포워딩 기능입니다. WSL에서 80/tcp가 열려 있으면 Windows의 localhost:80을 자동으로 WSL로 중계해 줍니다. → 즉, localhost:80은 wslrelay가 맡고 있고, 우리가 따로 portproxy 만들 필요가 없습니다.

A) 로컬(이 PC)에서만 http://localhost 로 쓰고 싶다

1. 그냥 테스트만 해보세요: C:\Windows\System32\curl.exe http://127.0.0.1
   • 정상 HTML이 나오면 끝입니다. (wslrelay가 잘 중계 중)
   • 혹시 안 나오면 한번 재기동: wsl --shutdown Restart-Service LxssManager wsl C:\Windows\System32\curl.exe http://127.0.0.1
   이미 curl http://127.0.0.1:8080 은 정상이고, wslrelay가 80을 잡고 있으므로 http://127.0.0.1 도 이제 정상일 가능성이 높습니다.

---

B) 같은 LAN의 다른 기기에서도 접속하고 싶다 (예: 휴대폰/다른 PC)

wslrelay가 127.0.0.1:80을 사용 중이라서, 0.0.0.0:80 로 또 바인딩하면 충돌납니다.
대신 Windows의 LAN IP로만 portproxy를 만들어 주세요.

1. Windows의 LAN IP 확인: $lanIp = (Get-NetIPAddress -AddressFamily IPv4 ` | Where-Object { $_.InterfaceAlias -notmatch 'Loopback|WSL|vEthernet' -and $_.IPAddress -notlike '169.254.*' } ` | Sort-Object -Property SkipAsSource ` | Select-Object -First 1 -ExpandProperty IPAddress) Write-Host "LAN IP = $lanIp"
2. 해당 LAN IP:80 → WSL:80 포워딩 생성(127.0.0.1:80은 wslrelay가 계속 담당): $wslIp = "172.26.10.217" # 현재 WSL IP netsh interface portproxy add v4tov4 listenaddress=$lanIp listenport=80 connectaddress=$wslIp connectport=80
3. 방화벽 규칙 추가(그 LAN IP로만 80 허용): New-NetFirewallRule -DisplayName "WSL Apache 80 (LAN only)" ` -Direction Inbound -Action Allow -Protocol TCP -LocalPort 80 -LocalAddress $lanIp

→ 이제 같은 네트워크의 다른 기기에서 http://<Windows_LAN_IP> 로 접속 가능해집니다.
(내부에서 공인 IP로 테스트하면 NAT 루프백 미지원 공유기에서는 실패할 수 있으니, 반드시 LAN IP로 테스트하세요.)

---

C) 외부 인터넷에서도 접속하고 싶다

• 공유기에서 외부 80 → (Windows LAN IP):80 으로 포트포워딩 설정
• ISP가 80 인바운드 차단 시, 외부 8080 → 내부 80 으로 매핑하고 http://공인IP:8080 사용

---

참고(유지보수)

• WSL 쪽 80 허용 규칙은 재시작 시 사라질 수 있습니다. 영구 적용하려면: sudo apt install -y iptables-persistent sudo netfilter-persistent save
• WSL IP는 재부팅/재시작 시 바뀔 수 있습니다. 바뀌면 위 portproxy의 connectaddress 를 새 IP로 갱신해야 합니다.