Outsider's Dev Story

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

기술 뉴스 #106 : 18-07-15

웹개발 관련

  • Here are examples of everything new in ECMAScript 2016, 2017, and 2018 : ECMAScript에 새로운 기능이 계속 추가되는 상황이라 새로 추가된 걸 모르거나 한번 알았다가도 손에 익기 전에 까먹는 경우도 많은데 이 글에 ECMAScript 2016, 2017, 2018 별로 추가된 기능과 사용법이 한 번에 잘 정리되어 있어서 확인하기 좋다.(영어)
  • 배민찬은 Vue를 어떻게 사용하나요? : 배민찬 서비스에서 jQuery를 사용하던 레거시에 Vue를 도입한 과정을 설명한 글이다. 반응형 웹이 아니라 믹스인과 확장을 이용해서 공통부분을 재사용하고 DOM 접근이 필요한 곳에는 디렉티브를 만들어서 적용한 과정이 잘 나와 있다.(한국어)
  • Progressive Web Apps : PWA를 만드는 방법을 설명한 글이다. PWA의 특징을 설명하고 기본이 되는 Service Woker, manifest 작성 방법 등이 나와 있다.(한국어)
  • A Real-World WebAssembly Benchmark : 브라우저에서 PDF 문서를 볼 수 있는 PSPDFKit의 SDK를 Web Assembly로 구현하고 벤치마크를 통해 각 브라우저에서 Web Assembly와 JavaScript 구현체와의 성능 비교를 했다. Firefox를 제외하고는 아직 Web Assembly가 아주 빠르진 않은데 각 브라우저가 Web Assembly에 대한 개선 계획을 어떻게 잡고 있는지까지 정리되어 있다.(영어)
  • 산업별 자바스크립트 사용 현황 : JavaScript 사용에 대한 설문은 꽤 많지만, 업계별 사용을 정리한 JavaScript Usage by Industry를 번역한 글이다. 마케팅, IT, 정부, 교육 등 산업별로 어떤 도구와 프레임워크를 사용하고 다른 언어는 어떤 걸 사용하는지 정리한 글인데 다른 업계에서 일해본 적은 없지만 업계별 특징이 나온다는 점이 재미있다.(한국어)

그 밖의 프로그래밍 관련

  • Goodbye Microservices: From 100s of problem children to 1 superstar : Segment에서 2015년에 마이크로서비스 아키텍처를 도입했다가 다시 Monolith로 돌아간 과정을 설명한 글이다. 어떤 문제 때문에 2015년에 MSA를 도입했고 처음에는 잘 동작했고 저장소도 100여 개로 분리했지만, 시간이 지나면서 운영상의 부담이 너무 커져서 다시 단일 저장소로 합치고 기존에 있던 문제를 해결한 과정이 아주 잘 나와 있다. MSA냐 Monolith냐의 문제보다 어떤 이유로 MSA가 좋다고 생각했고 어떤 이유로 Monolith가 좋다고 생각했는지가 잘 나와 있다.(영어)
  • 커맨드라인 JSON 프로세서 jq : 개발하다 보면 파일이나 API를 통해서 JSON을 많이 다루게 되는데 이 때 편리한 jq의 사용방법을 정리한 글이다. jq를 익혀두면 JSON 데이터를 쉽게 확인하거나 조작할 수 있어서 아주 유용한데 처음 사용할 때는 문법이나 사용방법이 어색할 수 있다. 이 글에서 jq의 동작 방식이 자세하게 나와 있다.(한국어)
  • Python 3.7의 새로운 기능들 : Cool New Features in Python 3.7의 번역 글로 최근에 나온 Python 3.7의 기능을 정리한 글이다. 편리한 breakpoint(), 데이터 클리스, 타이핑 등 추가 기능의 사용법과 배경이 잘 나와 있다.(한국어)
  • Compiler in JavaScript using ANTLR : MongoDB의 Compass를 지원하면서 다른 언어로 작성한 쿼리를 컴파일하는 작업을 바탕으로 ANTLR로 JavaScript를 Python으로 컴파일 하는 과정을 설명한다. AST나 컴파일러에 대한 개념을 설명하고 이때 사용할 수 있는 도구나 개념들을 소개한 뒤에 ANTLR로 어떻게 JavaScript 코드를 UAST로 만들어서 Python으로 변환하는지를 자세히 보여주고 있다.(영어)
  • 도커(Docker) 컨테이너 로케일 설정 : Debian이나 Ubuntu로 Docker를 사용할 때 기본 로케일 설정이 POSIX라서 한글 입력이 안 되는 문제를 해결하기 위해 LC_ALL=C.UTF-8로 설정하거나 로케일을 설치해서 한글을 입력할 수 있게 하는 방법을 설명한다.(한국어)

