라즈베리파이4에 nginx 올리기

저번 글에서는 WireGuard 설치 및 wg-easy 를 docker compose 로 올렸습니다. 이제는 작성한 포트폴리오를 nginx 로 올리냐 Jenkins 로 올리냐에 고민을 하다가 일단, Jenkins 는 최근에 많이 다루어 봤기 때문에 nginx 를 올려서 배포해보기로 결정하였습니다. 이번 글에는 잘못 설계(?) 설정한 것에 대해 올리고, 다음 글에서는 해결한 방법에 대해서 적어보도록 하겠습니다. 그럼 라츠 고!

 

1. Docker Compose 설정

wg-easy 를 Docker Compose 로 올렸기에 이번에도 해당 방법을 사용하고자 하였습니다. 여기서 저의 무지함이 들어나는데, Docker Compose 는 여러 서비스를 하나의 파일에서 정의하고 각 컨테이너 간의 상호작용을 설정 할 수 있는 것이지 무조건 하나의 Docker Compose 만 사용해야 하는것이 아니었습니다... 그걸 간과한 나머지, 하나의 .yml 파일에 작성하게 되었습니다.

 

1.1 docker-compose.yml

기존에 wg-easy 를 설정한 docker-compose.yml 에 아래와 같은 설정을 추가하였습니다.

nginx:
    image: nginx:latest
    container_name: nginx
    ports:
      - "80:80"
      - "443:443"
    volumes:
      - ./nginx.conf:/etc/nginx/nginx.conf
    depends_on:
      - wg-easy
    restart: unless-stopped

 

1.2 nginx.conf

그 다음 nginx 설정 파일인 nginx.conf 파일을 볼륨 바인딩 한 곳 즉, docker-compose.yml 파일이 있는 같은 디렉토리에 생성후 아래와 같이 설정하였습니다.

worker_processes auto;

events {
    worker_connections 1024;
}

http {
    server {
        listen 80;
        server_name localhost;

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

        location /wireguard {
            proxy_pass http://wg-easy:51821;
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header X-Forwarded-Proto $scheme;
        }
    }
}

• worker_process : Nginx가 동시에 실행할 수 있는 작업 프로세스의 수를 설정하는 옵션
• worker_connections : 작업 프로세스가 동시에 처리할 수 있는 최대 연결 수를 정의
• listen 80 : Nginx가 80번 포트에서 클라이언트 요청을 수신할 것을 의미
• server_name : 서버가 처리할 도메인 이름을 지정
• location / : 루트 경로를 의미하며, 해당 서버에 대한 기본 요청이 들어왔을때 이 블록을 처리 (필자의 경우 IP 주소 뒤에 포트 번호를 붙이지 않으면 바로 포트폴리오 경로로 들어갈 수 있게 하였음)
• proxy_pass : /wireguard 로 들어오는 요청을 wg-easy:51821 로 프록시 처리.
• proxy_set_header Host : 클라이언트가 요청한 원래 호스트 이름을 Host 헤더에 설정하여 프록시 서버로 전송
• proxy_set_header X-Real-IP : 클라이언트의 실제 IP 주소를 프록시 서버로 전달
• proxy_set_header X-Forwarded-For : 클라이언트와 프록시 서버를 거친 경로를 나타내는 헤더
• proxy_set_header X-Forwarded-Proto : 클라이언트가 요청한 프로토콜을 프록시 서버에 전달

이렇게 하여 최종 파일 구조는 아래와 같습니다.

/data/wg-easy/docker-compose.yml

/data/wg-easy/nginx.conf

그 다음 docker compose up -d 를 통해 실행시켰습니다. 후에 docker ps 를 통해 nginx 가 올라옴을 확인하였습니다.

 

 

2. nginx 실행 성공, index.html 설정하기

404 Not Found , 여기까지 뜨게 된다면 일단 nginx가 실행되고 있다는 뜻입니다. 이제 index.html 을 작성해줄 차례인데 필자의 경우 이미 WebStrom 을 통해 간단한 html 정도를 만들어 놓았기 때문에 해당 파일을 라즈베리파이에 복사하기 위해 아래와 같은 방법을 사용하였습니다.

 

2.1 Macbook 에 있는 파일 라즈베리파이로 복사

맥북에 있는 html 파일을 라즈베리파이로 복사하기 위해선 폴더 전체를 복사해야 합니다. 복사 전에 nginx 가 서빙하는 디렉토리를 먼저 생성하였습니다.

sudo mkdir -p /usr/share/ninx/html

Nginx가 해당 디렉토리에서 파일을 서빙할 수 있도록 권한을 설정하였습니다.

sudo chown -R www-data:www-data /usr/share/nginx/html
sudo chmod -R 755 /usr/share/nginx/html

그 후 맥북에서 만든 html 파일을 해당 디렉토리로 복사하였습니다.

scp -r [복사할 디렉토리의 주소, ex) /Users/admin/Desktop/portfolio/] jeenukchung@192.168.1.23:/usr/share/nginx/html/

이 때 권한 문제가 생겨 필자의 경우 현재 사용하고 있는 jeenukchung 에 잠시 권한을 주어 해결하였습니다.

sudo chown -R jeenukchung /usr/share/nginx/html

다음은 라즈베리파이에 제대로 복사가 된 것을 확인할 수 있는 사진입니다.

 

 

3. index.html 파일을 찾지 못해 404 오류

