node.js with express 프레임워크 | 정적 웹사이트 만들기

지난 스토리에서는 fs모듈 시스템믈 이용하여 다소 원시적(?)인 웹서비스를 제공하는 방법을 살펴보았는데요.

https://itadventure.tistory.com/434

node.js with fs 모듈 | 파일 시스템으로 첫페이지 보여주기

오늘날 웹서비스는 유저들에게 보여줄 파일을 html 파일로 작성하고, 요청이 들어오면 해당 페이지를 보여주도록 되어 있지요? Node.js 도 그러한 부분이 가능한데요. 오늘은 파일 시스템을 통하여

itadventure.tistory.com

위 방법의 장점은 반응속도가 가장 빠르다는 것입니다.
군더더기 없이 최소한의 필요한 부분만 100% 작동하기 때문인데요.
문제는 해결해야 할 과제가 많습니다.

웹사이트 전체를 구현하기 위해서는 이미지 파일이라든가 각종 MIME 처리 등 매우 다양한 요소에서
생각지도 못한 것들을 해결하기 위해 많은 부분을 고민하고 노력해야 할 수 있습니다.

누군들 이전에 그러한 고민과 노력을 하지 않았을까요?
티제이 홀로웨이척(Holowaychuk)이라는 프로그래머는 이러한 부분의 상당수를 쉽게 해결할 수 있는
익스프레스(express.js)라는 프레임 워크를 개발하게 됩니다.

https://github.com/tj

tj - Overview

tj has 297 repositories available. Follow their code on GitHub.

github.com

그리고 MIT 라이센스로 누구나 무료로 사용할 수 있게 보급하지요.
이 express.js 의 다운로드 횟수가 2018년 12월 말 기준 5억회라고 하니,
대다수에게 사랑받는 프레임워크임에는 분명한 것 같습니다 :)

패키지 구성 : 익스프레스 모듈

express.js 를 사용하기 위해서는 먼저 패키지를 구성해야 합니다.
패키지(package)란 하나의 목표를 위한 기술덩어리로 볼 수 있는데요.

쉬운 이해를 돕기 위해 새로운 폴더에서 시작해봅시다.
리눅스 터미널에서 /home/nodejs3 폴더를 생성하고 해당 폴더로 이동합니다.

sudo mkdir /home/nodejs3
sudo chown ec2-user:ec2-user /home/nodejs3
cd /home/nodejs3/

현재 이 폴더안에는 아무런 내용이 없습니다.
아래 명령을 내려줍니다.
아래 명령어를 기억하시려면 이런 구호를 외치면 수월하실 겁니다 :)

노드(node) 패키지(package) 매니저(manager) 이닛!(init)!

npm init -y

참고로 뒤에 붙는 -y 는 리눅스에서 일종의 약속같은 건데
대부분의 물음에 Yes 로 자동응답한다는 의미로 사용되고 있습니다.
여기서는 npm 초기화 당시 입력하는 대부분의 입력 요소들을 물어보지 않도록 합니다.

이제 아래와 같은 결과가 보이실 겁니다.
현재 폴더에 package.json 이라는 파일을 작성했다는 내용이지요.

이어서 express 를 다운받아 설치할 차례이지요.
npm 을 이용하면 이 과정을 모두 자동으로 진행할 수 있습니다.
아래 명령을 입력하면, 익스프레스가 자동으로 다운로드되고 설치까지 해줍니다.

npm install express

아래와 같은 결과가 나올텐데요. 인터넷 장애로 인해 오류가 발생할 경우 내용이 다를 수도 있습니다.
그럴 경우 내용을 확인 후 다시 시도해 주셔야 합니다.

이제 이 폴더에는 꽤 많은 파일들이 생겨났습니다.
다음 명령어를 통해 파일 목록을 확인해보도록 하지요.

ls -al

결과화면은 아래와 같습니다.

우선 node_modules 이라는 폴더는 npm 을 이용하여 패키지를 설치하면 생겨나는 폴더입니다.
금방 express 를 설치했었으므로 이 폴더 내에는 express 를 비롯하여 express 와 관련 있는 모듈들이 모두 한꺼번에 설치가 되었지요.

그리고 이런 설치정보를 보관하고 있는 것이 package.json 입니다.
이 파일은 npm init 명령을 실행했을 경우에도 생성되었었는데요.
금방 설치한 express 덕분에 파일의 내용이 약간 변경되었습니다.

cat 명령으로 이 파일의 내용을 살펴보시면,

cat package.json

결과 화면중 dependencies 라는 부분이 추가되었으며 설치된 express 모듈의 버전이 표시되어 있습니다.

아울러 package-lock.json 이라는 파일도 생겨났는데요.
여기서는 express 를 비롯하여 그와 관련된 모든 모듈의 버전 및 저장소 위치까지 들어 있습니다.

