월별 글 목록: 2024년 11월월

Back-end

Nginx Fetch failed [ net::ERR_INCOMPLETE_CHUNKED_ENCODING 200 (OK) ]

댓글 남기기

어느날 부터 인지는 모르겠는데, 어렴풋이 생각해보면 2주정도 전부터 그랬던듯, glb 임포트하는 뷰어 페이지에 접속하면 fetch failed 오류가 발생하면서 페이지로딩이 아예 안되는 문제가 발생했다.
최근에 업데이트 한거라곤 사이트 SSL 인증서 업데이트와, Npm 모듈 업데이트 ( Next.js, Three.js, React.js ) 밖에 하지 않아서 자연스럽게 Next.js 버전 업데이트가 문제라고 단순하게 생각했었다.
Public 폴더 경로가 바뀌었는지 아니면 Config 가 바뀐건지 구글 검색과 Chatgpt 질문을 던져 나오는 해결방법들을 적용해도 전혀 해결될 기미가 보이지 않았다.

그렇게 이틀정도 문제 해결방법을 찾아서 헤메고 있다가 문득 Nginx 오류 로그를 보면 이유를 알 수 있을 것 같아 맥북 열어서 오류 로그를 출력해보았다.

// 맥북의 nginx 로그 파일의 위치
// /usr/local/var/log/nginx/
// error.log 오류 메세지 기록 파일
// access.log 요청 기록이 저장되는 파일
// 설정파일 (/usr/local/etc/nginx/nginx.conf 또는 /etc/nginx/nginx.conf 의 error_log 
//     디렉티브를 확인 하여 로그 파일 위치를 명확히 알 수 있음.
//     grep error_log /usr/local/etc/nginx/nginx.conf
// 실시간 로그 확인
tail -f /usr/local/var/log/nginx/error.log

// 다중 로그 파일 모니터링
tail -f /usr/local/var/log/nginx/error.log /usr/local/var/log/nginx/access.log

// ** GoAccess : 실시간 웹 로그 분석 도구
// ** Inav : 로그 파일 탐색 및 분석 도구

서버의 오류 메세지 파일을 출력해보고 Fetch failed 문제의 원인을 바로 파악 할 수 있었다.

2024/11/27 23:56:41 [crit] 19436#0: *2470 open() “/usr/local/var/run/nginx/proxy_temp/1/16/0000000161” failed (13: Permission denied) while reading upstream, client: ——–, server: 192.168.0.18, request: “GET /daft_punk_in_end_of_line_club.glb HTTP/1.1”, upstream: “http://127.0.0.1:3000/daft_punk_in_end_of_line_club.glb”, host: “quasarxr.com”, referrer: “https://quasarxr.com/SubApp”

현재 내가 만들고 있는 웹사이트는 라이트세일 – 홈 웹서버 구조의 nginx 리버스 프록시를 사용하여 구현되어 있다. 이 때 proxy_temp 폴더에 임시 파일을 캐싱하는데 맥북에서 nginx 서버에 접근권한이 없어서 파일 요청이 실패하고 있었던 것이었다. 그렇다면 해당 폴더의 디렉터리 권한을 체크해 보고 문제가 있다면 권한 설정을 해주면 되겠다.

// 다음 명령어로 디렉토리의 권한을 확인한다.
ls -ld /usr/local/var/run/nginx/proxy_temp
소유권 & 허가권 확인 방법


확인해보니 디렉토리 권한이 소유그룹에 하나도 없는것이 보인다. 이로써 문제의 원인은 명확히 파악 되었으니, 해당 폴더의 nginx 의 접근권한을 풀어주면 해결이 되겠다.

// proxy_temp 디렉토리 권한을 nginx 프로세스가 접근할 수 있도록 변경
// 일반적으로 nginx 는 www-data 또는 nobody 사용자로 실행된다.
sudo chown -R $(whoami):staff /usr/local/var/run/nginx/proxy_temp

// -R 하위 디렉터리의 모든 권한 변경
// $(whoami):staff 바꿔줄 소유자:그룹명 $(whoami) 는 현재 사용자명을 말한다.

sudo chmod -R 755 /usr/local/var/run/nginx/proxy_temp

그 다음 Nginx 설정을 확인 해주면 마무리 되겠다.

// nginx.conf 파일 열기
sudo nano /usr/local/etc/nginx/nginx.conf

// proxy_temp_path 가 아래와 같이 설정되어 있는지 확인한다.
proxy_temp_path /usr/local/var/run/nginx/proxy_temp 1 2;

// 변경 사항을 저장하고 종료 한뒤 nginx를 재시작 한다.
sudo nginx -s reload

그런데 문제가 해결된 후 생긴 궁금증은 권한설정이 잘못 되어있었다면 왜 처음에는 문제가 없다가 몇일전 부터 문제가 생긴것인가 이다. 이것에 대한 답은 아직 찾지 못하였다.

chmod / chown ? = http://www.redcrow.co.kr/wordpress/?p=532

Chat-GPT

Solve block alignment problem with wordpress function

댓글 남기기

위 그림과 같이 워드프레스 글 편집기(gutenberg editor)에서 코드 블럭만 다른 블럭과 다르게 왼쪽 정렬이 되고 있는 모습이다. 최종편집된 글을 보면 코드블럭이 다른 블럭들과 마찬가지로 가운데 정렬이 되어 출력되는데 편집기에서도 가운데 정렬이 되도록 하고 싶어 해결방법을 perplexcity에 물어보게 되었는데 총 2가지 답변을 받을 수 있었다.

두 가지 방법 모두 워드프레스에 커스텀 함수를 추가하여 스타일을 바꿔주는 방식으로 다음 경로의 워드프레스 서버의 파일에 접근 할 수 있어야 한다.

[..server directory]/wordpress/wp-content/themes/[you using theme name]/functions.php

CSS 를 통한 방법

function fix_block_alignment() {
    if (get_current_screen()->is_block_editor()) {
        echo '<style>
            .editor-styles-wrapper .wp-block {
                margin-inline: auto !important;
            }
        </style>';
    }
}
add_action('admin_head', 'fix_block_alignment');

만약 위 함수를 추가하여 해결이 안됐을 경우

/*
* 이 코드는 전체 너비 블럭의 정렬 문제를 해결하는데 도움이 됩니다
*/
add_action('enqueue_block_editor_assets', function() {
    wp_add_inline_style('generate-block-editor-styles', 
        '.wp-block[data-align="full"] {
            max-width: none;
        }'
    );
}, 20);