라즈베리파이 - 가상호스트 세팅하기

지난번 실습에서는 라즈베이파이로 기본적인 웹서비스를 세팅하고 이를 확인하는 실습을 진행했었다. 이번에는 이전 실습에서 구현한 라즈베리파이 환경에서 사용자 계정을 생성하고 해당 계정에서 웹서비스를 수행하는 실습을 진행해보겠다. 또한 github에서 공유되는 수많은 웹페이지 템플릿을 fork해서 웹서비스에서 사용해보도록 하겠다. 이번 실습에서 가정하는 웹호스팅 서비스의 셋업 과정은 다음과 같다.

​

본 실습에서는 정식도메인이 아닌 가짜 도메인을 사용한다.

​

1. 사용자 계정 생성 및 도메인 이름 결정

​우선 이전의 실습처럼 라즈베리파이를 부팅하고 라즈베리파이의 IP주소를 알아낸 후 ssh 프로토콜을 이용해서 라즈베리파이에 접속해야 한다. 해당과정은 이전의 실습들에서 여러번 수행해보았으므로 해당 글에서는 생략하는 것으로 하겠다. 사용자를 관리하기 위해서는 Super user 권한을 가져야 한다. 이를 위해서 먼저 다음과 같이 명령어를 입력하여 Super user 권한을 획득하도록 하자.

sudo su -

권한을 획득한 후 다음의 명령을 입력해서 새로운 사용자 계정을 설정한다. 우선 사용자 계정을 생성하는 데 다음의 명령을 사용하여 수행한다.

useradd -m "(user_name)"

-m : 해당 사용자 계정을 생성하고, 해당 사용자 계정의 디렉터리를 생성

다음과 같이 " " 안에 사용하고자 하는 계정명을 입력해주면 된다. 여기서 -m 옵션이 가지는 의미는 해당 계정을 생성함과 동시에 해당 계정이 가지는 디렉터리를 할당한다는 의미이다. 해당계정이 컨트롤 할 수 있는 디렉터리를 가져야 해당 계정에서 서비스하는 웹서비스와 관련된 파일들을 위치시킬 수 있기 때문에 해당 옵션은 반드시 필요하다. 다음으로 생성한 계정에 특정한 사용자만 접근할 수 있도록 비밀번호를 설정해야 한다. 계정 비밀번호 설정의 다음의 명령어를 사용하여 수행한다.

passwd (user_name)

다음과 같이 passwd 명령어 뒤에 이전에 생성한 계정명을 입력하면 해당 계정에 대한 비밀번호를 설정할 수 있다. 이후의 과정은 원하는 비밀번호를 입력 후 확인을 위한 재입력이 진행되고 모든 과정이 정상적으로 수행되면 마지막 캡쳐에서 보이는 것처럼 비밀번호가 성공적으로 설정되었다고 나온다.

​

​2. 사용자 웹사이트 세팅파일 제작

​다음으로 사용자 웹사이트 세팅파일을 제작해주어야 한다. 웹사이트 세팅 파일은 다음의 경로에 생성한다.

/etc/nginx/sites-available

다음의 경로에 vi 또는 vim 에디터를 이용해서 생성하고자 하는 도메인명을 이름으로 한 파일을 생성해주면 된다. 파일이름을 무조건 다음과 같이 서버이름과 맞춰줘야할 필요는 없으나 보통 관리의 용이성을 위해서 다음과 같이 파일명과 서버명을 통일해서 생성하는 것이 일반적이다. (라즈비안에는 vim이 설치되어 있지 않기 때문에 vi를 사용하거나 별도로 vim을 설치해서 사용해야 한다.)

​

다음과 같이 명령어를 입력해서 vim 에디터를 실행한 후

vim /etc/nginx/sites-available/hjy2885.com

다음의 내용을 입력 후 저장해주면 된다. 여기서 중요한 부분은 다음과 같다.

server_name	서버의 이름을 설정하는 부분, 이 부분의 내용을 통해서 사용할 수 있는 도메인 명이 결정된다.
root	해당 웹사이트의 root directory를 설정한다.
index	index 파일을 설정한다.

