My Dreams

외부 Nginx 리버스 프록시 뒤에 내부 Apache 워드프레스를 구성할 때 CSS가 깨지는 현상은 주로 HTTPS(SSL) 오프로딩으로 인한 프로토콜 불일치(혼합 콘텐츠, Mixed Content) 및 잘못된 도메인 경로 인식 때문에 발생합니다.

이 문제를 해결하기 위해 수정해야 할 핵심 설정 파일과 구체적인 설정 내용을 정리해 드립니다.

---

1. Nginx 리버스 프록시 설정 수정 (nginx.conf 또는 가상 호스트 설정 파일)

Nginx가 받은 클라이언트의 원본 요청 정보(프로토콜, IP 등)를 내부 Apache 서버로 정확히 전달해 주어야 합니다.

• 수정할 파일 경로: /etc/nginx/sites-available/default 또는 /etc/nginx/conf.d/wordpress.conf (사용자 설정에 따라 다름)
• 추가할 내용: location / 블록 내에 다음 프록시 헤더들을 반드시 추가합니다. [1, 2]

nginx

server {
    listen 443 ssl;
    server_name yourdomain.com; # 사용자 도메인

    # ... 기존 SSL 설정 생략 ...

    location / {
        proxy_pass http://내부_아파치_IP:포트;
        
        # 핵심 설정: 원본 요청 프로토콜(http 또는 https)과 호스트, IP 정보를 전달
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme; # CSS 깨짐 방지의 핵심
    }
}

코드를 사용할 때는 주의가 필요합니다.

---

2. 내부 Apache 서버 설정 수정 (wp-config.php)

Nginx가 넘겨준 X-Forwarded-Proto 헤더를 Apache 및 워드프레스가 인식하여, 웹페이지 내의 CSS/JS 링크들을 http://가 아닌 https://로 생성하도록 강제해야 합니다.

• 수정할 파일 경로: 워드프레스 설치 루트 디렉토리의 wp-config.php
• 추가할 내용: 파일의 가장 첫 줄(<?php 바로 아래) 또는 /* That's all, stop editing! Happy publishing. */ 바로 위에 다음 코드를 삽입합니다.

php

// Nginx가 HTTPS 요청을 전달했는지 확인하고 워드프레스에 반영
if (isset($_SERVER['HTTP_X_FORWARDED_PROTO']) && $_SERVER['HTTP_X_FORWARDED_PROTO'] === 'https') {
    $_SERVER['HTTPS'] = 'on';
}

// 프록시 뒤에서 도메인 및 프로토콜을 유연하게 인식하도록 설정 (필요시 도메인 고정 가능)
define('WP_HOME', 'https://' . $_SERVER['HTTP_HOST']);
define('WP_SITEURL', 'https://' . $_SERVER['HTTP_HOST']);

코드를 사용할 때는 주의가 필요합니다.

---

3. 내부 Apache 가상 호스트 설정 수정 (선택 사항)

Apache 자체에서도 역방향 프록시 헤더를 신뢰할 수 있도록 모듈을 활성화하고 설정을 보완해 주면 더 안정적입니다.

• 수정할 파일 경로: /etc/apache2/sites-available/000-default.conf (Ubuntu/Debian 기준)
• 사전 작업: Apache의 remoteip 모듈 활성화bashsudo a2enmod remoteip 코드를 사용할 때는 주의가 필요합니다.
• 추가할 내용: 가상 호스트(<VirtualHost *:80>) 설정 내부에 추가합니다.

apache

<VirtualHost *:80>
    ServerName yourdomain.com
    DocumentRoot /var/www/html

    # Nginx 프록시 IP를 신뢰하고 원본 IP 및 헤더를 가공하도록 설정
    RemoteIPHeader X-Forwarded-For
    RemoteIPInternalProxy 외부_Nginx_IP

    # ... 기존 설정 생략 ...
</VirtualHost>

코드를 사용할 때는 주의가 필요합니다.

설정을 마친 후 Apache를 재시작합니다:sudo systemctl restart apache2

---

4. 설정 반영 후 점검 사항

1. 웹 서버 재시작: Nginx와 Apache 설정을 모두 저장한 후 각각 재시작합니다.
   • sudo nginx -t (설정 문법 검사) 후 sudo systemctl restart nginx
   • sudo systemctl restart apache2
2. 브라우저 캐시 삭제: 수정 후에도 CSS가 깨져 보인다면 브라우저 캐시 문제일 수 있으므로 시크릿 모드(Ctrl+Shift+N)로 접속하거나 강력 새로고침(Ctrl + F5)을 시도하세요.

---

문제를 해결하시는 과정에서 막히는 부분이 있거나 추가적인 오류 메시지가 발생한다면 아래 내용을 알려주세요.

• 현재 외부 Nginx와 내부 Apache 간의 통신 프로토콜(예: Nginx는 HTTPS(443), Apache는 HTTP(80)인지 여부)
• 브라우저 개발자 도구(F12) -> ‘Console’ 탭에 뜨는 에러 메시지(예: Mixed Content 에러 문구)