Bundler[Webpack] - Netlify 배포

01.개요

• 현재까지 Webpack을 통해 만든 프로젝트를 GitHub에 저장하여 Netlify로 배포까지 완성해보도록 하겠습니다.

02.GitHub 업로드

2-1..gitignore 파일 생성

.cache
.DS_Store // macOS
node_modules
dist

• .gitignore 파일에 제외할 폴더를 명시하고 버전 관리를 시작합니다.

2-2.버전 관리

$ git init
$ git status
$ git add .
$ git commit -m 'Create project'
$ git log

• webpack-template-basic 이름으로 Github repository에 생성 해줍니다.
• Github 사이트 바로가기

$ git remote add origin https://github.com/orosy/webpack-template-basic.git
$ git push origin master

03.Netlify 배포

• Netlify를 통해 원격저장소에 업로드한 프로젝트를 배포하는 과정 입니다.
• Netlify 사이트 바로가기

3-1.import an existing project

• Netlify에 로그인해서 Add new site 다음 import an existing project 버튼을 클릭 합니다.

3-2.Continuous Deployment

• GitHub 저장소를 클릭하여 지속적인 배포를 진행 합니다.

3-3.webpack-template-basic

• 업로드한 저장소의 이름 webpack-template-basic을 검색하고 선택해줍니다.

3-4.Basic build settings

• Netlify에게 저장소에 있는 프로젝트를 제품화시키는 명령어인 Build command와 이를 통해 제품화된 결과가 Publish directory라는 옵션에 지정하는 폴더에 있음을 알려주는 것입니다.
• 다른 이름의 폴더에 프로젝트가 들어있다면 폴더명을 변경해줘야 합니다.
• Deploy site를 클릭하여 사이트 배포를 완료 합니다.

3-5.배포 완료

• 시간이 지나면 Netlify가 제품화를 시키고 배포를 완성합니다.
• https로 시작하는 주소를 클릭하면 배포한 사이트에 접속할 수 있습니다.
• 실제 배포한 사이트 바로가기