HomeAboutMeBlogGuest
© 2025 Sejin Cha. All rights reserved.
Built with Next.js, deployed on Vercel
🙂
달리팀 노션/
👨🏻‍💻
달리 2팀 (deprecated 문제 없으면 삭제 예정)/
Today We Learned
Today We Learned/
Netlify에 SPA 앱 배포하기 (with webpack)
Netlify에 SPA 앱 배포하기 (with webpack)
Netlify에 SPA 앱 배포하기 (with webpack)

Netlify에 SPA 앱 배포하기 (with webpack)

생성일
Nov 2, 2021 11:21 AM
기록자
해결 여부
해결 여부
속성
Netlify
카테고리
배포
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:

02 빌드할 때 _redirects 파일이 배포 폴더에 복사되도록 설정한다

배포 폴더(dist)에서 _redirects 가 있어야 Netlify가 인식할 수 있다. 따라서 빌드할 때 static 폴더 파일을 배포 폴더에 복사하도록 웹팩 설정을 추가한다.
webpack.config.js:

03 Netlify에 배포한다

배포 명령어를 실행해서 dist 폴더에 _redirects 파일이 복사되는지 확인하고 netlify에 배포한다 (환경변수가 필요한 경우 netlify에서 설정해야 한다)

See also

  • github - running mogakco
* /index.html 200
const CopyPlugin = require('copy-webpack-plugin');

module.exports = {
  // ...
  output: {
    path: path.resolve(__dirname, 'dist'),
  },
  plugins: [
    // ...
    new CopyPlugin({
      patterns: [{ from: 'static' }],
    }),
    // ...
  ]
}