Github에서 deploy 하려면 따로 방법이 있나요?

떠먹는 Three.js

외부 모델 불러오기

작성

174

수정됨

안녕하세요. 수업 잘 듣고 있습니다.

다름이 아니라 수업 실습때는 내부에 node_modules에 파일이 있으니까 잘 작동 되는데

Github gh-pages이나 url로 deploy 한다고 하면 node_modules/three 폴더가 없으니 실행이 불가능하네요.

강제로 node_modules폴더를 포함하기에는 파일수가 너무 많구요ㅠ

혹시 따로 build 하는 방법이 있나요?

일부 몇몇 필요파일만 따로 올려서도 시도해봤는데, 로컬에서는 에러 안나도 업로드 후엔 GLTFLoader가 에러나네요.

(파일 및 로더 경로는 맞아도 404에러)

HTML/CSS javascript three.js

답변 2

제주코딩베이스캠프

지식공유자

안녕하세요 제주코딩베이스캠프입니다.

인프런 AI 답변처럼 node 환경으로 라이브러리를 설치하신 경우 webpack을 이용하여 배포를 진행하는 방법이 있습니다.

다만 이 과정에 어려움을 느끼신다면 node 환경이 아닌 cdn 환경으로 라이브러리를 연결해주시면 손쉽게 해결할 수 있습니다. importmap의 경로를 cdn으로 변경해주시면 됩니다.

 <script type="importmap">
      {
        "imports": {
          "three": "https://unpkg.com/three@0.152.2/build/three.module.js"
        }
      }
    </script>

감사합니다 ☺

인프런 AI 인턴

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

GitHub 페이지에 프로젝트를 배포할 때는 일반적으로 빌드 과정을 통해 핵심적인 파일만을 선택하여 배포하는 방법을 사용합니다. Node.js 프로젝트의 경우, Webpack이나 Parcel 같은 모듈 번들러를 사용해 node_modules에 있는 라이브러리와 소스 코드를 하나 또는 여러 개의 번들 파일로 합치는 과정을 거치게 됩니다. 이렇게 생성된 번들 파일들만을 배포 대상 디렉토리에 포함시켜 GitHub Pages 등으로 배포하게 됩니다.

Three.js 프로젝트의 경우에도 마찬가지로, 필요한 라이브러리와 자신의 코드를 하나의 파일로 묶어내는 빌드 과정이 필수입니다. 일반적으로 웹팩(Webpack) 설정 파일에 entry point(진입점), output(출력), loaders(로더) 등을 적절히 설정하여 필요한 자원들이 포함된 최종적인 자바스크립트 파일을 생성하게 됩니다.

특히, GLTFLoader 같은 추가적인 Three.js 로더들을 사용하고 있다면, 이 로더들이 최종 빌드 파일에 포함되도록 설정해야 합니다. 웹팩 설정에서 module 섹션에 로더를 처리하는 규칙을 추가하거나, 필요한 로더를 import 하도록 소스 코드를 작성해야 할 수 있습니다.

또한, 파일 경로 문제로 404 에러가 발생한다면, 빌드 과정에서 생성된 파일의 경로와 웹 서버상에서의 경로가 정확히 일치하는지 확인해야 합니다. 배포 후의 파일 경로가 개발 환경과 다를 수 있기 때문에, 상대 경로 사용이나 배포 환경에 맞는 경로 설정이 필요할 수 있습니다.

GitHub Pages로 배포하는 경우 gh-pages 라는 npm 패키지를 사용하는 방법도 있으며, 이를 통해 빌드 결과물을 쉽게 GitHub Pages 브랜치로 푸시할 수 있습니다. 해당 패키지는 빌드된 static 파일들을 GitHub Pages를 위한 브랜치에 자동으로 배포해 주는 도구입니다.

배포 과정에 특화된 더 자세한 설정이나 예제는 해당 모듈 번들러의 공식 문서나 Three.js와 관련된 커뮤니티 게시판, 블로그에서 찾아볼 수 있습니다.

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

Github에서 deploy 하려면 따로 방법이 있나요?