aws서버 띄워서 봤더니 내가 만든 화면에서 css를 불러오지 못하는걸 보고 약간 충격스..
급하게 해결해보려고 했는데 가장 큰 원인은 index.html을 건드렸었던 것이다.
두 번째는 절대경로로 만들어놨었는데 백엔드에서 상대경로로 잡아야 한다고 해서 이 문제 해결하면서 상대경로로 바꿨다. 절대경로, 상대경로도 백엔드와 소통해야 하는구나 알게되었다...
위코드 6기를 하던 중에 한 번 해본 적 있었지만 잘 기억이 안나서 해볼 생각 하지 못했던 방법..
예리님 도움으로 해결할 수 있었는데 이 상황이 충격적이었어서 이 방법이 잊히지 않을 듯 하다...ㅎ(과연..)
우선,
build한 화면을 프론트 화면에서 보려면
npm install express
최상단에 server.js생성
server.js 코드는
const http = require("http");
const express = require("express");
const path = require("path");
const app = express();
const port = 8080;
app.get("/ping", (req, res) => {
res.send("pong");
});
app.use(express.static(path.join(__dirname, "build")));
app.get("/*", (req, res) => {
res.set({
"Cache-Control": "no-cache, no-store, must-revalidate",
Pragma: "no-cache",
Date: Date.now()
});
res.sendFile(path.join(__dirname, "build", "index.html"));
});
http.createServer(app).listen(port, () => {
console.log(`app listening at ${port}`);
});npm run build
terminal에서 node server.js실행
localhost:8080들어가보면 지금 build되어있는 화면 (내 로컬과는 화면이 다르다.)이랑 똑같이 나온다.
내 로컬에서는 너무 잘 나오는데 aws띄운 화면이 제대로 나오지 않는다면 이 방법을 써서 고치는 개발을 하고 다시 띄우도록 하자.
장점:
원래는 내 branch에서 development로 push 해서 merge하거나 development로 push 하거나 하면서 build된 도메인으로 체크(머지 되고 5분정도 소요)해야 하는데 이렇게 server.js를 쓰면 merge하지 않고 바로바로 확인할 수 있어서 고칠 거 고치고 push, merge한 뒤 build한 도메인에서 멀쩡히 나오는 것을 볼 수 있다.
그러고 설치했던 express와 server.js파일은 삭제해야 한다. build하는 곳에 올리면 안된다.
오늘의 교훈: react에서 index.html은 최대한 건들이지 말자
