Project

Nodejs를 이용한 내 외부아이피 조회하는 웹사이트 만들기

멱군 2024. 5. 27. 21:38

내 외부아이피를 조회하는 웹사이트를 만들려면, 서버 측에서 클라이언트의 IP 주소를 가져와 웹 페이지에 표시하는 간단한 웹 애플리케이션을 만들어야 합니다. 이를 위해 Node.js와 Express를 사용하여 서버를 구축하고, 클라이언트의 IP 주소를 반환하는 REST API를 생성한 후, 이를 프론트엔드에서 호출하여 표시할 수 있습니다.

 

 

1. Node.js와 Express 서버 설정

먼저 Node.js와 Express를 설치하고 서버를 설정합니다.

 

1. Node.js 프로젝트 초기화 및 Express 설치

mkdir ip-checker
cd ip-checker
npm init -y
npm install express

 

2. Express 서버 생성 (server.js 파일)

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

// 정적 파일 제공
app.use(express.static(path.join(__dirname, 'public')));

app.get('/api/ip', (req, res) => {
    const ip = req.headers['x-forwarded-for'] || req.connection.remoteAddress;
    res.json({ ip });
});

const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
    console.log(`Server is running on port ${PORT}`);
});

 

2. 클라이언트 측 설정

이제 클라이언트 측 HTML 파일과 JavaScript 파일을 설정합니다.

 

1. HTML 파일 (public/index.html)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>IP Checker</title>
    <script defer src="script.js"></script>
</head>
<body>
    <h1>Find My IP</h1>
    <p id="ip-address">Fetching your IP address...</p>
</body>
</html>

 

2. JavaScript 파일 (public/script.js)

document.addEventListener('DOMContentLoaded', async () => {
    try {
        const response = await fetch('/api/ip');
        const data = await response.json();
        document.getElementById('ip-address').textContent = `Your IP Address: ${data.ip}`;
    } catch (error) {
        console.error('Error fetching the IP address:', error);
        document.getElementById('ip-address').textContent = 'Could not fetch IP address.';
    }
});

 

3. 서버 실행

이제 서버를 실행합니다.

node server.js

 

4. 내 외부 아이피 테스트 및 소스코드

브라우저에서 http://localhost:3000에 접속하여 IP 주소가 표시되는지 확인합니다.

내 외부 아이피 확인하기 ➔

 

위에서 사용한 소스코드를 파일로 첨부합니다.

내 아이피 조회하는 사이트 만들기.zip
0.00MB

 

마치며 설명하자면,

  • 서버 설정
    • Express를 사용하여 기본 서버를 설정하고, 클라이언트의 IP 주소를 반환하는 /api/ip 엔드포인트를 만듭니다.
  • 클라이언트 설정
    • HTML 파일과 JavaScript 파일을 설정하여 서버에서 IP 주소를 가져와 페이지에 표시합니다.
  • 정적 파일 제공
    • public 디렉터리를 정적 파일 제공 디렉터리로 설정하여 HTML, CSS, JavaScript 파일을 제공합니다.

 

이 예제를 확장하여 더 많은 기능을 추가하거나, 디자인을 개선하여 원하는 웹사이트를 만들 수 있습니다.

이 글을 통해서 외부에서 접속하는 IP주소를 확인하는 웹 사이트를 만들어보세요.

 

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