각 부분이 가지는 의미들을 잘 기억하면서 파일 세팅을 할 수 있도록 하자.

​

​

​3. 심볼릭 링크 제작​

다음으로는 생성한 웹사이트 세팅파일을 다음의 경로에 넣어줘야 한다.

/etc/nginx/sites-enabled

해당 경로에 웹사이트 세팅파일이 들어가야 서버가 제대로 웹서비스를 할 수 있게된다. 그런데 여기서 기억해야할 점은 해당 경로에 세팅파일을 넣는 것이 아닌 세팅파일의 링크를 넣는다는 점이다. 그 이유는 해당 사이트에 대한 서버를 중단해야할 상황이 발생한 경우 만약 해당경로에 세팅파일 자체를 넣어두었다면 해당파일을 직접 삭제해야하는 과정을 거쳐야하지만 링크파일을 넣어두면 단순히 링크를 해제하는 것만으로 해당 웹사이트 서버에 대한 서비스를 중단할 수 있기 때문에 유지측면에서 더 유리하다고 할 수 있다.

​

그래서 다음과 같이 이전단계에서 생성한 세팅파일의 심볼릭 링크를 해당 경로에 생성하게 된다. 이 때 사용하는 명령어는 다음과 같다.

ln -s /etc/nginx/sites-available/hjy2885.com /etc/nginx/sites-enabled/hjy2885.com

그러면 다음과 같이 해당경로에 이전에 생성한 세팅파일에 대한 링크가 생성된 것을 확인할 수 있다.

​

​

4. 웹서비스 세팅 테스트

이제 본격적으로 웹서비스를 시작하기 전에 마지막으로 세팅에 대한 점검을 수행하는 과정이다. 해당 과정은 다음의 명령어를 입력하여 수행한다.

nginx -t

해당명령어를 입력한 후 다음과 같은 창이 나타났다면 세팅이 정상적으로 수행된 것이다.

​

​

5. 웹서비스 재시작

​이제 변경내용들을 적용하고 해당 내용들을 기반으로 웹서비스를 제공하기 위해서 다음의 명령어를 입력해서 웹서비스를 재시작해야 한다.

service nginx restart

해당명령어 입력 후 다음과 같이 나타났다면 웹서비스가 성공적으로 재시작되었음을 의미한다.

​

6. 고객(Client)에게 계정과 관련된 정보 전달

​이제 여기까지해서 서버관리자(root)가 해줘야할 일은 거의 마무리 되었다. 이제 마지막으로 해당건을 요청했었던 client에게다음의 정보를 전달해주면 된다.

서버 IP 주소	서버의 ip 주소를 알아야 client가 ssh 프로토콜을 이용해서 접속할 수 있으므로 해당 정보를 제공해야함.
username	username을 알아야 해당 서버의 해당계정으로 접속할 수 있으므로 해당정보를 제공해야 함.
password	초기에 계정생성 시 입력했던 비밀번호 값을 넘겨주면 됨. 이후 client는 계정에 대한 정보를 넘겨받고 해당 계정으로 접속하면 비밀번호를 재 변경할 수 있음.
웹사이트 root directory	사용자가 웹사이트를 제작하기 위해서는 웹사이트의 root directory를 알아야 함.
index	부가적으로 index 파일에 대한 정보를 제공하여 사용자가 웹페이지를 제작하는 데 있어 발생할 수 있는 혼선을 방지함.

​

7. 해당계정으로 서버에 접속 확인(Client)

​이제 잠시 해당 서비스를 요청했던 고객(Clinet)의 입장으로 돌아가보도록 하자. 서버관리자(root)로부터 전달받은 정보들을 바탕으로 우선 사용할 계정이 잘 생성되었는 지 확인해보도록 하자.

이전 단계에서 서버 관리자에게 전달받은 정보들을 이용해서 다음과 같이 생성한 계정으로 서버에 접속해도록 하자.

