※해당 게시글은 취약점 진단 목적의 웹 서비스 구축을 위한 부분으로, 일반적인 웹 서비스 개발 목적과는 다름을 참고해주시면 감사하겠습니다.
1.구축 환경
| 구분 | 설명 | 비고 |
| 운영체제 | Ubuntu 22.04 x64 (6.2.0-36-generic) | |
| 하드웨어 | VM | |
| 서버 운영환경 | Node v12.22.9 / npm 8.5.1 / express 4.18.2 mongoose 8.0.3 ejs 3.1.9 |
mongoose 추가 ejs 추가 |
| 데이터베이스 | MongoDB Community Edition 7.0.4 |
2.구축 과정
1) 환경 추가
- MongoDB 연결을 위한 ODM(Object Data Modeling) 라이브러리를 설치하고, package.json에 추가한다.
#로그인 시 세션 관리 목적으로 모듈 추가
npm install express-session
#수정된 사항을 실시간 반영하기 위해 nodemon 설치
npm install -g nodemon
#mongoDB와 node 연결을 위한 ODM(Object Data Modeling) 라이브러리 설치
npm install mongoose
#설치된 mongoose 버전 확인
npm list mongoose
2) 로그인 페이지 구현
(1) 로그인 기능 초안 작성
// app.js
const express = require('express');
const session = require('express-session');
const bodyParser = require('body-parser');
const PORT = 8443;
const app = express();
// 세션 설정
app.use(session({
secret: 'mySecretKey', // 세션 암호화에 사용되는 비밀 키
resave: false,
saveUninitialized: true
}));
// 미들웨어 설정
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());
// 라우트 및 컨트롤러
app.get('/', (req, res) => {
res.send('Welcome to the home page!');
});
// 로그인 페이지
app.get('/login', (req, res) => {
res.sendFile(__dirname + '/views/login.html');
});
// 로그인 처리
app.post('/login', (req, res) => {
const { username, password } = req.body;
// 간단한 로그인 로직 (실제로는 DB에서 유저 정보를 확인해야 함)
if (username === 'admin' && password === 'password') {
req.session.user = username; // 세션에 유저 정보 저장
res.redirect('/dashboard');
} else {
res.send('Invalid username or password');
}
});
// 대시보드 페이지 (로그인 필요)
app.get('/dashboard', (req, res) => {
if (req.session.user) {
res.send(`Welcome to the dashboard, ${req.session.user}!`);
} else {
res.redirect('/login');
}
});
// 서버 시작
app.listen(PORT, () => {
console.log(`Server is running on http://localhost:${PORT}`);
});
(2) 로그인 페이지 html 초안 작성
<!-- views/login.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Login</title>
</head>
<body>
<h2>Login</h2>
<form action="/login" method="post">
<div>
<label for="username">Username:</label>
<input type="text" id="username" name="username">
</div>
<div>
<label for="password">Password:</label>
<input type="password" id="password" name="password">
</div>
<div>
<button type="submit">Login</button>
</div>
</form>
</body>
</html>
3) MongoDB 설치 및 구성
※참조 : https://www.mongodb.com/docs/manual/tutorial/install-mongodb-on-ubuntu/ (공식사이트)
#Import the public key used by the package management system
curl -fsSL https://pgp.mongodb.com/server-7.0.asc | \
sudo gpg -o /usr/share/keyrings/mongodb-server-7.0.gpg \
--dearmor
#Create a list file for MongoDB
echo "deb [ arch=amd64,arm64 signed-by=/usr/share/keyrings/mongodb-server-7.0.gpg ] https://repo.mongodb.org/apt/ubuntu jammy/mongodb-org/7.0 multiverse" | sudo tee /etc/apt/sources.list.d/mongodb-org-7.0.list
#Reload local package databasesudo apt-get update
sudo apt-get update
#Install the MongoDB packages
sudo apt-get install -y mongodb-org
#version hold
echo "mongodb-org hold" | sudo dpkg --set-selections
echo "mongodb-org-database hold" | sudo dpkg --set-selections
echo "mongodb-org-server hold" | sudo dpkg --set-selections
echo "mongodb-mongosh hold" | sudo dpkg --set-selections
echo "mongodb-org-mongos hold" | sudo dpkg --set-selections
echo "mongodb-org-tools hold" | sudo dpkg --set-selections
4)로그인 기능 확인 후 ejs 템플릿 기반으로 include를 이용한 형태로 재구성
- 상단 / 중단 / 하단으로 구성하였으며, 중단 템플릿 파일에서 상단/하단 템플릿 include
(1) 중단
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Your Web App</title>
<!-- 여기에 필요한 메타태그, 스타일시트, 스크립트 등 추가 -->
</head>
<body>
<div id="top">
<%- include('top.ejs') %>
</div>
<div id="middle">
<!-- 중간 내용은 각 라우트에서 렌더링할 내용이 들어갑니다. -->
<%= body %>
</div>
<div id="bottom">
<%- include('bottom.ejs') %>
</div>
</body>
</html>(2) 상단
<nav>
<a href="/">Home</a>
<a href="/menu1">메뉴 1</a>
<a href="/board1">게시판 1</a>
<a href="/board2">게시판 2</a>
<a href="/userinfo">회원정보</a>
<a href="/logout">로그아웃</a>
</nav>(3) 하단
<!-- 개인정보처리방침 등의 링크 -->
<a href="https://google.com"> 개인정보처리방침 작성 대기 </a>(4) 구성 이미지
5) 구성 결과
3.예외 처리
1)Node.js 버전 이슈
#curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash
#
curl -sL https://deb.nodesource.com/setup_20.x | sudo -E bash -
2) ejs 선언 및 템플릿 경로 설정
app.set('view engine', 'ejs'); // EJS를 사용하도록 설정
app.set('views', __dirname + '/views'); // views 디렉토리 경로 설정'개발' 카테고리의 다른 글
| [WEB] Node.js 웹 사이트 구축 4 (게시판 구현) (0) | 2024.01.22 |
|---|---|
| [WEB] Node.js 웹 사이트 구축 3 (HTTPS 적용) (0) | 2024.01.19 |
| [WEB] Node.js 웹 사이트 구축 1 (환경 구성) (0) | 2024.01.05 |
| [Python] m3u8 스트리밍 영상 다운로드 (Feat.불법 다운로드 대응) (0) | 2023.06.08 |
| [Python][자동화] ICMP Type 및 Code 별 전송 (0) | 2023.02.10 |