index.html 이 잘 복사 되어진 것을 상단의 사진과 같이 확인할 수 있는데 계속해서 오류가 났습니다. 오류의 원인은 다음과 같습니다.

 

nginx | 2024/10/16 14:58:15 [error] 22#22: *1 "/usr/share/nginx/html/univers/index.html" is not found (2: No such file or directory), client: 192.168.1.4, server: localhost, request: "GET / HTTP/1.1", host: "192.168.1.23"

 

해당 로그에 따르면 Nginx 가 /usr/share/nginx/html/univers/index.html 파일을 찾지 못해 404 오류가 났다는건데 경로로 직접 들어가보면 index.html 파일이 존재했습니다. 따라서 다른 방법을 찾아야 했고 docker inspect \[container ID] cli 를 통해 확인해보니

 

nginx.conf 파일만 로컬 경로로 바인딩 되어 있고, Nginx가 웹 파일을 제공하는 경로는 바인딩이 되어있지 않았습니다. 즉, Nginx 가 웹 파일을 제공할 경로에 아무것도 연결되어있지 않았습니다. 따라서 docker-compose.yml 파일에서 볼륨 바인딩을 재설정 해주었습니다.

nginx:
    image: nginx:latest
    container_name: nginx
    ports:
      - "80:80"
      - "443:443"
    volumes:
      - ./nginx.conf:/etc/nginx/nginx.conf
      - /usr/share/nginx/html/univers:/usr/share/nginx/html/univers #추가
    depends_on:
      - wg-easy
    restart: unless-stopped

 

이후에 볼륨 마운트를 재설정했기 때문에 현재 실행중인 컨테이너를 정지하고 다시 시작해야 해서 docker compose down 을 해주었는데, 여기서 문제가 발생했습니다. 해당 docker-compose.yml 파일에 WireGuard 설정이 같이 되어 있어서 외부 접속으로 작업중이던 필자 마저 끊겨 버린 겁니다 .. 하하

 

4. 해결 ! CSS 파일 설정 

해결이라 할 거 없이 집 근처 카페에 있었기 때문에 바로 집으로 호다닥 뛰어와서 컨테이너를 재시작 해주었습니다. 그 결과 1차적으로 Nginx 통해 배포를 성공 ! 하였으나, CSS 파일이 깨져 나왔습니다. 원인이 여러가지가 있어 시도한것들을 적어보도록 하겠습니다.

 

4.1 파일 권한 문제

CSS 파일 및 관련 파일의 권한이 웹 서버 사용자인 www-data 혹은 Docker 에서 Nginx 가 사용하는 사용자로 설정되어 있는지 확인

sudo chown -R www-data:www-data /usr/share/nginx/html/univers
sudo chmod -R 755 /usr/share/nginx/html/univers

 

4.2 파일 경로 문제

html 에서 CSS 파일의 상대경로가 제대로 지정되었는지 확인

<link rel="stylesheet" href="/main.3f6952e4.css">

 

4.3 캐싱 문제 및 서버 재시작

기존에 남아있던 캐시로 인해 이전 CSS 파일이 로드 되어지고 있는지 확인

 

그러던 중 WebStorm 에서 로드한 것과 배포 에서 로드한 페이지의 차이점을 Network 에서 찾았습니다.

좌 : WebStorm / 우 : Nginx

 

5. MIME 설정

상단에서 볼 수 있듯 두 사진의 차이를 보면 CSS 파일을 비롯한 모든 리소스가 제대로 로드되고 있음에도 불구하고 Nginx 에서 출력시에 CSS가 모두 깨져서 나왔습니다. 이 문제는 리소스가 제대로 로드 되었지만, 브라우저에서 실제 CSS 스타일이 제대로 적용되지 않은 경우로 판단하였습니다. 그러던 중 MIME 에 대해 알게 되었습니다.
https://www.uptimia.com/questions/why-does-nginx-fail-to-load-css-files

Why Does Nginx Fail To Load CSS Files?

 

5.1 MIME types 란 ?

인터넷에서 주고받는 파일들이 어떤 형식인지 식별하기 위해 사용하는 일종의 규칙입니다. MIME 타입은 클라이언트에게 전달되는 파일이 텍스트, 이미지, 비디오, 오디오 등 어떤 종류의 파일인지 알려줍니다. 이 정보를 바탕으로 브라우저는 해당 파일을 적절하게 처리하여 사용자가 올바른 형태로 볼 수 있게 해줍니다. 만약 Nginx 설정에서 MIME 타입을 정의하지 않으면, Nginx 는 파일의 형식을 알 수 없기 때문에 단순 텍스트로 처리하거나, 무시하는 경우가 생깁니다.

 

5.2 nginx.conf 수정

먼저 컨테이너 내부에 설정된 경로가 존재하는지 확인합니다.

docker exec -it nginx /bin/bash

 

그 후, Nginx 설정 파일이 있어야 할 경로를 확인합니다.

cat /etc/nginx/mime.types

 

파일이 제대로 있는 것을 확인 하였기 때문에 이제 nginx.conf 파일을 아래와 같이 수정하였습니다.

worker_processes auto;

events {
    worker_connections 1024;
}

http {
    include /etc/nginx/mime.types; #추가

    server {
        listen 80;
        server_name localhost;

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

        location /wireguard {
            proxy_pass http://wg-easy:51821;
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header X-Forwarded-Proto $scheme;
        }
    }
}

 

마지막으로 컨테이너를 재시작 해주면, 제대로 적용된 포트폴리오의 모습을 확인할 수 있슴다 !!