만약 비밀번호까지 입력 후 다음과 같이 정상적으로 서버에 접속이 이루어졌다면 logout을 입력해서 서버와의 접속을 종료한 후 터미널로 돌아오도록 하자. 해당과정은 서버관리자가 생성해준 계정이 정상적으로 서버에 접속이 가능한 상태인지 확인하기 위해서 수행한 과정이므로 접속이 정상적으로 이루어진 것을 확인했다면 그냥 다시 나오면 된다.

​

​

8. 자신의 Local hosts 파일에 도메인 이름과 IP 등록 (Client)

​hosts 파일은 PC가 알고 있어야할 주요 ip에 해당하는 domain name을 담고 있는 파일이다. 이 파일에 라즈베리파이서버에서 생성한 domain name과 라즈베리파이의 ip 주소를 적어줌으로서 나중에 브라우져에서 해당 ip 주소를 입력 시 이를 DNS에 물어보지 않고 바로 해당주소로 접속을 수행하게 된다.

​

hosts 파일의 경로는 운영체제별로 다음과 같으니 참고하기 바란다.

MacOS	/etc/hosts
Windows10	/windows/system32/drivers/etc/hosts

hosts 파일의 내용을 수정하기 위해서는 local PC에서도 마찬가지로 Super user의 권한을 획득해야한다. 본 작성자의 경우 MacOS를 사용하는데 MacOS의 경우 Unix기반으로 만들어져서 터미널에서 사용하는 명령어가 리눅스와 유사하다. 이전에 사용했던 것과 동일하게 다음의 명령어를 입력해주면 Super user 권한을 획득할 수 있게 된다.

sudo su -

이제 위에서 기록한대로 MacOS의 hosts 파일이 위치하는 /etc 경로로 이동해서 hosts 파일을 찾아보도록 하자. 해당 경로로 이동해서 저장된 파일들을 살펴보면 중간에 hosts 파일이 있는 것을 확인할 수 있다.

hosts 파일을 vim 에디터로 처음연 모습

이제 이전단계들에서 설정했던 domain name과 그에 해당하는 IP주소를 다음과 같이 입력해주고 저장하면 된다.

해당과정을 모두 마쳤다면 이제 우리의 Local PC는 이번에 새롭게 생성한 웹사이트에 접속할 수 있는 상태가 된다.

​

​

8. 계정 비밀번호 변경 및 테스트 페이지 제작 후 테스트(User)

​이제 로컬PC에서 수행해야 할 작업들을 모두 마쳤으므로 이제 다시 계정으로 서버에 접속해서 계정의 비밀번호를 변경해야한다. 비밀번호를 변경함으로서 이제 다른사람들은 접근할 수 없는 완전한 자신의 계정이 되는 것이다. 계정 비밀번호 변경은 이전에 서버관리자가 초기에 계정의 비밀번호를 설정할 때와 동일한 명령어 형식을 사용한다.

passwd (user_name)

그 이후는 우리에게 익숙한 절차에 따라서 계정 비밀번호를 변경하는 절차를 따르게 된다.

​

이제 웹사이트를 본격적으로 제작하기 전에 간단한 테스트 페이지를 생성해보도록 하자. 우선 해당 계정의 root dirctory에서 html 이라는 디렉터리를 생성해야 한다. 그 이유는 이전에 서버세팅파일을 생성하면서 root dirctory를 /etc/hjy2885/html로 설정했기 때문이다. 그래서 html 디텍터리를 생성 후 해당 디렉터리 내에 웹사이트 관련 파일들을 저장하면 해당 파일들을 가지고 웹서비스를 하게 되는 것이다.

다음과 같이 html 디렉터리를 생성 한 후 해당 디렉터리로 이동해서 index.html을 생성하도록 하겠다. 그리고 간단한 내용을 해당파일의 내용을 다음과 같이 작업하겠다.

다음과 같이 index.html 파일을 작업하고 저장한 다음 브라우져로 이동해서 이전에 설정한 서버이름인 hjy2885.com 으로 이동해보면

다음과 같이 테스트를 목적으로 만든 index.html 파일의 내용이 웹페이지에 나타나는 것을 확인할 수 있다.