볼만한 링크

  • 8년째 같은 제품을 만들고 있습니다 : Ridibooks의 CTO인 남현우 님이 8년간 Ridibooks를 만들면서 오래 가는 제품을 만들려면 어떻게 해야 할지에 대한 생각을 정리한 발표자료다. 개발에서 흔히 하듯이 제품개발도 컴포넌트로 만들어서 조립해야 한다는 이야기인데 그 생각을 풀어가는 과정에 많은 고민이 담겨있어서 재미있게 봤다.(한국어)
  • 스타트업에서 전화응대 고객센터 간단히 구축하기 : LG U+ 인터넷 전화의 REST API를 이용해서 고객 전화가 올 때 사용자로 등록되어 있으면 슬랙에 사용자 정보를 보여주도록 한 과정을 설명하고 있다. 고객대응을 직접 해본 적은 없어서 이런 생각을 해본 적은 없는데 C/S 담당자가 일일이 어드민에서 조회해 보지 않고도 편하게 정보를 확인하고 기록할 수 있는 좋은 방법인 것 같다.(한국어)

IT 업계 뉴스

  • [python-committers] Transfer of power : Python 언어를 만든 귀도 반 로섬이 Python의 의사 결정에서 물러나기로 했다.(영어)
  • Postmortem for Malicious Packages Published on July 12th, 2018 : 지난 12일 ESLint 메인테이너 중 한 명의 계정이 해킹당하면서 eslint-scope@3.7.2eslint-config-eslint@5.0.2가 npm 레지스트리에 배포되었다. 이 버전을 설치하면 pastebin.com에서 코드를 받아서 실행하면서 사용자의 .npmrc를 공격자에게 보내도록 해 사용자의 npm 토큰을 탈취할 수 있게 되었다. 위 두 버전은 현재 npm 레지스트리에서 제거되었고 위 버전을 설치한 적이 있다면 토큰을 탈취당했을 수 있으므로 주의해야 한다.(영어)

프로젝트

  • termtosvg : 터미널을 SVG 애니메니션으로 녹화하는 Python 도구.
  • vim.wasm : WebAssembly로 Vim을 웹 브라우저에 포팅한 프로젝트.
  • Badgen : README 파일 등에서 주로 사용하는 상태 배지를 URL에 색과 텍스트를 지정하면 만들어주는 서비스.

버전 업데이트

2018/07/15 23:50 2018/07/15 23:50

Travis CI에서 Docker Hub에 이미지 푸시하기

며칠 전에 DockerHub의 Automated Build에 대해서 글을 썼는데 보통은 이를 이용해서 Docker 이미지를 배포하면 된다. 하지만 Docker 이미지를 빌드하기 전에 추가 작업이 필요하다거나 DockerHub를 쓸 수 없는 상황이라면 CI 등에서 직접 빌드해서 푸시해야 한다. 나 같은 경우는 Automated Build의 존재를 몰라서 CI를 그동안 이용하고 있었는데 나중에도 쓸 일이 있을 것 같아서 정리해 둔다.

Docker 이미지 빌드 및 푸시

Docker 이미지를 빌드한 뒤에 Docker Hub에 푸시하려면 다음과 같은 과정을 진행하게 된다.

  1. Docker Hub에 로그인한다.
  2. Dockerfile로 이미지를 빌드한다.
  3. Docker 이미지를 푸시한다.
$ docker login -u YOUR_USERNAME -p YOUR_PASSWORD

$ docker build -t outsideris/demo:0.0.1 .

$ docker push outsideris/demo:0.0.1

여기에 추가로 latest 태그도 푸시하려면 다음과 같이 기존 이미지로 latest를 만들고 푸시하면 된다.

$ docker tag outsideris/demo:0.0.1 outsideris/demo:latest

$ docker push outsideris/demo:latest


Travis CI 설정

