라즈베리 파이에 OMV를 설치한 이후, Docker와 Portainer를 설치하는 것을 앞에서 소개한 바 있다. 이전 글에 이어서 OMV6 (OpenMediaVault)에 웹서버 도구인 Nginx를 설치하고, 이 Ngnix에 개인의 html 파일을 연결하여 웹페이지를 구현하는 과정을 자세히 소개한다.
참고로 Nginx는 웹페이지를 관리하는 웹서버 프로그램의 일종으로, 웹서버 기능 외에도, POP3/IMAP 메일 서버, 그리고 동영상 스트리밍 서버 등을 구축할 수도 있는 것으로 알려져 있다. Nginx는 2004년 러시아 개발자 이고르 시쇼브((Igor Sysoev)에 의해 개발된 것으로 알려져 있는데, 성능이 강력하고, 특히 동시에 여러 사용자가 동일한 웹사이트에 접속하는 경우에 효과적으로 대처하는데 장점이 있는 것으로 알려져 있다. 이러한 장점들 때문에, 아파치(Apache)와 함께 웹이 서버용 프로그램 중 가장 널리 사용되며, 점점 그 사용 비중이 증가하는 것으로 것으로 알려져 있다.
OMV6를 설치한 라즈베리 파이에 Nginx를 설치하는 과정은 다음과 같다. 한 단계씩 따라 하면 컴맹 수준이라도 따라 할 만큼 상세히 소개한다.
먼저 OMV에 Docker와 Portainer를 설치하고, Portainer에 로그인한다.
참고로 OMV에 Docker 및 Portainer를 설치하는 과정에 대한 내용이 필요하면 다음을 참조한다.
https://blog.naver.com/mythee1/223081516290
Portainer에서 “Live Connect”를 눌러 Container 메뉴에 진입한다. (또는 Container 메뉴를 그냥 눌러도 됨)
단, 이 과정에서 유의할 부분이 있다. “Connect”옆부분의 연필 모양 편집 아이콘을 누르면 접속 IP 주소를 입력하는 곳이 있는데, 이것이 올바르게 지정되어 있어야 한다. 이 부분에 자신의 라즈베리파이가 접속된 IP주소를 적어준다. 이 부분은 사람마다 전부 다르게 된다.
다음과 같은 Dashboard 화 면에서 좌측의 App Template를 눌러준다.
그러면 다음과 같이 Portainer가 제공하는 Docker 설치를 위해 필요한 Configuration 정보들이 포함된 Template List가 나타난다. 기본적으로 Docker Image를 설치하려면 설치 과정에서 필요한 여러 설정들이 필요한데, 활용 사례가 많은 프로그램들의 경우에는 이러한 Configuation까지 Template에 미리 포함시켜 놓고, 이를 이용하여 간단히 설치할 수 있게 해주는 것인데, Nginx에 대해서도 이러한 Template가 제공되므로 이를 이용하면 쉽게 설치가 가능하다.
다음과 같이 Nginx 이름의 Template를 선택해 클릭해 준다.
그러면 다음과 같은 화면으로 전환되는데, 아래와 같이 이름을 지정해 주고(소문자로), “Deploy..”메뉴를 눌러준다.
그러면 잠시 뒤 녹색의 “Success….”메시지가 잠시 나타났다 사라지고, 다음과 같이 Container에 지정한 이름으로 Nginx가 설치된 것을 확인할 수 있다.
여기서 설치된 Nginx의 내부 포트 번호 부분을 클릭하면
해당 포트가 열리면서, 다음과 같은 Nginx의 기본 화면을 볼 수가 있다. 이로써 Nginx 자체는 잘 설치가 된 것을 확인할 수 있다. (단, 위에서 언급한 Portainer의 접속 IP 주소 지정이 정확히 지정되어 있지 않으면 이 화면이 정상적으로 나타나지 않는다.)
그런데, 우리는 Nginx의 기본 화면이 아니라, 우리가 만든 HTML 페이지를 웹서버 페이지로 사용해야 하므로, 우리가 만든 HTML 파일이 있는 위치를 Nginx에 지정해 주어야 한다.
먼저 Container list에서 Nginx 이름을 눌러 세부정보 화면으로 들어가고,
다음과 같은 세부정보 화면이 나오면, 끝에 있는 편집 메뉴(Duplicate/Edit)를 선택하여,
나타나는 화면의 아래쪽에 있는 Advanced Setting으로 이동한다.
여기서, 다음과 같이 Data가 저장되는 위치를 지정하는 부분인 Volume 탭을 선택한다. 이곳에는 Ngnix에 대한 Configuration이 저장되는 곳과, 실제 html이 저장되는 곳에 대한 정보가 있다.
2번째 부분의 /usr/share/nginx/html 부분을 Bind로 변경하고, 우리가 작성할 html 파일이 저장될 폴더 위치를 기재해 준다. Volume 지정이 끝나면, Deploy 메뉴를 선택해 준다.
참고 – 만일 이 폴더의 위치가 너무 복잡해 직접 기재하기 어려운 경우라면, 다음과 같이 OMV의 공유 폴더 메뉴에서 다음과 같이 복사하여 붙여 넣어주고, 필요시 Subfolder를 추가로 기재하는 방식으로 기재하면 편리하다. 위의 예에서는 나는 /docker 폴더 밑에 /docker/ngnix1 형태의 subfolder를 만들고 여기에 index.html을 비롯한 파일들을 넣기로 했다.
이렇게 지정한 Volume 위치에 내가 사용할 html 파일을 넣어주기 위해, HTML파일을 준비한다.
본 예에서는 무료 웹페이지 template를 제공하는 Bootstrap 사이트에서 마음에 드는 웹페이지 Template를 내려받았다.
준비된 HTML 파일들을 위에서 지정한 Volume 위치(/docker/ngnix1)에 업로드했다.
업로드는 SMB나 SFTP, WEBDAV 중 어느 것이든 해당 폴더에 접근권만 있으면 아무것이나 사용해도 된다.
다음과 같이 웹페이지에 사용할 템플 레이프가 폴더에 업로드되었다.(나중에 이 웹페이지 Template의 내용은 내가 필요한 대로 추가로 수정하면 된다.)
이렇게 Volume 연결과, 실제 웹페이지로 사용할 HTML 파일 업로드를 마친 후, Nginx를 한번 리셋해 주어야 업로드한 내용이 반영되므로, 다음과 같이 Nginx의 이름을 누르고
Restart 메뉴를 누르고 잠시 뒤,
Container list에서 Ngnix에 지정된 내부 port 번호를 누르면,
다음과 같이, 우리가 지정한 폴더에 올려놓은 HTML 파일이 성공적으로 웹페이지로 나타나고, 각 버튼을 눌러보면, 정상적으로 작동하는 것을 볼 수가 있다.
이렇게 Portainer를 이용하여, OMV에 Ngnix를 설치하고, 우리가 사용할 HTML 파일을 연결하여, 웹페이지로 구동하는 방법을 소개하였다.