express 새로고침 시 404 Not Found 해결

안녕하세요.

 

우선 새해 복 많이 많이 받으세요 ^0^

 

글을 하도 안 쓰니 방문자 수가 확 줄었더군요

 

최근 공연도하고, 설날이라 가족이랑 등산도 가고, PS5를 구매해서 이것 저것 게임을 하고 있습니다 !

 

가족 모두 건강하고, 돈 많이 벌게해주세요. 여자친구는 언제 ?

넘나 논거 같아서 ;;;;

 

찔림

---

 

그래서 최근 바닐라 JS로 원하는 페이지를 구성하고 있습니다.

 

너무 프레임워크에 의지하기 보다는, 기본부터 탄탄히 하려구요.

 

물론 서버는 express JS를 빌렸지만 ;;

 

우얐든, router를 연결하고 만들고 페이지 이동하게 만들었는데, 페이지를 이동하고 새로고침을 하니.... 404 Not Found가 뜨더군요.

 

흐음

 

그래서 원인을 찾아보니, React / Vue 등 JS 기반의 프레임워크 SPA(Single Page Application)를 사용하면 발생하는 문제라고 하는데, connect-history-api-fallback 현상이라고 합니다.

 

SPA가 하나의 index.html만 사용하는데, 다른 위치 (위와 같은 '/rock-page-scissors') 새로고침을 하면 index.html을 못찾아서 발생하는겁니다.

 

그렇기에 웹 서버는 404 메시지를 반환합니다.

 

요거를 해결하기 위해서 express 내에서 해결을 할 수 있습니다.

 

const path = require("path");

app.use(express.static(__dirname));
app.get("*", function (req, res) {
	res.sendFile(path.resolve(__dirname, "index.html"));
});

 

__dirname의 경우엔 node에서 제공하는 node 파일의 경로를 담고 있는 변수로 정적 파일을 제공하는 곳이라고 하네요.

 

음... 이유는 모르겠는데, 어떤 루트로 들어오든 index.html를 가리키도록 만든거 같네요.

 

어... 음...

 

어쩔 설날

 

 

---

이상 express 새로고침 시 404 Not Found 해결였습니다. ^_^