Outsider's Dev Story

Stay Hungry. Stay Foolish. Don't Be Satisfied.

Netlify Dev 기능으로 개발 중인 사이트 Netlify에 배포하기

전에 Netlify를 소개했었는데 며칠 전에 Netlfify Dev라는 기능이 공개되었다.

Netlify에 배포한다는 것은 기본적으로 사이트를 정적 웹사이트로 빌드해서 배포한다는 것이므로 빌드된 배포 파일을 웹서버로 확인해 보는 것은 간단한 일이다. 서버 웹 애플리케이션보다는 훨씬 간단하므로 빌드가 제대로 된다면 로컬에서 확인해야 할 필요가 적은 편이지만 실제로 서버리스 Functions나 Forms 등 정적 웹사이트만으로는 구현하기 어려운 추가 기능이 있으므로 배포하기 전에 로컬에서 Netlify의 동작을 확인할 수 있다면 좋은 일이다.

Netlify Dev

쉽게 웹사이트를 Netlify에 배포할 수 있게 netlify-cli가 제공되고 있는데 이번에 나온 Netlify Dev는 netlify-cli에 추가된 서브 명령어다. 나는 보통 GitHub 저장소에 Netlify를 연결해서 자동 배포를 했기 때문에 netlify-cli 자체를 사용하고 있지는 않았는데 여기서는 Netlify Dev만 살펴보려고 한다.

다음은 예시 정적 사이트로 gatsby-starter-blog라는 Gatsby 스터타킷으로 만든 사이트를 netlify dev로 실행한 모습이다. 실제로는 npx netlify-cli dev로 실행했는데 netlify-cli를 글로벌로 설치(npm install -g netlify-cli)하기 싫어서 npx를 이용한 것이다.

$ npx netlify-cli dev
◈ Netlify Dev ◈
◈ Starting Netlify Dev with gatsby
Waiting for localhost:8000.
> gatsby-starter-blog@0.1.0 start /Users/outsider/temp/netlify-dev/gatsby-blog
> npm run develop


> gatsby-starter-blog@0.1.0 develop /Users/outsider/temp/netlify-dev/gatsby-blog
> gatsby develop

success onPostBootstrap — 0.093 s

info bootstrap finished - 2.766 s

.
Connected!

   ┌─────────────────────────────────────────────────┐
   │                                                 │
   │   ◈ Server now ready on http://localhost:8888   │
   │                                                 │
   └─────────────────────────────────────────────────┘

You can now view gatsby-starter-blog in the browser.

  http://localhost:8000/

View GraphiQL, an in-browser IDE, to explore your site's data and schema

  http://localhost:8000/___graphql

Note that the development build is not optimized.
To create a production build, use npm run build

 DONE  Compiled successfully in 36ms                                                          02:22:08

Netlify Dev와 Gatsby의 출력이 섞여서 내용 파악이 어려울 수 있는데 Netlfify는 현재 프로젝트의 정적 사이트 실행 명령어와 설정을 자동으로 찾아낸다. 그래서 알려진 정적 사이트 도구를 사용하고 있다면 npx netlify-cli dev만으로 바로 서버를 띄워볼 수 있다.(막상 해보니 정적사이트를 개발할 때 내가 개발용으로 쓰는 python -m http.server보다 편한 듯하다)

위에서 Starting Netlify Dev with gatsby 부분을 보면 Gatsby를 사용한 프로젝트라는 것을 찾았고 Waiting for localhost:8000. 부분을 보면 Gatsby 사이트가 8000포트로 뜨리라는 것을 알 수 있다. 이후로는 gatsby develop 명령어로 실행되는 Gastby 빌드결과가 출력된다. 중간에 Server now ready on http://localhost:8888라는 부분이 있는데 Netlify Dev가 Gastby 서버와 연결되어 8888포트로 제공되는 것을 볼 수 있다. Gastby 개발 서버가 실행되었으므로 로컬에서 http://localhost:8000/, http://localhost:8888/ 모두로 접속해서 웹사이트를 볼 수 있다.

Netlify Dev 공개 주소로 배포하기

위에서 사용한 것은 로컬에서 확인하는 것이므로 크게 유용하지는 않다. Netlify 플랫폼을 이용해서 외부에서도 접속할 수 있도록 공개 주소로도 배포할 수 있다.

사용하기 전에 먼저 로컬에서 npx netlify-cli init로 환경설정을 해야 한다.

$ npx netlify-cli init
Logging into your Netlify account...
Opening https://app.netlify.com/authorize

초기화를 하면 먼저 Netlify 인증이 필요하므로 아래처럼 인증 화면이 나온다.

Netlify 웹사이트의 인증 요구

Authorize 버튼을 누르면 터미널에서 로그인이 완료된다.

Netlify 웹사이트의 인증 완료