​

​

9. 서버에 git 설치하기(root)

​이제부터는 서버에 git을 설치해서 웹페이지를 github과 연동해서 관리하고 github에 오픈소스로 존재하는 많은 웹사이트 탬블릿들을 이용해서 좀 더 보기 좋은 형태로 웹사이트를 제작하기 위한 사전작업을 시작하도록 하겠다. 오랜만에 다시 서버관리자(root)로 돌아왔다. 서버에 git을 설치하기 위해서는 우선 Super user 권한을 획득한 후 다음의 명령어를 입력하면 된다.

apt-get install git

명령어의 형태를 보면 초기에 라즈베리파이에 nginx를 설치할 때 와 같은 명령어 형식을 사용하고 있는 것을 알 수 있다. 마찬가지로 서버에 vim 에디터를 설치하고 싶다면 동일한 형식을 활용하여 설치할 수 있다.

다음과 같이 위의 명령어를 입력하면 자동으로 git의 설치과정을 진행하게 되고 조금 기다려주면 설치가 완료된다. 이렇게 서버에 git을 설치하는 과정을 모두 마쳤다.

​

10. Github에서 원하는 웹페이지 탬플릿 선택하여 나의 github 저장소로 fork 하기(Client)

Github 에서는 많은 사람들이 자신이 제작한 웹페이지 탬플릿을 오픈소스로 공유하고 있다. 검색창에 "Web pages template" 와 같은 형식으로 검색하면 수많은 프로젝트 소스들을 확인할 수 있다.

여기서 자신이 원하는 template을 하나 골라서 자신의 Github 저장소로 fork 해오도록 하자

다음과 같이 원하는 탬플릿을 한가지 선택해서 Github 저장소로 fork 하였다.

​

11. 페이지 소스 변경 및 사이트 접속 테스트 (Client)

​이제 이를 로컬저장소(라즈베리파이)로 clone해서 가져오도록 하자. (사전에 git init, git remote add 와 같은 작업들은 수행한 상태라고 가정한다.)

다음과 같이 fork한 웹페이지 탬플릿 관련 소스를 로컬저장소의 html 디렉터리로 성공적으로 clone 한 것을 확인할 수 있다.​ 그렇다면 다시한번 브라우져로 이동해서 해당 서버주소의 페이지를 열어보면

다음과 같이 탬플릿의 형태를 갖춘 웹페이지가 나타나는 것을 확인할 수 있다.

​

그렇다면 해당 소스를 살짝만 수정해서 웹페이지 상에서 나타나는 내용을 변경해보도록 하자.

clone한 repository 마찬가지로 index.html 파일을 확인할 수 있다.

이제 여기서 index.html 파일을 열어서 일부내용을 수정해보도록 하자.

수정하기 이전의 내용

수정한 후의 내용

다음과 같이 수정한 후 해당 페이지를 웹브라우져에서 다시 열어보면

다음과 같이 제목, 부제목 부분이 수정된 것을 확인할 수 있고 웹서비스가 정상적으로 이루어지고 있음을 확인할 수 있다.

​

12. 페이지 소스 변경내용 github 저장소에 add-commit-push 하기 (Client)

​이전단계에서 봤던 것처럼 웹페이지 소스를 git으로 관리하기 때문에 해당 소스들을 github을 이용해서 관리하는 것이 가능해진다. 이전 단계에서처럼 페이지소스를 수정한 상태에서 git status를 입력해보면 물론, 해당 과정을 수행하기 전에 git 설치 후 다음의 과정을 수행했다고 가정한다.

다음과 같이 수정했던 index.html 파일이 modified 상태가 된것을 확인할 수 있다. 해당 파일을 add 및 commit 해주고

마지막으로 push를 해준 후 github 저장소로 이동해보면

​

다음과 같이 변경내용을 github 저장소에 저장한 것을 확인할 수 있다. 해당실습에서 설명이 다소 부족한 부분들이 존재하는데 이와 관련된 내용들은 다른 글에서 별도로 다루는 것으로 하겠다. 이것으로 실습을 마치겠다.