CI마다 사용방법이 약간씩 다르지만, 기본적인 내용이 대동소이하다. 여기서는 Travis CI를 사용하는데 CI 설정은 이미 되어 있다고 가정하고 Travis CI 클라이언트설치되어 있어야 한다.

Docker Hub에 로그인해야 하므로 .travis.yml에 환경 변수로 저장한다.

...

env:
  global:
  - DOCKER_USER=outsideris
  - DOCKER_PASS=mypassword

...

이렇게 저장하면 뒤에서 배포할 때 docker login -u $DOCKER_USER -p $DOCKER_PASS로 로그인할 수 있지만 .travis.yml은 암호화된 파일이 아니고 Git에 저장해야 하므로 비밀번호를 그대로 저장하면 안 되고 암호화해서 저장해야 한다.

$ travis encrypt DOCKER_PASS="mypassword" --add

Travis 클라이언트로 값을 암호화할 수 있다. 위처럼 --add 옵션을 주면 .travis.yml에 자동으로 추가해 주므로 아래와 같은 형태가 된다.

...

env:
  global:
  - DOCKER_USER=outsideris
  - secure: Yvu4MlhmUAWUpA32mY/TK3DPRITsFhApB5yGbomBaouKqImN2DpftBgQ8Ku4kBtBHw0/4JIXmJ71uWf4jJVI/u3uevGeDUGyAZBVjMM3FrRR1RETAHYczy3CsF7A0PP7GEW41WYKfRV9LRW2j86U97mtXzuymq7lJuYZsSPZpAqhie6W3RifAgFq6rV/gJiqRjFNqqeDkgZ8798lrQgAEcMLvJweqcYpwf/FxapfDH6GmsEScPRtIAPz6yiaZUh+D0FtlpGxszIoKXM8HNtug2tMqjgdeSVOi00qPwxN8fmvudFDMSi5YzwobrtEz/EsRPA8esEZg7txX4UESndBlbdGrTjwEbcruj3D/wnU8GNHvuBfltcvMdzkuTUrNzLdMkA6C+Can3Z3DvAkmNxoXWolAo/lPftZqlzzkcnjvCCdiIfvu5m7we0ZutqmStZOb2y0RjpLX9WoPMwFr4C5ZIH/Pvlc0zlXLWLtHr6nTHX2/OeIFlyWy8MxStyHmUBBYcZ0YrjIiC90K9POOE+SlVakLxZifgzxZiJHgmiL4BGgGR6MYycLbS/Av/Ds7wV1L4XBBGy1Quafxu2nksvZZTaIeozXs0t/qOprmU6TJqf7Pn+m9LYDASlQe+phcmlg+T0OBEZBK0yrJdRfAHcRYCkqflhnQQnoUEHmcKW+TmI=

...

secure 부분이 DOCKER_PASS="mypassword" 부분이고 이는 Travis CI에서 빌드를 돌릴 때 자동으로 복호화되어 환경변수로 설정된다.

Travis CI 빌드 로그 중 환경변수 설정

빌드 로그를 보면 정상적으로 환경변수가 설정되었지만 DOCKER_PASS의 내용은 출력되지 않은 것을 볼 수 있다.

Docker 이미지 푸시

설정이 다 되었으므로 .travis.yml에 배포 설정에서 이미지를 푸시하면 되는데 푸시하는 명령어가 한 명령어가 아니므로 편의상 docker-deploy.sh라는 파일을 만든다.

$ cat docker-deploy.sh
docker login -u YOUR_USERNAME -p YOUR_PASSWORD

docker build -t outsideris/demo:0.0.1 .

docker tag outsideris/demo:0.0.1 outsideris/demo:latest

docker push outsideris/demo:0.0.1
docker push outsideris/demo:latest

Travis CI의 배포단계에서 이 스크립트 파일을 실행하도록 지정하면 된다.

...

deploy:
  provider: script
  script: bash docker-deploy.sh
  skip_cleanup: true
  on:
    repo: outsideris/demo
    tags: true

deploy로 지정했으므로 이는 테스트 등이 성공했을 때만 실행되고 on 부분에서 tags: true로 지정했으므로 Git에 태그를 푸시했을 때(즉, 릴리스할 때)만 배포된다.

이렇게 설정하면 Git에 태그를 만들어서 푸시하면 CI에서 Docker Hub에 자동으로 이미지를 배포한다.

2018/07/13 03:36 2018/07/13 03:36