인증이 완료되면 터미널에서 추가 설정을 할 수 있다.

터미널의 사이트 연결방법 선택 요청

여기서 초기화는 Netlify 사이트 배포 설정이므로 GitHub에 저장소도 있어야 하고 Netlify 사이트도 설정해야 한다. 기존에 이미 있는 프로젝트에 연결할 수도 있지만 여기서는 완전히 새로 만들어 보자. CLI에서 직접 GitHub 저장소도 만들 수 있는 것으로 보이지만 이미 GitHub에는 테스트용 저장소를 만들어 놓았다.

터미널의 Netlify 사이트 설정

Netlify에서 사용한 사이트명과 GitHub과 연결하기 위한 계정 정보를 넣고 빌드 설정을 하면 Netlify 사이트가 생성된다.

Netlify에 생성된 사이트

프로젝트에 Netlify를 설정했으므로 이제 Netlify Dev를 통해 배포해 보자. 공개로 배포하려면 npx netlify-cli dev --live처럼 --live 옵션을 주면 된다.

$ npx netlify-cli dev --live
◈ Netlify Dev ◈
◈ Starting Netlify Dev with gatsby
Waiting for localhost:8000.
◈ Lambda server is listening on 34567

> gatsby-starter-blog@0.1.0 start /Users/outsider/temp/netlify-dev/gatsby-blog
> npm run develop


> gatsby-starter-blog@0.1.0 develop /Users/outsider/temp/netlify-dev/gatsby-blog
> gatsby develop

info bootstrap finished - 2.790 s

Connected!
Waiting for localhost:34567.
Connected!
Waiting for localhost:8000.
Connected!
◈ Creating Live Tunnel for ac5effef-2a67-4d45-929c-da0a4e740b96

   ┌───────────────────────────────────────────────────────────┐
   │                                                           │
   │                   ◈ Server now ready on                   │
   │   https://outsider-netlify-dev-demo-b3aa5c.netlify.live   │
   │                                                           │
   └───────────────────────────────────────────────────────────┘

앞에서 로컬에서 띄웠던 것과 거의 같지만 이번에는 Netlify와 터널을 연결해서 https://outsider-netlify-dev-demo-b3aa5c.netlify.live 같은 주소로 접속할 수 있게 해준다. Netlify로 배포하는 사이트는 netlify.com으로 배포되지만 Netlify Dev는 netlify.live를 사용한다. 이는 당연히 Git 저장소에 푸시하지 않은 로컬 변경사항 그대로 배포되고 로컬 개발 환경이 핫 리로딩을 제공한다면 (터널이니까 어쩌면 당연히) 수정하는 변경사항도 위 주소로 접속해서 확인할 수 있다.

Netlify 주소로 접속해서 확인한 Gatsby 블로그

디자이너나 기획자와 일한다면 이 주소를 제공하고 같이 확인해 볼 수 있을 것이다. 비슷한 용도로는 이전에는 ngrok을 사용했는데 Netlify를 사용하고 있다면 Netlify Dev를 그대로 쓰는 것도 좋아 보인다.

2019/04/24 20:24 2019/04/24 20:24

기술 뉴스 #124 : 19-04-15

웹개발 관련

  • UI 런타임으로서의 React : React를 단순히 UI 라이브러리가 아니라 UI 런타임이라는 관점에서 React 코어 개발자인 Dan Abramov가 설명하는 글이다. 이는 단순히 브라우저만을 위한 것이 아니라 UI를 표현하기 위한 호스트 트리를 생성함으로써 단순히 웹사이트뿐만 아니라 모바일 앱, 문서 등 원하는 UI를 만들기 위해서 React가 어떻게 관여하는지를 설명하고 있는데 초보자를 위한 글은 아니지만, React가 여러 플랫폼 사이에서 어떤 위치를 가지고자 하는지를 잘 이해할 수 있는 글이다. 전에 영어로 읽다가 너무 길어서 포기했는데 번역이 되어서 쉽게 읽을 수 있었다.(한국어)
  • Google AMP lowered our page speed, and there's no choice but to use it : AMP와 아닌 사이트를 비교했을 때 글쓴이의 사이트는 AMP가 오히려 속도가 더 느렸음에도 구글이 웹을 거의 소유하고 있어서 사이트 제공자가 구글을 무시할 수밖에 없기 때문에 AMP를 사용할 수밖에 없다는 글이다. AMP의 제약이 너무 심하고 사이트에 특화된 기능을 제공하고 싶어도 AMP 컴포넌트가 아니면 할 수가 없고 오픈소스여도 사실상 구글의 입김이 가장 세기 때문에 사용자들이 의견을 제시해도 제대로 적용이 되고 있지 않다고 한다.(영어)
  • Code caching for JavaScript developers : V8에서 코드 캐싱이 동작하는 방법과 캐싱을 활용하기 위해 개발자들이 할 수 있는 방법을 설명하고 있다. 캐싱을 더 잘 이용하려면 코드나 URL, 혹은 런타임에 따라 달라지는 조건을 바꾸지 않는 것이 좋고 상황에 따라 라이브러리를 분리하거나 합쳐야 할 수도 있고 1KiB 이상만 캐싱하므로 작은 스크립트를 합치고 즉시 실행 함수 표현식을 사용하면 더 캐싱을 적극적으로 사용할 수 있다고 한다.(영어)

