워드프레스(WordPress)를 NginX Reverse Proxy 적용시 오류 해결하기

지난 포스트에서는 OMV5에서 docker를 이용하여 워드프레스를 설치하는 방법에 대해 설명한 바 있다.

https://blog.codesarang.com/37

OMV5(OpenMediaVault 5)에 워드프레스(WordPress) 설치하기

지난번 설치된대로 그냥 접속하여 사용할 수는 있지만 특정 포트를 지정하여 http로 접속해야 한다는 점에서 뭔가 아쉬움이 남는다. 

 

이번 포스팅에서는 NginX Reverse Proxy 설정을 통해 접속하는 방법에 대해 설명하도록 하겠다.

참고로 아래 포스팅을 통해 NginX Reverse Proxy 설정법에 대해 설명하긴 했지만, 워드프세스의 경우 자체 설정을 바꿔줘야 하는 부분이 있어 별도 설명한다.

https://blog.codesarang.com/35

docker에 SSL 인증서 적용하기 - nginx Reverse Proxy

 

1. NginX Reverse Proxy 설정

내 블로그 글을 참조하신 분이라면 LetsEncrypt 컨테이너를 이용하여 SSL 인증서를 설치하였고, 또한, 그 설정 정보를 SMB를 이용하여 아래 폴더처럼 접근할 수 있으리라 생각한다.

관련 글을 찾길 원한다면 https://blog.codesarang.com/35를 참조하기 바란다.

아래처럼 LetsEncrypt의 "proxy-confs" 폴더에 "wordpress.~~~.com.subdomain.conf"라는 파일을 생성한다.

 

생성한 파일 내용은 아래처럼 입력해 주도록 한다.

server {
    listen 443 ssl;
    listen [::]:443 ssl;

    server_name wordpress.codesarang.com;

    include /config/nginx/ssl.conf;

    client_max_body_size 0;

    location / {
        include /config/nginx/proxy.conf;
        resolver 172.20.0.6 valid=30s;
        set $upstream_app 172.20.0.6;
        set $upstream_port 80;
        set $upstream_proto http;
        proxy_pass $upstream_proto://$upstream_app:$upstream_port;
    }
}

 

이제, 컨테이너 리스트에서 LetsEncrypt를 선택하고 "Restart" 해주도록 한다.

 

2. 워드프레스 환경설정 변경

NginX Reverse Proxy 설정이 완료 되었으니 https로 접속해 보자. 아래처럼 https://wordpress.codesarang.com으로 접속할 경우 https://wordpress.codesarang.com:8888로 URL이 변경될 뿐만 아니라 이 사이트는 보안 접속을 제공하지 않는다는 오류 메시지를 표시해 버린다.

 

이제 윈도우즈 탐색기를 이용, 워드프레스 데이터 공유 폴더로 이동해 워드프레스 설정 파일인 "wp-config.php" 파일을 수정하도록 한다.

 

아래 그림처럼 설정 파일 맨 윗 부분에 다음 코드를 추가한다.

define('FORCE_SSL_ADMIN', true);
if ($_SERVER['HTTP_X_FORWARDED_PROTO'] == 'https')
	$_SERVER['HTTPS']='on';

 

이제, 아래 그림처럼 설정파일 아래쪽(맨 아랫줄 바로 윗 부분)에 아래 코드를 추가한다.

define('WP_HOME','https://wordpress.codesarang.com');
define('WP_SITEURL','https://wordpress.codesarang.com');

 

이제 https://wordpress.~~~.com 으로 접속하면 아래처럼 정상 접속이 될 것이다.

참... 이때 주의할 점, 브라우저 접속기록을 삭제한 후에 재 접속해야 정상 접속된다. 그렇지 않을 경우 브라우저에 접속 캐시가 남아 자꾸 URL이 변경되며 보안 오류를 내는 화면을 보여준다.

 

3. 사족(추가설명)

그러면 Reverse Proxy를 먼저 설정한 후 워드프레스를 설치하면 되지 않는가 생각할 수 도 있다.

나도 그런 생각으로 설치를 해 보았으나 결국 위의 설정파일 변경 작업은 필요했고, 설치 과정에서도 문제가 생겼다.

 

우선 최초 설치 화면은 아래처럼 뭔가 이상하게 깨져서 나온다.

 

두번째로 어찌어찌 설치를 완료한 후에 로그인 화면에서도 계속 로그인을 실패하는 문제가 있다.

결국 이상태에서도 wp-config.php 파일을 위처럼 수정해 주어야 한다.

 

4. 추가작업

이제는 http://wordpress.codesarang.com:8888/로 접속하면 어떻게 될 것인가? https://wordpress.codesarang.com/로 알아서 이동해 준다.

 

하지만 더이상 8888포트로 접속할 일이 없으므로 해당 포트매핑을 지워 주도록 한다.

"Containers" 메뉴에서 "wordpress" 컨테이너를 선택하고 "Edit" 버튼을 클릭하면 아래와 같은 화면이 나온다. 여기서 매핑된 포트를 삭제해 준 후 "Deploy the container" 버튼을 클릭해 주도록 한다.

이로서 워드프레스에 대한 NginX Reverse Proxy 설정이 완료되었다.