본문 바로가기
자바스크립트와 캔버스

Node.js - Part 11-4. 단 4줄로 정적 웹사이트 만들기

처음부터 시작하는 AWS와 Node.js 책자 본문 일부입니다.

https://itadventure.tistory.com/493

 

[전자책 출간!] 처음부터 시작하는 AWS와 Node.js ( express )

65 페이지 분량의 미리보기 책을 무료로 제공해드립니다 첨부파일을 다운로드하셔서 보시고 관심을 갖게 되신다면 그 때 구매하세요! 그동안 집필해본 '처음부터 시작하는 AWS와 Node.js' PDF 전자

itadventure.tistory.com

Part11-3은 중요도가 그리 높지는 않아 건너 뛰었습니다 :)

이전 Part 에서 파일 모듈로 정적인 웹사이트를 만드는 부분을 다뤄봤었는데요.
express.js 를 이용하면 단 4줄정적인 웹사이트를 만들 수 있어 살펴보겠습니다.

스크립트를 입력해볼 텐데요, 앞으로는 구구절절 설명드리는 대신 아래와 같이 아래와 같이 소스 구성방법을 제공해드리겠습니다.

/home/nodejs2/main.js

const express=require('express');
const app=express();
app.use(express.static('public'));
app.listen(8080, function() {});


위 내용은 1) /home/node2 폴더로 이동, 2)-4) main.js 스크립트 파일을 생성하고

 5)-6)소스를 편집시작, 6) 상기본문으로 소스를 입력, 저장하라는 의미입니다.

이후로 지면을 줄이고 원활한 이해를 위해 이런 방법으로 표기해드리도록 하겠습니다.

이제 puppy.htmlhappynewyear.html 웹페이지를 생성할 텐데요. 좀 다른 부분이 있습니다.

웹페이지가 /home/nodejs2 폴더가 아니라, /home/nodejs2/public 폴더에 위치해야 한다는 점이지요. public 폴더는 현재 없기 때문에 새로 만들어야 합니다.

터미널창에서 아래 내용을 타이핑, public 폴더 생성, ec2-user 소유자 권한으로 바꾸어 줍니다.

sudo mkdir public
sudo chown ec2-user:ec2-user public

그리고 HTML 페이지를 구성할 텐데요.
그전에 잠깐!, public 폴더를 만들었는데 SSH Browser 에서는 해당 폴더가 안 보일 것입니다.

 이 때는 SSH Browser 아무 곳이나 마우스 클릭, F5(새로고침)을 눌러주시면 폴더가 나타납니다.

이제 앞에서 설명 드린 데로 폴더 위치, 파일명만 기술하도록 하겠습니다.
다음과 같이 서버에 2개의 HTML 소스를 구성해 주세요.

/home/nodejs2/public/puppy.html

<html>
  <head>
    <title>우리집 초코</title>
  </head>
  <body>
    <h1>!!</h1>
  </body>
</html>

/home/nodejs2/public/happynewyear.html

<html>
  <head>
    <title>행복한 새해!</title>
  </head>
  <body>
    <h1>😀해피뉴이어~🎵</h1><br/>
    저물어가는 한해를 보내며 신년을 맞이하는 모든 분들께<br/>
    하나님의 은혜와 평강이 가득하시기를 소망합니다.<br/>
    <h1>🍈🍉🍊🍋🍌🍍🥭🍎</h1>
    <h1>🍏🍐🍑🍒🍓🍅🍆🌽</h1><br/>
  </body>
</html>

그리고 터미널에서 node.js 서버를 시작합니다.

node main.js

이제 웹 브라우저에서 퍼블릭IP:8080/happynewyear.html 페이지에 접속하면 아래 페이지가,

퍼블릭IP:8080/puppy.html 페이지에 접속하면 아래 페이지가 뜨는 것을 확인하실 수 있는데요.

HTML 소스는 빼고 node.js 의 스크립트 코드는 단 4줄입니다.
엄청 편해지지 않았나요?:)

const express=require('express');
const app=express();
app.use(express.static('public'));
app.listen(8080, function() {});

방문해주시는 모든 분들께 늘 감사드립니다.

도움이 되셨다면 공감 한방, 댓글은 굿잡!
감사합니다~


다음 이야기 : https://itadventure.tistory.com/513

 

Node.js - Part 11-5. 스크립트의 이해

자, 이제 4줄짜리 express 기본 소스가 어떤 구조인지 살펴 보도록 하겠습니다. Node.js 스크립트는 항상 첫 줄부터 순차진행됩니다. 첫째 줄 스크립트는 아래와 같은데요. const express=require('express');.

itadventure.tistory.com