nginx를 사용한 웹페이지에서 동영상이나 사진을 볼 수 있게 만들기

웹페이지가 글자만 보이면 휑한 기분이 들어 이미지라던가 동영상이 나오면 좋겠다고 생각했다.

그전에 내 가상머신엔 아무런 미디어 파일이 없기 때문에 ftp를 사용해 파일을 전송하려고 한다.

 

 

 

1. 폴더 생성

 

먼저 동영상이나 이미지 넣을 폴더를 생성했다.

$sudo mkdir -p /var/www/media #media폴더에 파일을 넣을 예정

 

 

그리고 ftp를 사용할 때 권한 문제가 없게 하기 위해서 계정이 폴더권한을 가질 수 있게 해 줬다.

$sudo chown -R $사용자:$사용자 /var/www/media  #$소유자:$그룹을 설정한 것

 

 

 

 

 

2. FileZilla 설치와 파일전송

 

무료로 사용할 수 있는 FileZilla을 사용했다.

호스트에 가상머신 주소, 사용자명, 비밀번호, 포트번호는 ssh접속하는 것과 동일하게 입력해 주면 된다.

결과적으로 ssh 접속과 같다.

 

 

간단히 옮길 수 있어 간편하다. 파일이름은 길어서 test.png로 바꿔줬다.

 

 

 

 

 

 

3. nginx 설정 바꿔주기

 

전송한 파일을 확인하려고 http://주소/media/test.png로 가보면 에러가 나온다.

 

실패

 

 

nginx의 sites-available 설정을 바꿔줘야 파일을 읽을 수 있다고 한다. 

설정을 해주지 않으면 nginx는 /var/www/html만 연결하기 때문이다.

 

 

 

 

 

※참고한 링크 https://nginx.org/en/docs/http/ngx_http_core_module.html#location

$sudo vim /etc/nginx/sites-available/default   #vim 대신 nano를 사용해도 무방

 

 

 

위의 명령어를 사용해 아래 코드를 작성해 주자.

 

alias는 media 폴더를 /var/www/media/와 연결해 주는 역할,

autoindex는 test 할 때 파일목록을 다 볼 수 있는 기능이다. (평소엔 off)

 

 

 

 

 

$sudo systemctl restart nginx

 

위 명령어로 nginx를 다시 시작한 뒤에 새로고침을 하면 정상적으로 확인할 수 있다.

 

 

 

 

 

 

 

4. html코드 변경

 

파일이 제대로 보이는 건 확인했으니 웹페이지에 띄울 수 있게 코드를 변경해 줬다.

source는 나중에 동영상 테스트용

 

 

웹페이지 확인

성공!

 

사진이 잘 보이게 됐다. 

 

 

 

 

 

 

---

 

 

 

 

 

요약정리✨

1. ftp 파일전송에 필요한 프로그램 => filezilla

2. 404 에러가 난다면 sites-available/default 꼭 수정해줘야 함.

3. nginx 재시작도 잊지 말기.

 

 

 

 

 

 

감사합니다.😊