Front-End 개발자들을 위한 정적 파일 웹 퍼블리싱 - Surge.sh

 

 

surge.sh 링크

 

surge.sh는 AWS S3와 Github Pages와 같은 웹 퍼블리싱 서비스로, HTML, CSS, JS 등의 정적 파일을 무료로 퍼블리시하고 서브도메인과 SSL을 받을 수 있다. 무료로 커스텀 도메인을 받을 수도 있고, 트래픽에 제한을 두지 않는 것이 특징아다. 무료로 다양한 기능을 사용할 수 있고, 방법이 간단해서 인기가 많은 웹 퍼블리싱 서비스다. 백엔드 REST API Server를 따로 운영하면서 SPA에 필요한 정적 파일을 prod 용으로 제공하는 방식으로도 사용할 수 있다. surge.sh는 아직 아시아에 CDN 서버를 두지 않아서 한국에서 서비스하는 것에는 조금 어려움이 있을 것 같다.

 

  유료 서비스인 Surge Plus로 업그레이드하면 다음과 같은 부가적인 서비스를 사용할 수 있다고 한다.

• Custom Domain SSL 설정
• HTTP로 들어오는 요청 모두 HTTPS로 redirect 시키기
• 패스워드를 사용한 프로젝트 보호
• 이 경우 client-side application 전체를 패스워드로 보호한다고 한다.
• HTTP 접근 제어 (CORS)
• Custom redirect

surge.sh를 사용해서 프로젝트 deploy하기

  surge.sh 공식 홈페이지에서는 React와 같은 npm을 사용하는 javascript 프로젝트에서 surge를 사용하는 방법을 안내해주고 있습니다. 우선 global option으로 surge를 설치한다.

 

npm install -g surge

 

  그 다음 프로젝트 폴더로 들어가서 애플리케이션을 build한다.

 

npm run build

 

이제 surge를 사용해 보자. build 경로로 들어가서 surge 명령어를 입력하고 나면, 이메일과 비밀번호를 입력하라는 문구가 출력된다. 이메일과 비밀번호를 입력하고 나면, surge가 해당 프로젝트를 위해 중복되지 않는 랜덤한 도메인 하나를 만들어 준다. 이 과정에서 수정을 더해주면, 자신이 원하는 custom domain이나 가지고 있는 도메인으로 설정할 수도 있다.

 

custom domain 관련 공식 문서

 

아래의 예시에서는 React 프로젝트를 lemon-ipsum.surge.sh라는 도메인에 deploy해주었다.

 

$ surge
 
   Welcome to surge! (surge.sh)
   Login (or create surge account) by entering email & password.
 
          email: domain@gmail.com
       password:
 
   Running as domain@gmail.com (Student)
 
        project: D:\workspace\project-directory\build\
         domain: lemon-ipsum.surge.sh
         upload: [====================] 100% eta: 0.0s (33 files, 4987270 bytes)
            CDN: [====================] 100%
             IP: 45.55.110.124
 
   Success! - Published to lemon-ipsum.surge.sh