React build blank 페이지 뜰 때 해결법

 

React 앱을 빌드 후 정적 웹사이트 배포를 할 때 AWS S3를 사용하게 됩니다.

먼저 로컬에서 잘 돌아가는지 확인하기 위해 build 후 로컬 웹 브라우저에서 리액트를 돌리면 생각지 못한 문제에 봉착하게 됩니다. 바로 화면이 안나오는 것이죠.

 

 

정적 웹 사이트 배포

 

리액트 프레임워크로 제작된 웹 사이트를 배포하기 위해서는 localhost:3000 으로 배포하지 않습니다.

웹팩을 장착한 create-react-app을 사용해 js, css, image들을 번들링한 컴팩트 버전으로 빌드 후 배포하게 됩니다.

AWS S3를 사용해도 되고, Nginx와 같은 웹서버 프로그램을 통해 정적 웹 페이지를 바로 리턴해줘도 됩니다.

 

 

우선 create-react-app으로 새로운 애플리케이션을 시작합니다.

package.json 파일을 보시면 이미 scripts들이 다 작성되어 있습니다. 여기서 우리는 build 명령어를 사용합니다.

$ npm run build

 

디렉토리를 확인해보면 build라는 폴더가 새로 생깁니다. build는 index.html을 포함해 static 폴더 내에 있는 css 파일과 js 파일들을 함께 배포할 수 있게 됩니다.

build/index.html 파일을 liveserver로 돌리면 웹 브라우저에서 빈 공백이 보입니다. 

분명 index.html 리소스를 받아오는데 웹 브라우저에서는 왜 렌더링을 못하는 걸까요?

 

 

build index.html 공백 해결

 

npm run build 명령을 치고 이 후 나오는 설명을 읽어보면 답을 찾을 수 있습니다. react는 package.json 파일에 homepage를 지정해주지 않으면 자동으로 /.을 메인 페이지로 인식하게 됩니다.

 

 

 

package.json 파일을 아래와 같이 수정해줍니다.

맨 마지막 줄에 homepage를 "."로 지정해줍니다.

{
  "name": "client",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    
  },
  "homepage": "."
}

 

수정이 완료되면 기존의 buld 폴더를 날리고 다시 빌드합니다.

build/index.html 파일을 liveserver로 돌리면 정상적으로 웹 페이지가 로딩 됩니다.

 

 

 

 

 

2023년 블록체인에 집중해야 하는 이유

 

맥북 에어 코딩 괜찮을까?

 

ios 앱 개발 공부 순서