Netlify에 SPA 앱 배포하기 (with webpack)01 _redirects 파일을 만든다02 빌드할 때 _redirects 파일이 배포 폴더에 복사되도록 설정한다03 Netlify에 배포한다See also
Netlify에 SPA 앱 배포하기 (with webpack)
Netlify에서 SPA를 배포하려면 새로고침 했을 때
index.html로 리다이렉트(history API fallback) 되는 기능이 필요하다. Netlify에서는 _redirects 파일을 작성하면 해당 기능이 제공된다. 다음과 같은 과정을 거친다:01 _redirects 파일을 만든다
현 프로젝트에서는 최상위에
static 폴더를 만들고 그 안에 _redirects 파일을 생성한다:_redirects:* /index.html 200
02 빌드할 때 _redirects 파일이 배포 폴더에 복사되도록 설정한다
배포 폴더(
dist)에서 _redirects 가 있어야 Netlify가 인식할 수 있다. 따라서 빌드할 때 static 폴더 파일을 배포 폴더에 복사하도록 웹팩 설정을 추가한다.webpack.config.js: const CopyPlugin = require('copy-webpack-plugin'); module.exports = { // ... output: { path: path.resolve(__dirname, 'dist'), }, plugins: [ // ... new CopyPlugin({ patterns: [{ from: 'static' }], }), // ... ] }
03 Netlify에 배포한다
배포 명령어를 실행해서
dist 폴더에 _redirects 파일이 복사되는지 확인하고 netlify에 배포한다 (환경변수가 필요한 경우 netlify에서 설정해야 한다)