cat package-lock.json

이로서 익스프레스 모듈이 세팅되었고 사용할 준비가 완료되었습니다.

익스프레스 모듈의 사용법

/home/nodejs3 폴더에 main.js 라는 이름으로 아래 파일을 작성해 주세요.

const express=require('express');
const app=express();

// public 폴더하위의 파일들을 기본으로 서비스
app.use(express.static('public'));

app.listen(8080, function() {});

그리고 /home/nodejs3 하위에 public 폴더를 만듭니다.

mkdir public

이어서 아래 파일을 /home/nodejs3/public/index.html 페이지로 작성해서 저장한 후에,

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>샘플</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
	태극기가 바람에 펄럭입니다<br/>
	<img src='korea_flag2.png'>
  </body>
</html>

아래 이미지를 다운받아 /home/nodejs3/public 폴더에 korean_flag2.png 라는 이름으로 업로드해 주세요.

이로서 public 폴더 안에는 아주 단순한 2개의 파일로 구성된 웹사이트가 준비되었습니다.

이제 노드 서버를 시작해볼까요?

node main.js

웹브라우저에서 퍼블릭IP주소:8080 으로 확인해보면 아래와 같은 웹사이트가 보입니다.

이는 표준 아파치 서버와 다를 바가 없습니다.
public 폴더 내에 어떤 파일을 넣어주셔도 되는데요.
그림 파일뿐만 아니라 음악이나 영상 파일, css, 하이퍼링크 등 정적인 모든 컨텐츠 구성이 가능하며
로그인이나 게시판과 같은 사용자의 액션에 따른 동적 컨텐츠를 보여주는 것만 안될 뿐입니다.

이러한 작동을 위한 node.js 코드는 단, 4줄에 불과하지요. ( 주석은 빼고 말입니다:) )

const express=require('express');
const app=express();

// public 폴더하위의 파일들을 기본으로 서비스
app.use(express.static('public'));

app.listen(8080, function() {});

만일 node.js 서버를 백그라운드로 운영하시려면 pm2 명령어로 아래와 같이 실행해주시면 됩니다.

pm2 start main.js

pm2 에 대한 자세한 내용은 아래 링크를 참조해 주세요

https://itadventure.tistory.com/432

node.js with pm2 | 백그라운드 실행/중지/재시작/다중포트

인간은 호흡을 하지 않으면 살 수 없습니다. 호흡하지 않는 사람을 우리는 '죽은 사람'이라 일컫지요. 사람뿐만 아니라 모든 자연 만물은 날마다 그 호흡으로 살아 있음을 증명합니다. 재미있는

itadventure.tistory.com

이제 여기서 코드를 한 줄씩 살펴보도록 하겠습니다.

제일 처음 등장하는 라인은 express 모듈을 포함하는 부분인데요.

const express=require('express');

웹서비스를 하기 위해 지난번까지는 http 모듈을 사용했으나, express 모듈이 도입되고 부터는 express 모듈이 모두 알아서 처리할 수 있기 때문에 이 모듈만 포함해주면 됩니다.

그리고 앞에 var 라는 선언 부분이 const 로 변경되었군요.
const 는 '상수'라는 의미로 한번 선언되면 그 이후에는 변경되지 않는 값입니다.
모듈은 한번 선언되면 이후로 변경될 일이 없으므로 const 로 선언하는 것이 좋습니다.

왜냐하면 혹시 실수라도 아래와 같은 코드가 중간에 들어있다면
예상치 못할 오류가 발생할 수 있기 때문이지요.

var express=require('express');
    :
    :
    express = ra * 15; // express 모듈이 사라지고 엉뚱한 ra * 15 의 연산결과가 대입된다

const 로 선언하면 위 수식 부분이 바로 오류가 발생하기 때문에 에러원인의 파악이 유용합니다.

다음 라인으로는 app 라는 상수변수를 선언하면서 express() 모듈의 기본함수를 실행한 결과를 가져옵니다.

const app=express();

앞에서 express 로 모듈을 가져왔으면 바로 사용하면 되지 않는가 생각할수도 있지만,
사실 받아온 express 모듈을 바로 사용하면 오류가 발생합니다,
그래서 이와 같은 방법을 사용하는데요. 이게 원래 사용법이려니 하고 생각하는게 속편합니다 :)
개발자가 원래부터 그렇게 설계했기 때문이지요.

이 방법은 한가지 장점이 있습니다.
모듈을 한번만 불러와 2개의 웹서비스를 작동할 수도 있다는 점인데요.
아래 소스는 하나의 모듈로 8080 포트와 8081 포트를 동시에 서비스하는 예제입니다.

