Netlify로 정적 웹 클라이언트를 배포해보자!

 

봄맞이(?) 개인 프로젝트를 진행하고 있다. 여태껏 야심 차게 준비했던 토이 프로젝트는 번번이 실패해서, 이번에는 마음을 단단히 먹고 시작했다. 성공을 위해서 기능을 최소의 최소까지 줄이고, 불필요한 서버 부분도 떼 버렸다. 데이터는 브라우저도 아닌 싱글턴으로 저장하게 만들었는데, 덕분에 새로고침 하면 클-린한 상태가 된다. 다시 말해 굉장히 정적인 페이지가 된 것이다.

 

한 2주정도 주말과 평일 저녁 틈틈이 작업을 한 프로젝트가 막바지에 들어가면서, 처음으로 배포해보고 싶다는 생각이 들었다. 관리할 데이터베이스/서버도 없어서 상당히 쉽지 않을까 하고 이것저것 찾아보던 중에 Netlify라는 서비스를 알게 되었다. 기본적으로 배포는 물론이고 Github에 연동하여 Push 될 때마다 자동으로 빌드, 배포 해주는 서비스였다. 도메인을 구입하려면 돈을 내야 하지만, 토이 프로젝트에는 그런 거 필요 없으므로 기본 기능으로도 충분했다.(참고로, 코드 샌드박스(http://codesandbox.io)에서도 베타 버전으로 Netlify의 배포 서비스를 사용할 수 있다.)

 

우선 내 프로젝트를 연결하여 배포 테스트를 해본 결과, 페이지의 최초 1회 로딩 시간이 긴 것을 제외하고는 안정적인 모습을 보여줬다. 기능이 매우 심플하고 퍼포먼스가 좋아서 개인적인 '올해의 만족스러운 서비스' 1위에 랭크시키고 싶었다. 더 나아가서 나와 비슷하게 토이 프로젝트를 진행하는 사람들에게도 알리고 싶은 생각이 들어 포스팅을 작성하기로 했다.

 

순서는 다음과 같다.

 

1. Github에 레포지터리 생성 후 기본 프로젝트 업로드

3. Netlify와 연동 하여 배포

 

 

기본 프로젝트 생성

 

Netlify와 Github을 연동해야 하므로, Github에서 기본 프로젝트를 만들어 준다. 나는 새로운 프로젝트의 테스트를 위해서 deploy-test라는 레포지터리를 생성했다.

 

 

 

Codesandbox 로그인 후, 바닐라 자바스크립트 프로젝트를 만들어준다.

테스트용 프로젝트를 생성하므로 코드 샌드박스(http://codesandbox.io)에서 parcel을 사용한 바닐라 자바스크립트 프로젝트를 하나 만들어줬다. 생성된 프로젝트를 Github과 연동할 수 있으나, 로컬에서 작업하는 것이 더 편해서 zip 파일로 다운, 압축 해제 후 만들어둔 Github 레포지터리에 업로드했다.

 

 

 

{
  "name": "parcel-sandbox",
  "version": "1.0.0",
  "description": "Simple Parcel Sandbox",
  "main": "index.html",
  "scripts": {
    "start": "parcel index.html --open",
    "build": "parcel build index.html"
  },
  "dependencies": {},
  "devDependencies": {
    "@babel/core": "7.2.0",
    "parcel-bundler": "^1.6.1"
  }
}

 

만들어진 프로젝트의 Package.json 파일이다. start와 build, 2가지 스크립트 명령어가 기본적으로 제공된다. 모듈도 번들링을 위한 babel, parcel 2개만 있다. 참 심플하다. npm install으로 모듈을 설치한 후, npm run start 명령어로 프로젝트를 시작해보자.

 

 

 

기본적인 프로젝트 실행 화면이다. 정상적으로 동작되는 것을 확인했으면 Netlify로 넘어가자.

 

 

 

Netlify 설정 & 배포

 

Netlify(https://www.netlify.com/)에 접속하자.

 

 

 

처음 서비스를 사용하는 경우 회원가입에서 위의 화면으로 자동 접속될 것이고, 이미 생성한 프로젝트가 있다면 로그인 후 Create a new Site 버튼을 누르면 위의 화면으로 이동한다. 방금 Github에서 기본 프로젝트를 만들었으므로 Github 버튼을 클릭한다. 그리고 나오는 새창에서 Github의 권한 확인 창에서 확인을 눌러 Netlify의 권한을 승인해준다.

 

 

 

다음으로 레포지터리 액세스 권한을 설정해준다. 모든 레포지터리에 대해 권한을 부여할 필요가 없으므로, 배포가 필요한 프로젝트만 선택해준다. 방금 만들어둔 deploy-test를 추가해줬다.

 

 

 

프로젝트가 Github에 올라가 있다면 자동으로 Owner와 Branch to deploy 값을 채워진다. 우리가 설정해야 될 것은 Basic build setting인데, 정적 파일을 생성하기 위한 빌드 스크립트와, 정적 파일이 생성되는 디렉터리의 이름을 지정해주면 된다. 앞서 package.json을 살펴봤을 때 빌드를 위한 스크립트는 npm run build 였고, 그 결과는 dist 폴더에 저장된다. 따라서 이와 같이 입력을 해준다.

 

show advanced에서는 빌드를 위한 환경 변수 설정을 할 수 있다. 빌드 시 환경 변수가 필요한 프로젝트의 경우 여기서 설정을 해주도록 한다. 

 

마지막으로 Deploy site 버튼을 클릭하면 배포가 시작된다.

 

 

 

배포가 성공되면 Your Site is deployed에 체크가 된다. 이후에 도메인을 커스텀으로 설정하고 https를 설정할 수도 있으나, 필요 없으니 건너뛴다. 상단의 카드뷰 안의 링크는 내 정적 페이지가 배포된 주소이다. 클릭해서 잘 배포됐는지 확인해보도록 하자

 

 

 

Push 후 배포 테스트

 

document.getElementById("app").innerHTML = `
<h1>Hello Vanilla!</h1>
<div>
  Wow! Netlify는 정말 대단한 서비스군요!!
</div>
`;

 

앞서 말한 Netlify의 강력한 기능 중 하나는 Github과 연동하여, Push 될 때마다 자동으로 배포가 진행된다는 것이다. 이를 테스트해보기 위 해 위와 같이 출력되는 테스트를 약간 바꿔보았다. 변경된 내용을 commit 후 바로 push!

 

 

 

배포된 것을 자동으로 감지해서 빌드하고 있는 모습이다. 이 기능을 특정 Branch에서만 동작하도록 제한할 수 있으며, 아예 자동 배포 기능을 꺼버리고 수동으로 전환할 수 도 있다.

 

 

 

변경된 텍스트가 잘 적용되었다! Netlify를 사용하면 정적인 페이지를 쉽게 배포하고 사람들에게도 공유할 수 있으니 프로젝트할 맛이 나지 않을까. 여러모로 심플하고 대단한 서비스다.