Node.js+Express服务器中HTML与CSS链接失效问题求助

주요 문제점 #

1. Express 미들웨어가 작동하지 않음: 원래 코드에서 http.createServer로 직접 모든 요청을 처리하고 있어, 설정한 express.static 미들웨어가 전혀 사용되지 않습니다. 브라우저가 main.css를 요청해도 서버가 main.html 파일만 반환하기 때문에 CSS가 로드되지 않는 문제가 발생합니다.
2. 타이포 오류: app.set('veiw engine', 'ejs')에서 'view'가 'veiw'로 오타가 났습니다.

수정된 server.js 코드 #

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

// 뷰 엔진 설정 (오타 수정)
app.set('view engine', 'ejs');
app.set('views', __dirname + '/public'); // HTML 파일이 위치한 public 폴더를 뷰 디렉토리로 지정
app.engine('html', require('ejs').renderFile);

// 정적 파일 서비스 설정 (public 폴더 내의 파일을 접근 가능하게 함)
app.use(express.static(__dirname + '/public'));

// 메인 페이지 라우트
app.get('/', (req, res) => {
    console.log('접속한 클라이언트 아이피는 ' + req.connection.remoteAddress);
    res.render('main.html'); // public 폴더 내의 main.html 렌더링
});

// 서버 시작
app.listen(port, () => {
    console.log('서버가 실행되었습니다!');
});

추가 확인 사항 #

• 파일 구조가 다음과 같은지 확인하세요:

  프로젝트 폴더/
  ├─ server.js
  └─ public/
     ├─ main.html
     ├─ main.css
     ├─ 지도지도2.0/
     │  └─ 지도지도.html
     ├─ 분야탐색/
     │  └─ 분야탐색.html
     └─ ... (기타 파일들)
  

• main.html 내의 CSS 링크(href="main.css")는 정적 파일 설정으로 인해 정상적으로 작동합니다. 브라우저가 /main.css를 요청하면 Express가 public/main.css를 반환해줍니다.

이렇게 수정하면 Express가 정적 파일을 올바르게 서비스하고, 메인 페이지 요청도 정상적으로 처리되어 CSS가 정상적으로 로드됩니다.

内容的提问来源于stack exchange，提问作者서승우