라즈베리파이3 B+로 홈페이지 서버 만들기(Node.js 이용)

수성컴|정보/라즈베리파이|2021. 2. 6. 10:00

수성비전자방입니다. 오늘은 라즈베리파이3 B+로 홈페이지 서버를 만들어 보겠습니다.

 

사전 준비

1. 우선 개인적으로 HTML, CSS(그 외에 필요하다면 Javascript까지)를 이용하여 홈페이지를 만들어 주세요. 저는 간단하게 테스트용으로 index.html, stylesheet.css, test.html 파일을 준비했습니다.

2. 라즈베리파이3 B+에 운영체제를 설치해 주세요. 저는 라즈베리파이 OS를 사용했습니다. 라즈베리파이 OS 설치 방법과 한국어 패치 방법이 궁금하시면 아래 링크를 클릭하세요.

라즈베리파이 OS 설치와 한국어 패치(라즈베리파이3 B+)(toopyo.tistory.com/entry/raspberrypi-os-32)

 

Node.js 설치

2021년 2월 5일 기준

1. https://nodejs.org 로 접속하세요. 그러면 두 개의 초록색 버튼이 보일 겁니다. 하나는 LTS이고, 다른 하나는 Current입니다.

*LTS: 많은 사용자에게 권장되는 버전. 즉, 안정적인 버전.

*Current: 최신버전

원하시는 버전을 생각해 보세요. 저는 LTS를 사용하겠습니다.

저 초록색 버튼은 클릭하지 마시고, 버전 번호만 기억해 두세요.

 

2. 터미널을 실행합니다.

3. 아래 명령어를 입력하여 실행합니다.

curl -sL https://deb.nodesource.com/setup_버전앞자리.x | sudo -E bash -

예를 들어 14.15.4 버전을 내려받으시려면,

curl -sL https://deb.nodesource.com/setup_14.x | sudo -E bash -

이렇게 입력하시면 됩니다.

 

4. sudo apt-get install -y nodejs 명령을 실행합니다.

5.

sudo apt-get install gcc g++ make

curl -sL https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -

echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list

sudo apt-get update && sudo apt-get install yarn

이 명령들은 필수인지는 모르겠는데 저는 했습니다. 모두 터미널 창에 나온 것들입니다. Windows 명령 프롬프트와 달리 라즈베리파이 OS의 터미널 창에서는 복사, 붙여넣기가 안 돼서 불편하군요...

 

6. 다 설치가 되었으면 버전이 맞게 설치되었는지 확인해 봅시다.

node -v

npm -v

이 명령들을 각각 실행해 주시면 됩니다.

 

Node.js로 서버 열기

1. 서버 설정과 관련한 *.js 파일(*은 임의의 파일명)을 만들어야 합니다. www.w3schools.com/nodejs/nodejs_url.asp를 참고했습니다.

제가 작성한 소스코드를 아래에 넣어드리겠습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var http = require('http');
var url = require('url');
var fs = require('fs');
 
http.createServer(function (req, res) {
  var q = url.parse(req.url, true);
  var filename = "." + q.pathname;
  fs.readFile(filename, function(err, data) {
    if (err) {
      res.writeHead(404, {'Content-Type''text/html'});
      return res.end("404 Not Found.");
    } 
    else{
    res.write(data);
    return res.end();
    }
  });
}).listen(38080);
cs

이제 각 줄이 무엇을 의미하는지 설명해 드리겠습니다.(제 지식의 한계로 모두 설명해 드리기는 어렵고, 일부만...) 색깔은 위와 조금 다른 점 양해 부탁드립니다.

 

[시작하기 전에 - 모듈을 포함시키는 방법]

var 변수이름 = require('모듈명')

이 글에서는 http, url, fs 모듈을 사용하겠습니다.

 

[1행]

var http = require('http');

http라는 변수를 정의하고, 그걸 통해서 http 모듈을 포함시키겠습니다.

 

[2행]

var url = require('url');

이 모듈은 URL을 분석하기 위해 필요합니다. HTML, CSS 등의 파일 수를 합쳐서 총합이 2개 이상인 경우 URL을 분석할 수 있어야 서버가 정상 작동합니다.

URL을 분석한다는 것은 가령, 주소가

http://123.45.6.78:38080/index.html?id=abc&page=1 이면

123.45.6.78은 host로,

38080은 port로,

index.html은 path로,

