Nginx + react 배포, Nginx 500 error (13 Permission denied) 해결

안녕하세요. 케이리버스의 Aiden입니다. 운영환경을 재구축하면서 여러가지 시행착오를 겪고 있습니다. 당분간 시행착오를 극복한 내용으로 블로그 포스팅을 이어가보겠습니다. 다시 재오픈할 케이리버스를 기대해주세요. 감사합니다. 😎 😎

Nginx + react 배포

배포 과정 자체는 상당히 간단하다. Nginx에서 장려하고 있는 Nginx에 빌드 결과물을 올리는 방식은 바로 /etc/nginx/nginx.conf 라는 설정파일을 건드는 것이 아니라 /etc/nginx/site-available/ 디렉토리에 반영할 설정을 정의하고 /etc/nginx/sites-enabled/ 디렉토리에 심볼릭 링크로 연결하여 참조하는 것이다.

1. Nginx install

sudo apt install nginx

2. 기본 설정 파일 삭제

sudo rm /etc/nginx/sites-available/default
sudo rm /etc/nginx/sites-enabled/default

3. myapp 설정 파일 생성

sudo vi /etc/nginx/sites-available/myapp.conf

server {
  listen 80;
  location / {
    root  ${빌드 경로}/build;
    index  index.html index.htm;
    try_files $uri $uri/ /index.html;
  }
}

• 서버의 80번 포트에 대한 설정(이는 환경 변수 복구가 끝나면 443 포트로 redirection할 예정)
• location은 URL이 ‘/’을 포함한 경로에 대한 설정을 의미
• root는 nginx 가 실행할 파일들의 루트 위치를 의미한다.
• try_files는 어떤 파일을 찾을 때 명시된 순서로 찾고, 가장 먼저 발견되는 파일을 사용한다는 의미이다.

4. 심볼릭 링크 연결

sudo ln -s /etc/nginx/sites-available/myapp.conf /etc/nginx/sites-enabled/myapp.conf

5. nginx 설정 테스트

nginx -t

nginx -T

6. Nginx 재시작

sudo systemctl stop nginx
sudo systemctl start nginx

Nginx 500 error (13 Permission denied)

근데 위 과정 중간에 문제가 발생했다. root 폴더 경로도 정확히 들어갔고 설정 테스트도 문제없는 것을 수차례 확인했는데, 케이리버스의 URL을 들어가면 Nginx 500 error가 뜬다. 그냥 머리 굴려가면서 가능한 경우의 수를 시도해보다가 error.log를 까봤다. Nginx의 log 기본 설정 path는 /var/log/ 디렉토리 내부이다.

cat /var/log/nginx/error.log

확인한 에러는 다음과 같다. (13: Permission denied) 가려놓은 곳은 빌드 결과물이 위치하는 디렉토리이다.

nginx 의 실행 그룹이 build 파일 소유 권한과 일치하지 않아서 발생하는 문제였다. Nginx 의 실행 권한을 root로 올리면 간단히 해결되지만 보안상 취약해지므로 빌드 파일의 권한을 새로운 사용자 계정인 nginx로 내리자.

1. 사용자 계정 생성

sudo adduser nginx

2. 사용자 계정 확인

sudo cat /etc/passwd

3. Nginx user 명 변경

vi /etc/nginx/nginx.conf

user nginx;
worker_processes auto;
pid /run/nginx.pid;
include /etc/nginx/modules-enabled/*.conf;

events {
worker_connections 768;
# multi_accept on;
}

http {

##
# Basic Settings
##
...

테스트 한번 해보자

nginx -t
또는
sudo systemctl restart nginx

돌아가면 여기까지 성공이다. 실패했다면 원인은 크게 두가지일 것으로 예상된다.

a. 사용자 계정 생성 실패

새로운 사용자 계정과 Nginx 의 user가 일치하지 않아 Nginx가 없는 사용자 계정을 찾고 프로세스를 실행하기 때문에 에러가 났을 것이다. 따라서 다시 위 과정을 다시 한번 확인하자.

b. Build path 전체 경로에 대한 접근 권한 확인

build 결과물 파일 뿐만 아니라, 그 상위 디렉토리들 (현재 포스팅하는 환경에서는 /home, /home/ubuntu, /home/ubuntu/workspace 등)에 nginx 사용자가 적절한 권한을 가지고 있어야 한다. 각 상위 디렉토리에 대한 실행 권한(x)이 없으면 하위 디렉토리나 파일에 접근할 수 없다.
따라서 먼저, /home/ubuntu/workspace/frontend/build 디렉토리 구조의 상위 디렉토리들이 nginx 또는 www-data(default nginx user 설정) 사용자가 접근 가능한지 확인하고, 적절한 권한을 부여한다.

sudo chmod +x /home/ubuntu
sudo chmod +x /home/ubuntu/workspace
sudo chmod +x /home/ubuntu/workspace/frontend
sudo chmod +x /home/ubuntu/workspace/frontend/build

각 디렉토리에 대해 실행(x) 권한을 추가해준다. 실행 권한이 없으면 디렉토리 탐색이 불가능하다.

c. 그냥 맘편하게 관리자 권한으로 실행하자.