inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

개발자를 위한 쉬운 도커

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

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

해결된 질문

540

민경재

작성한 질문수 18

1

안녕하세요 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

0

황현우

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

 

먼저 기본 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 목록이 조회가 되시는지 확인해보시겠어요?

1

민경재

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

❯ 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를 못찾아 발생한 에러 인듯 합니다.

0

황현우

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

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

 

  1. /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 파일을 불러와 설정에 추가되게 되는 부분입니다.

 

  1. /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 에러가 나오면 다음 방법을 통해서 디버깅 하시면 도움이 되실 것 같습니다.

 

  1. 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번으로 이동

 

  1. default.conf 파일 확인

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

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

 

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

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

 

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

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

 

 

33강 도커 빌드 강의의 docker file

0

37

1

개발환경에서 도커 설정

1

97

2

vscode 터미널 설정 관련 질문

0

100

1

쿠버네티스 강의 언제 나오나요..

2

127

2

postgresql-repmgr:15 지원 종료에 따른 대체 이미지 변경 질문드립니다!

1

184

2

섹션 9. 레이어 관리에서 alpine OS 사용 관련 질문 있습니다!

1

70

2

도커 가상 네트워크와 Stateless 특징 관련 질문

1

74

2

우분투 설치

0

70

2

도커 보안을 실무에서 어떻게 대비하시는지 궁금합니다.

1

234

2

컨테이너를 활용한 개발환경 통일에 관하여

1

94

2

k8s 강의 일정

1

113

2

컨테이너의 Stateless 제약 관련 질문

0

98

1

docker push 하는 중 "single-platform image ..." 메세지가 나오고, docker hub에 image와 tag가 정상적으로 등록되지 않습니다.

2

98

1

docker pull [이미지] 다운로드시 에러 해결 방법 문의

1

439

2

강의 재생 오류

1

87

1

Remote JVM Debug Setting

1

105

1

빌드 방식에 대해 질문 있습니다.

1

101

2

컨테이너 레이어 질문 있습니다.

1

106

1

컨테이너 가상화 호스트 OS

1

154

2

강의 이미지 사용

1

168

2

도커컴포즈 오류

0

161

2

USER 명령어와 관련하여 질문드립니다

1

112

1

강의 예정

1

178

2

실행오류

1

214

3