Node.js Express 실행 확인 index.html 포함

김오성 2024. 7. 30. 09:55

2024. 7. 30. 09:55

Node.js 설치

먼저, Node.js를 설치해야 합니다.

Node.js 다운로드:
- Node.js 공식 웹사이트로 이동합니다.
- LTS (Long Term Support) 버전을 다운로드합니다. 이는 안정적이고 장기적으로 지원되는 버전입니다.
Node.js 설치:
- 다운로드한 설치 파일을 실행합니다.
- 설치 마법사의 지시에 따라 Node.js를 설치합니다. 기본 설정을 사용하면 됩니다.

Node.js 설치 확인

설치가 완료되면, Node.js와 npm(Node Package Manager)이 제대로 설치되었는지 확인합니다.

명령 프롬프트 열기:
- Windows + R 키를 누르고 cmd를 입력하여 명령 프롬프트를 엽니다.
Node.js와 npm 버전 확인:
- 다음 명령어를 입력하여 Node.js와 npm이 설치되었는지 확인합니다.

node -v
npm -v

Visual Studio Code 설치

VSCode 다운로드:
- VSCode 공식 웹사이트로 이동합니다.
- Windows용 설치 프로그램을 다운로드합니다.
VSCode 설치:
- 다운로드한 설치 파일을 실행합니다.
- 설치 마법사의 지시에 따라 VSCode를 설치합니다. 기본 설정을 사용하면 됩니다.

VSCode에서 Node.js 프로젝트 열기

VSCode 열기:
- 설치가 완료되면 VSCode를 실행합니다.
프로젝트 폴더 열기:
- 파일 메뉴에서 폴더 열기를 선택합니다.
- Node.js 프로젝트가 있는 폴더를 선택하고 열기 버튼을 클릭합니다.

터미널에서 Node.js 실행

VSCode 내의 통합 터미널을 사용하여 Node.js 애플리케이션을 실행할 수 있습니다.

통합 터미널 열기:
- 보기 메뉴에서 터미널을 선택하거나 Ctrl + ` (백틱) 키를 눌러 통합 터미널을 엽니다.
프로젝트 폴더로 이동:
- 터미널에서 프로젝트 폴더로 이동합니다.

프로젝트 디렉토리 설정:

mkdir my-express-app
cd my-express-app
npm init -y
npm install express

서버 코드 작성:

index.js 파일을 생성하고, 아래의 코드를 추가합니다

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

const app = express();
const port = 3000;

// 정적 파일 제공을 위한 미들웨어 설정
app.use(express.static(path.join(__dirname, 'public')));

// 루트 경로에 대한 핸들러
app.get('/', (req, res) => {
    res.sendFile(path.join(__dirname, 'public', 'index.html'));
});

app.listen(port, () => {
    console.log(`서버가 http://localhost:${port}에서 실행 중입니다.`);
});

웹 페이지 작성:

public 디렉토리를 생성하고, 그 안에 index.html 파일을 작성합니다:

mkdir public

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>Simple Express App</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            padding: 50px;
        }
        h1 {
            color: #333;
        }
    </style>
</head>
<body>
    <h1>Welcome to My Simple Express App!</h1>
    <p>This is a simple web page served by an Express server.</p>
</body>
</html>

서버 실행:

터미널에서 아래 명령어를 실행하여 서버를 시작합니다:

node index.js

웹 브라우저에서 확인:

웹 브라우저를 열고 http://localhost:3000으로 접속하면 작성한 웹 페이지가 표시됩니다.

'Dev > Node.js' 카테고리의 다른 글

Amazon linux2에 node18 설치 Requires: libc.so.6(GLIBC_2.28)(64bit) (0)	2024.08.16
node.js express docker실행 (0)	2024.08.02

지식은 날리지