ram2 🚗

react로 만든 프론트를 배포하기 위해 netlify를 가입하고, 깃허브로 프로젝트를 연동하였다.

하지만, 자꾸 알 수 없는 에러들이 뜨는 것이었다.

나는 react를 잘 알지 못하기 때문에, 뭘 해야하는지 알지 못했다.

그래서 내가 겪었던 시행착오들을 정리해보려 한다.

🐻  build 폴더 생성하기

npm run build

해당 코드를 실행하면 자동으로 build 파일이 생성된다.

🐻  Failed during stage "Reading and parsing configuration files": When resolving config: Base directory does not exist: /opt/build/repo/velog_front 에러 해결하기

해당 에러는 나의 실수로 발생한 에러였다.

깃허브 레파지토리를 연동해서 배포하였는데, 그렇게 하면 깃허브에 있는 폴더명을 적어줘야 하는데, 나는 내가 원하는 이름을 적고야 말았다....

이렇게 내 레파지토리에는 client와 server가 있는데, 나는 Client만 배포하고 싶으므로 설정할 때 해당 이름을 적어줘야 한다.

이렇게 Base directory에 깃에 있는 폴더명을 적어줘야 한다는 것 !!

🐻  Manifest: Line: 1, column: 1, Syntax error. 에러 해결하기

netlify로 deploy를 계속 시도했으나, deploy는 성공해도 빈 화면이 자꾸 떴다.

fn + F12를 눌러 개발자 도구의 콘솔창을 확인하니 다음과 같은 두 개의 에러가 떴다.

Manifest: Line: 1, column: 1, Syntax error.

이를 해결하기 위해서는, build 폴더의 index.html 코드를 수정해주면 된다.

# 기존 코드
<link rel="manifest" href="/velog/manifest.json" />

# 수정 코드
<link rel="/manifest" href="/velog/manifest.json" /> #manifest 앞에 / 붙이기

# 기존 코드
<link rel="icon" href="/velog/favicon.ico" />

# 수정 코드
<link rel="icon" href="./velog/favicon.ico" /> # 앞에 . 붙이기

# 수정 전
<link href="/velog/static/css/main.cfa5924d.css" rel="stylesheet" />

# 수정 후
<link href="./velog/static/css/main.cfa5924d.css" rel="stylesheet" /> # 앞에 . 붙이기

🐻  Failed to load resource: net::ERR_HTTP2_PROTOCOL_ERROR 에러 해결하기

/%PUBLIC URL%/favicon.ico:1

이 에러를 해결하기 위해서는 app.js에서 router에 basename을 지정해주면 된다.

function App() {
  return (
    <ThemeProvider theme={theme}>
      <GlobalStyle />
      <Router basename={process.env.PUBLIC_URL}/> // basename 추가
    </ThemeProvider>
  );
}

이렇게 basename을 추가해주면 해결 된다 !