이 오류를 가지고 3일을 끌었다니
아마 배포에 대한 이해자체가 부족해서 시간이 더 걸린듯하다.
이 문제를 해결하는 과정에서 nginx로 배포하는 부분과 코드 자체에 대한 이해도가 많이 늘었고,
docker로 프론트 배포하는 방법에 대해서도 많이 배우게 되었다.
그리고 컨테이너도 사실 1개로 nginx, front 컨테이너가 굳이 2개일 필요는 없다는걸 또 알게되었다.
트러블 슈팅 내용은 다음과같다.
GET https://www.livflow.co.kr/assets/index-iVl2EyZf.css net::ERR_ABORTED 404 (Not Found)www.livflow.co.kr/:12
GET https://www.livflow.co.kr/assets/index-B9PyCQyo.js net::ERR_ABORTED 404 (Not Found)
우선 사이트에 들어가면 위와같은 문제가 발생했다.
문제의 내용은 간단하게 내가 nginx에서 지정해놓은 경로에 assets에서 저 파일들을 못찾고 있다는건데
실제로 내가 겪은 문제는 2가지였다.
1번은 root /usr/share/nginx/html/assets/;
이부분에 50x.html, index.html 2개만 존재했고 assets란 파일이 없었다.
이에 프론트엔드 파일 전반에 대한 이해도가 없었던 나는 좀 찾아보고 물어보면서 알게되었는데
우선 docker컨테이너로 배포하는 과정에서 알게 된 사실은 다음과 같다.
- dockerfile 에서 이미지를 빌드할때 npm install 과 npm run build라는 과정을 통해
리액트와 html파일들을 하나의 index.html로 만든다. 그리고 이게 이미지 파일에 들어간다.
내 상황에서는 이미지 파일에서는 usr/share/nginx/html/에 logo와 assets파일이 있는걸 확인했다.
근데 이게 compose과정을 지나서 컨테이너가 되면 파일이 없어지는걸 확인했다.
이 문제는 대게는 빈 파일을 덮어씌우는 경우가 대부분이라 compose 마운트 경로를 수정해주니 해결되었다.
여기서도 클로드가 추천해준대로 ./dist를 마운트 하는게 아니라 빌드 볼륨을 따로 만들어 주었는데 사실 이부분은 그냥 ./dist로 해도 문제가 없을거같다.
volumes:
build_volume:
driver: local
driver_opts:
type: "none"
device: "./dist" # 빌드된 정적 파일들이 있는 경로를 지정
o: "bind"
volumes:
- build_volume:/usr/share/nginx/html이런 설정을 추가해서 dist에 덮어씌우는 파일을 제대로 만들어서 이 문제는 해결하였다.
- 분명 컨테이너에 docker exec frontcontainer-nginx /bin/sh 로 들어가서 직접 파일이 있는지 확인을 하였다. 근데 분명 usr/share/nginx/html/assets에 파일이 있는걸 확인했는데 도메인 접속을 하면 파일을 못찾는다는 오류가 발생했다. 어째서인지 모르겠어서 디버그 관련해서
access_log /var/log/nginx/assets_access.log combined;
error_log /var/log/nginx/assets_error.log debug;이런 로그 관련 코드를 추가해주고 어떤 로그가 오는지 확인해보려고했는데 로그에 아무것도 안남는걸 확인했다.
여기까지 결과로는 실패하면 error에 가고, 성공하면 access에 기록이 남아야하는데 이게 안남는다는건 assets에 도달자체를 못한다는 문제라고 생각했다.
그렇다면 문제는 현재 경로 자체를 잘못찾고있다는 것과 아니면 파일 관련 권한 문제로 파일에 도달하지 못한 문제. 2개의 선택지밖에 없는데 아무리 생각해도 엔진엑스는 정상작동하고 있었다. 그렇다면 경로문제라고 생각했다. 여기까지 오는데 3일이 걸렸다. 배포부터 nginx 컨테이너 생성과 배포 관련 지식이 전무하다보니 시간이 오래걸린듯 하다.
이제 문제의 해결방법은 컨테이너 내부 로그가 아니라 컨테이너 자체의 로그를 확인해야할거같아서
docker logs frontend-nginx 를 쳐서 로그를 확인해보았다.
2024/11/24 19:17:37 [error] 32#32: *9 open() "/etc/nginx/html/Logo_Icon.svg"
failed (2: No such file or directory), client: 162.142.125.198, server:
www.livflow.co.kr, request: "GET /Logo_Icon.svg HTTP/1.1", host: "59.5.15.183"이런 말도안되는 로그를 확인했다.
좀 찾아보니 엔진엑스는 기본적으로
/etc/nginx/html/
이곳에서 파일을 찾기 때문에 기본설정을 바꿔주려면
location 블록밖에
root /usr/share/nginx/html;이 설정이 필요한거같다. 그래서
root /usr/share/nginx/html;
# 정적 파일 제공
location / {
index index.html;
try_files $uri $uri/ /index.html;
}
location /assets/ {
# 경로 설정을 올바르게 설정
alias /usr/share/nginx/html/assets/;
try_files $uri =404;
}이렇게 설정을 해주니 페이지가 들어가졌다.
장장 3일에 걸친 트러블 슈팅을 끝냈다.
막상 하고보니 엔진엑스랑 프론트 배포에 대한 이해도가 많이 높아져서 그렇게 기분나쁘진 않았는데
서버가 안들어가지는 문제는 어디서 찾아야하는지 몰라서 더 어려운거같다.
차라리 코드가 꼬이면 바꿀텐데.. 라는 생각이 든다.
