leafy-front end 부분 여쭤볼게 있습니다.

개발자를 위한 쉬운 도커

Vue.js 프론트엔드 컨테이너 구성

해결된 질문

작성

428

수정됨

안녕하세요 docker 수업 잘 듣고 있습니다.

다름이 아니라 frontend 부분 빌드한 후
/app/dist -> /usr/share/nginx/html

하게 되면 404 error 가 뜨게 됩니다.

conf file 에서 경로를 못찾는게 아닐까 합니다...
그래서 확인해본 봐로는 /etc/nginx/nginx.conf

http {
    server {
    listen 80; # 삭제 가능
    server_name localhost; #삭제 가능

    location / {
        root /usr/share/nginx/html;
        index index.html index.htm;
        try_files $uri $uri/ /index.html;
      }
    }

을 삽입 하면 잘 됩니다.

혹시 강의 하신 내용에서는 이부분이 없느데도 잘 작동하는데 이유를 알 수 있을까 해서 질문 드립니다.
감사합니다.

docker 가상화 ci/cd docker-compose github-actions docker-volume container

답변 1

데브위키

지식공유자

민경재님 반갑습니다. 데브위키입니다.

먼저 기본 nginx 컨테이터를 실행하게 되면, 설정 파일의 위치는 /etc/nginx/conf.d/default.conf에 위치하게 됩니다.

*확인 방법

docker run --rm nginx cat /etc/nginx/conf.d/default.conf

해당 파일에 /usr/share/nginx/html 경로가 기본으로 지정되어 있어서, 파일이 정상적으로 복사되면 페이지가 뜨는 것이 정상입니다.

....(중략)
    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
    }
...(중략)

문제를 확인하기 위해서는 먼저 파일이 잘 복사되었는지 확인이 필요해 보입니다.

$ docker exec -it nginx ls /usr/share/nginx/html
50x.html  css  favicon.ico  fonts  index.html  js

보통은 nginx를 실행했을 때 index.html 파일이 있기 때문에 404 에러가 뜨는 것은 특이한 케이스입니다. 추측되는 가능성은 docker cp 명령을 사용하실 때 /usr/share/nginx/html 폴더가 초기화 되었을 가능성도 있어 보입니다.

먼저 위 명령과 같이 nginx 컨테이너에 ls 명령을 사용해 /usr/share/nginx/html 폴더의 내용을 확인했을 때, 이렇게 index.html, js, css 목록이 조회가 되시는지 확인해보시겠어요?

민경재

질문자

안녕하세요 먼저 답변 감사 드립니다.

❯ docker ps
CONTAINER ID   IMAGE                           COMMAND                  CREATED      STATUS      PORTS                    NAMES
bdea05d48544   guldor10/leafy-frontend:1.0.0   "nginx -g 'daemon of…"   2 days ago   Up 2 days   0.0.0.0:80->80/tcp       leafy-frontend
e6964ec64d88   guldor10/leafy-backend:1.0.0    "java -jar leafy.jar"    2 days ago   Up 2 days   0.0.0.0:8080->8080/tcp   leafy
628e6dfb6e3d   c8cde311546e                    "docker-entrypoint.s…"   2 days ago   Up 2 days   5432/tcp                 leafy-postgres

❯ docker exec -t leafy-frontend ls /usr/share/nginx/html
50x.html     css          favicon.ico  fonts        index.html   js

❯ docker exec -it leafy-frontend cat /etc/nginx/conf.d/default.conf
server {
    listen       80;
    server_name  localhost;

    #access_log  /var/log/nginx/host.access.log  main;

    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
    }

확인해보니 html 폴더에 들어가있고 default.conf 부분도 잘 되어 있습니다.
nginx.conf 에 등록 하면 잘 되는거 보니 default를 못찾아 발생한 에러 인듯 합니다.

데브위키

지식공유자

네! 추가로 정보를 더 드리자면 nginx 기본 이미지의 설정 파일 구조는

/etc/nginx/nginx.conf 파일과 /etc/nginx/conf.d/default.conf 파일이 있습니다.

/etc/nginx/nginx.conf 파일은 nginx가 사용하는 기본 설정 파일입니다.

$ docker run --rm nginx cat /etc/nginx/nginx.conf

기본 nginx이미지의 파일의 내용을 확인해보시면 맨 아래에 다음과 같은 설정이 보이실 것입니다.

...(생략)
    include /etc/nginx/conf.d/*.conf;

이 설정문구가 있어서 /etc/nginx/conf.d/default.conf 파일을 불러와 설정에 추가되게 되는 부분입니다.

/etc/nginx/conf.d/default.conf 파일에는 nginx가 사용하는 파일의 경로가 지정되어 있습니다.

$ docker run --rm nginx cat /etc/nginx/conf.d/default.conf

....(중략)
    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
    }
...(중략)

그래서 질문에서 말씀해주신 것처럼 기본 파일인 /etc/nginx/nginx.conf 파일에

    location / {
        root /usr/share/nginx/html;
        index index.html index.htm;
        try_files $uri $uri/ /index.html;
      }
    }

이 내용을 포함하시면, default.conf 파일을 불러오지 않고 직접 설정해서 정상적으로 동작하는 것이 맞습니다👍

다만 처음에 404 에러가 발생한 부분은 아직 명쾌하게 답변 드리기가 어려울 것 같습니다.

에러가 발생하고 있는 상태에서 컨테이너 내부를 관찰해 보면 좋을 것 같습니다.

다음에도 nginx 컨테이너를 사용하시다 404 에러가 나오면 다음 방법을 통해서 디버깅 하시면 도움이 되실 것 같습니다.

nginx.conf 파일 확인

$ docker exec -it nginx cat /etc/nginx/nginx.conf

1) nginx.conf 파일에 root /usr/share/nginx/html; 설정이 있는경우, 3번으로 이동

2) nginx.conf 파일에 include /etc/nginx/conf.d/*.conf; 설정이 있는 경우, 2번으로 이동

default.conf 파일 확인

$ docker exec -it nginx cat /etc/nginx/conf.d/default.conf

default.conf 파일에 root /usr/share/nginx/html; 설정이 있는 지 확인

기본 경로에 파일이 있는지 확인

$ docker exec -t leafy-frontend ls /usr/share/nginx/html

강의 들으시면서 더 궁금하신 점이 생기면 편하게 질문 주세요.

완강까지 응원하겠습니다!

인프런 커뮤니티 질문&답변

leafy-front end 부분 여쭤볼게 있습니다.