그 밖의 프로그래밍 관련

  • Easily identify problems in Node.js applications with Diagnostic Report : 별도의 모듈로 있던 Node.js 프로세스를 진단하는 Diagnostic Report API가 노드 코어로 들어와서 프로세스의 힙 덤프나 연결된 SSL 버전 등을 더 쉽게 확인할 수 있다.(영어)
  • koin 2.0 맛보기 : Kotlin용 의존성 주입 프레임워크인 koin 2.0의 사용법을 안드로이드 개발 환경 위주로 설명하는 글이다.(한국어)

볼만한 링크

  • [연대기] '게임왕' 마이크 모하임, 그 위대한 27년의 기록 : 마이크 모하임이 "실리콘&시냅스"부터 "블리자드"를 만들고 이제 은퇴하기까지 그간의 과정을 정리한 글이다. 꼭 게임을 엄청나게 좋아하지 않더라도 블리자드를 무시할 수 없는데 마이크 모하임이 블리자드와 함께 어떻게 발전해 왔는지에 대한 일대기가 정리되어 있어서 재미있는 글이다.(한국어)
  • 후배 개발자에게 - 2019년 : 현업에서 오랜 경험을 가지고 지금은 교육자의 길을 걷고 계신 자바지기님이 후배 개발자들이 성장하기 위해서 도움이 될만한 내용을 정리해서 쓴 글이다. SI 개발자들한테 욕먹을 생각으로 "하루라도 빨리 떠나라"라고 하신 것처럼 나도 욕먹을까 봐 얘기하진 못했지만, 기본적으로 생각하는 내용은 거의 같다. 구체적인 실천사례보다는 방향을 위주로 얘기하고 있지만, 개발자의 진로에 대해서 고민하고 있다면 한번 읽어볼 가치가 있는 글이다.(한국어)
  • 페이스북의 '좋아요'는 어떻게 프로파일링에 사용되었는가 : 페이스북 - 케임브리지 아날리티카 스캔들은 정리한 How Cambridge Analytica’s Facebook targeting model really worked - according to the person who built it를 번역한 글이다. 데이터 분석 쪽은 잘 모르지만, 이 스캔들의 핵심인 코건과 메일을 주고받은 내용을 바탕으로 페이스북 사용자의 좋아요를 넷플릭스의 추천알고리즘과 유사한 데이터 차원 축소 방식으로 분석했다고 하고 이를 통해 사용자의 정당 지지 여부를 85%까지 예측할 수 있다고 한다.(한국어)
  • Stack Overflow Developer Survey Results 2019 : Stack Overflow가 매년 사용자를 대상으로 진행한 설문 결과를 공개했다. 이 결과를 통해 Stack Overflow의 사용자들이 지역이나 성별, 선호 기술, 연차 등 아주 자세한 설문 결과의 통계를 볼 수 있다.(영어)
  • How The Big Five Tech Companies Make Their Money, Visualized : Apple, Amazon, Facebook, Alphabet, Microsoft가 주 수익이 어디서 나오는지를 정리한 글이다. 애플은 아이폰에서, 아마존은 온라인스토어에서 반 이상의 이익을 얻고 있고 페이스북과 알파벳은 광고에서 대부분의 이익을 얻고 있다. 마이크로소프트는 오피스의 수익이 가장 크지만 비교적 고르게 수익구조가 나누어져 있다.(영어)
  • 100주년 기념 서체 : 윤디자인에서 3.1운동 및 대한민국임시정부 수립 100주년을 기념해서 4종의 무료 폰트를 공개했다.(한국어)

IT 업계 뉴스

프로젝트

  • GoReleaser : Go 프로젝트의 릴리스 자동화 도구.
  • Electronegativity : Electron 애플리케이션의 설정이 잘못된 부분이나 보안 관련 안티패턴을 찾아주는 도구.
  • Giistr : GitHub에서 Star를 누른 프로젝트를 기준으로 기여할 수 있는 이슈를 쉽게 검색할 수 있도록 하는 서비스.
  • Awesome Design Tools : 디자인 관련 도구를 주제별로 정리해 놓은 사이트.
  • pyright : Microsoft에서 만든 Python 정적 타입 검사기.

버전 업데이트

2019/04/15 23:55 2019/04/15 23:55