webpack devserver 에러

Vue.js - Django 연동 웹 프로그래밍 (실전편)

작성

151

수정됨

현재 sec4에 webpack devserver 부분을 수강 중입니다.

강의에서는 devServer에 index 만 넣어도 잘 되는데 제가 했을 때는 잘 안 되었고, 다음과 같은 에러가 떴습니다.

ERROR ValidationError: Invalid options object. Dev Server has been initialized using an options object that does not match the API schema.
- options has an unknown property 'index'. These properties are valid:
object { allowedHosts?, bonjour?, client?, compress?, devMiddleware?, headers?, historyApiFallback?, host?, hot?, http2?, https?, ipc?, liveReload?, magicHtml?, onAfterSetupMiddleware?, onBeforeSetupMiddleware?, onListening?, open?, port?, proxy?, server?, setupExitSignals?, setupMiddlewares?, static?, watchFiles?, webSocketServer? }

chatGPT에 물어보니 다음과 같이 해야 한다고 답변을 받았습니다.

  devServer: {
    static: {
      directory: path.join(__dirname, 'dist'),
      watch: true,
    },
    historyApiFallback: {
      rewrites: [
        { from: /^\/home$/, to: '/home.html' },
        { from: /^\/dashboard$/, to: '/dashboard.html' },
        { from: /./, to: '/index.html' }  // 모든 기타 요청을 index.html로 리디렉션
      ]
    }
  },

그런데 이렇게 해도 Cannot GET / 에러만 뜨고 화면이 나오지 않는데 어떤 부분이 문제인지 모르겠습니다.

현재 저는 강의를 들으면서 블로그를 만드는 것을 그대로 따라하지 않고 제가 만들고 싶은 것을 제작하는 중입니다.

vue.js django vuetify

답변 2

김석훈

지식공유자

안녕하세요. 독자님.

예전 답변이 있으니 참고하세요.

https://www.inflearn.com/questions/470222

감사합니다.

인프런 AI 인턴

안녕하세요, 인프런 AI 인턴입니다.

별이좋은소년님의 질문에 관하여, webpack-dev-server 설정에서 발생하는 Cannot GET / 오류에 대한 부분을 이해하시는데 도움이 될 만한 내용을 찾았습니다.

질문하신 내용과 관련하여, [devServer 설정 에러가 납니다.](https://www.inflearn.com/questions/470222) 에 대한 답변에서 다음과 같이 설정 변경을 제안하고 있습니다:

  devServer: {
    static: {
      directory: path.join(__dirname, 'dist'),
      staticOptions: {
        index: 'home.html',
      },
    },
  },

이 사례에서는 index 옵션을 사용하여 특정 페이지를 지정하는 방법이 아니라, static 내에 directory를 지정하고 staticOptions로 추가 옵션을 설정하는 방식에 대해 설명하고 있습니다. 별이좋은소년님께서 질문하신 내용과 위의 사례는 직접적으로 동일한 문제를 다루고 있지는 않지만, webpack-dev-server의 설정 방법에 대한 이해를 돕는 데에는 유사한 점이 있습니다.

Cannot GET / 오류는 서버에서 해당 경로에 대한 처리 방법을 찾지 못했을 때 발생하는데, devServer 설정에 historyApiFallback을 사용함으로써 SPA(Single Page Application)를 구현할 때 클라이언트 사이드 라우팅을 처리하는 경우에 유용합니다. historyApiFallback 설정은 사용자의 라우팅 요청을 올바르게 index.html로 리디렉션하여 애플리케이션이 제대로 라우팅을 처리할 수 있게 돕습니다.

별이좋은소년님의 경우, static 설정이나 historyApiFallback 설정에서 누락되거나 잘못 지정된 부분이 없는지 확인하시는 것이 좋습니다. 또는, 파일 경로나 프로젝트 구조 설정의 문제일 수도 있으니 해당 부분도 점검해 보시기 바랍니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

인프런 커뮤니티 질문&답변

webpack devserver 에러