const express=require('express');
const app=express();
const app2=express();

// public 폴더하위의 파일들을 8080 포트로 서비스
app.use(express.static('public'));
app.listen(8080, function() {});

// public2 폴더하위의 파일들을 8081 포트로 서비스
app2.use(express.static('public2'));
app2.listen(8081, function() {});

다음 라인이 바로 핵심입니다.
아래 명령행은 public 폴더를 중심으로 정적인 웹사이트를 운영하라는 규칙을 정해줍니다.

app.use(express.static('public'));

static 이 '정적'이라는 의미의 영단어인데요.
이 때는 app 이 아닌 express 를 사용합니다 ( express.static('폴더') )

그래서 웹브라우저에서 퍼블릭IP주소만 호출하면
통상적으로 첫페이지라고 대개 알고 있는 index.html 파일이 기본으로 보여지게 되는 것이지요.
하지만 여기서 'public' 이라는 폴더명을 파라미터로 전달해 주었기 때문에,
/home/nodejs3 폴더가 아니라 /home/nodejs3/public 폴더를 탐색합니다.

이미지 파일도 사운드 파일도 영상파일도 모두 사용할 수가 있기 때문에 완벽한 하나의 정적인 웹사이트를 이런 방식으로 만들 수 있는 것이지요.

최종적으로 앞에서 모든 규칙을 정해주었기 때문에 마지막으로 이 웹사이트의 운영을 시작하라는 명령이 이어집니다.
이 것으로 8080 포트에서의 웹사이트의 운영이 시작됩니다.

app.listen(8080, function() {});

여기까지 이해가 수월하셨나 모르겠군요 :)
이 번 스토리에서는 정적인 웹사이트를 구현하는 단 4줄까지 node.js 코드를 살펴보았는데요.
설명은 꽤 길었지만 이는 어디까지나 작동원리에 대한 이해를 위한 것이고 최종 요약하면 아래와 같습니다.

1. 작업폴더 생성 / 폴더 이동

sudo mkdir /home/nodejs3
sudo chown ec2-user:ec2-user /home/nodejs3
cd /home/nodejs3/

2. express 설치

npm init -y
npm install express

3. express 샘플 소스 작성 - main.js

const express=require('express');
const app=express();

// public 폴더하위의 파일들을 기본으로 서비스
app.use(express.static('public'));

app.listen(8080, function() {});

4. public 폴더 생성

mkdir public

5. 정적 웹사이트 구성 ( /home/nodejs3/public 폴더에 )

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>샘플</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
	태극기가 바람에 펄럭입니다<br/>
	<img src='korea_flag2.png'>
  </body>
</html>

korea_flag2.png 이미지 파일 업로드

6. node 서버 시작

node main.js

또는 pm2 서비스 시작

pm2 start main.js

오늘 다룬 예제는 정적인 웹사이트로서는 손색이 없지만 동적 웹사이트에 대한 부분은 전혀 다뤄지지 않았는데요.
동적 웹사이트란 시대흐름에 따라 그 정의가 다르긴 하지만 우선 로그인 기능이라든가 게시판 참여 등의 사용자 리액션에 따라 그 내용이 변화하는 웹사이트를 범위로 하겠습니다.

다음 스토리에서는 app.get 이라는 특수 URL 처리 방법에 대해 알아보겠습니다.

오늘도 여기까지 읽어주셔서 감사합니다 :)

다음이야기 : node.js express | 동적 웹페이지 BASIC

https://itadventure.tistory.com/436

node.js express | 동적 웹페이지 BASIC

지난 스토리에서는 node.js 를 이용하여 정적인 웹사이트를 구현하는 방법을 살펴보았는데요. https://itadventure.tistory.com/435 node.js with express 프레임워크 | 정적 웹사이트 만들기 지난 스토리에서는..

itadventure.tistory.com

저작자표시 비영리 변경금지

'코딩과 알고리즘' 카테고리의 다른 글

node.js express \| 템플릿(ejs) (0)	2021.08.22
node.js express \| 동적 웹페이지 BASIC (0)	2021.08.21
node.js with fs 모듈 \| 파일 시스템으로 첫페이지 보여주기 (0)	2021.08.20
node.js with module \| 모듈 설명 (0)	2021.08.15
node.js with pm2 \| 백그라운드 실행/중지/재시작/다중포트 (0)	2021.08.14

크레이의 IT탐구

node.js with express 프레임워크 | 정적 웹사이트 만들기

'코딩과 알고리즘' 카테고리의 다른 글

티스토리툴바

node.js with express 프레임워크 | 정적 웹사이트 만들기

'코딩과 알고리즘' 카테고리의 다른 글

'코딩과 알고리즘' Related Articles

티스토리툴바