그 뒤로 있는 index.html?id=abc&page=1은 query string으로 분석하는 것입니다.

오늘 저는 path까지만 사용하겠습니다.

 

[3행]

var fs = require('fs');

File System 모듈입니다.

 

[5행]

http.createServer(function (reqres) {

 

[6행]

var q = url.parse(req.urltrue);

 

[7행]

var filename = "." + q.pathname;

예를 들어, path가 index.html이면, filename은 ./index.html이 됩니다.

 

[8행]

fs.readFile(filenamefunction(errdata) {

 

[9행]

if (err) {

만약 오류가 발생하면 10~11행의 소스코드를 실행합니다.

 

[10행]

res.writeHead(404, {'Content-Type': 'text/html'});

오류코드 404를 내보냅니다. 그리고 콘텐츠 타입을 HTML로 합니다.

 

[11~12행]

return res.end("404 Not Found.");

화면에 404 Not Found를 출력합니다.

 

[13~17행]

    else{

    res.write(data);

    return res.end();

    }

  });

오류가 발생하지 않으면 해당 파일을 실행합니다. 이번에 {'Content-Type': 'text/html'}이 없는 이유는 HTML 외에 다른 파일(ex. CSS)도 읽기 위해서입니다.

 

[18행]

}).listen(38080);

포트 번호를 38080으로 지정합니다. 보통 8080으로 많이 사용하시는데 제가 38080으로 바꾼 이유는 포트 번호 변경이 가능하다는 것을 보여드리기 위해서입니다. 사용하고 싶으신 포트 번호를 괄호 안에 넣어 주시면 됩니다.

 

2. 사전 준비하신 HTML, CSS 등의 파일과 1번 과정에서 준비한 *.js 파일을 라즈베리파이에 넣어 주세요. 저는 pi 폴더 안에 server 폴더를 만들고, 그 안에 파일들을 넣었습니다. 제가 작성한 *.js 소스코드 기준으로 *.js 파일은 다른 HTML, CSS 파일들과 동일한 폴더에 있어야 합니다.

3. 터미널 창에서 cd server를 입력해서 server 폴더로 이동하세요.

4. node *.js 명령을 실행하시면 *.js에 작성한 설정대로 서버가 열립니다.

아까 말씀드린 대로 *은 임의의 파일명입니다. 저 같은 경우에는 homepage.js 파일로 저장했으므로 node hompage.js 명령을 실행했습니다.

 

5. 이제 라즈베리파이의 웹브라우저에서 http://localhost:38080/index.html 로 접속하면 서버의 index.html 파일이 열립니다.

(물론 서버에 index.html 파일이 없으면 안 열립니다.)

CSS도 잘 적용되었습니다. 세부 항목을 눌러 보았습니다.

 

제가 테스트용으로 만든 페이지라서 별 내용 없습니다.^^

 

없는 파일명으로 path를 입력하거나 path를 입력하지 않으면 404 Not Found.가 출력됩니다.

 

서버를 끄시려면 터미널 창에서 Ctrl+C를 누릅니다. 복사 단축키가 아니라 서버 끄는 단축키입니다.

 

포트포워딩

공유기를 사용하는 경우 각 장치에 사설 IP가 부여됩니다. 같은 네트워크 안에서는 사설 IP를 입력하여 서버에 접속할 수 있지만, 외부 네트워크에서 서버에 접속하려면 공인 IP를 입력해야 하므로 공유기에서 포트포워딩을 해 주어야 외부 접속이 가능합니다. 인터넷에 공유기 이름을 검색해 보면 포트포워딩 하는 방법이 나오므로 검색해 보시기 바랍니다.

포트포워딩 하실 때 내부 포트는 *.js 파일 거의 마지막 줄에 작성하신 그 포트 번호를 입력하시면 됩니다.

포트포워딩이 완료되면 외부 네트워크에서는 웹브라우저 주소창에 http://공인IP:외부포트/path를 입력해서 접속하실 수 있습니다.

위의 이미지와 저의 소스코드로 예를 들자면, 포트포워딩을 할 때 내부 포트에는 38080을 입력하고, 만약 제가 외부 포트도 38080으로 설정했다면 http://123.45.67.8:38080/index.html을 입력해서 라즈베리파이 서버에 있는 index.html 파일로 접속할 수 있습니다.

 

저의 글을 읽어 주셔서 감사합니다.

다음에 만나요!

댓글()