XEcon 2016

오픈소스 프로젝트 XpressEngine(XE)과 PHP 웹 개발 관련 기술 및 지식을 공유하고 나눌 수 있는 컨퍼런스 XEcon! XE와 PHP를 모두 사용하지 않지만, 프론트엔드와 인프라 영역의 세션에서 주제가 너무 좋아서 참여했습니다!

Posted by kingbbode on November 26, 2016

Recently by the same author:


3년차 웹 개발자

4년차로 접어든 웹 개발자의 3년차 늦은 회고

You may find interesting:


젠킨스 파이프라인 사용하여 자동 배포환경 만들어보기!

Build Pipeline 으로 작성했던 배포 구조를 Jenkins Pipeline으로 이전!


Nexus 3.X - Maven, NPM 저장소로 이용하기

Nexus에서 Maven 저장소, NPM 저장소를 구성하고 사용하는 내용을 정리

Session 2. Webpack 실무 적용전략

Webpack은 Bundling 도구.

webpack --watch //watcher
webpack -p //Production Build

적용했던 순서

  • package manager(npm or yarn)
  • apply babel
  • multiple entry
  • common module
  • html plugin
  • webpack dev sever
  • production Build
  • other asset

resolver

  • alias 기능으로 서드파티 모듈 탐색 이슈를 해결 가능

Plugin

  • ProvidePlugin
  • ContentReplacementPlugin
  • DefindPlugin

Module

  • module의 다양한 loader 활용 가능
  • module의 noParse : 파싱하지 않게 함
  • loader는 체이닝으로 오른쪽에서 왼쪽으로 흐름

Babel

  • babel cacheDirectory는 성능을 위해 true로 하는 것이 좋음

EXPLICIT VENDOR, Common Chunk

  • CommonsChunkPlugin 활용

HTML-WEBPACK-PLUGIN

HtmlWebpackPlugin으로 js에서 인젝션 대상이 되는 파일을 지정할 수 있음

webpack dev server

모든 것을 메모리에서 실행

Production Build

  • optimize
    • noError
  • uglify
  • split config dev and prod
    • webpackMerge

Hash

  • CommonsChunkPlugin에서는 [hash]로 사용 가능
  • [chunkHash]는 대상의 chunk에 변화가 있을 때 바뀜

NPM WITH WEBPACK

package의 scripts로 gulp, grunt가 필요없이 NPM과 WEBPACK만으로 모든 과정을 거의 사용 가능하다.

Webpack HINTS

webpack 구조를 Visualize

TIP

  • webpack Dashboard : 편리하고 깔끔하게 웹팩에 대한 정보를 볼 수 있음
  • babel-plugin-lodash : 사용하는 특정 기능만 import하도록 변환해줌
  • lodash-webpack-plugin : 필요없는 내용을 지워주고 최적화.

Debug

node --inspect --debug-brk $(which webpack)

Webpack2가 beta 진행 중
tree shaking, async loading이 강화될 예정
migration guide도 제공

Sample
WebpackBin


Session 3. Frontend stack의 변화

Javascript 등장!

다양한 브라우저의 다양한 스팩을 통일해주는 jQuery가 등장

  • jQuery를 통한 하나의 문서 작성으로 여러 브라우저를 대응 가능하게 됨

jQuery를 기반으로 하는 다양한 플러그인이 등장

  • 개발자는 모든 기능을 스스로 구현하는 것이 아닌, 이미 제작되어 있는 플러그인을 사용해 좀 더 편하게 개발할 수 있게 됨

Single Page Webapp(SPA) Model의 등장

  • 다양한 기능을 클라이언트에서 동적으로 사용하게 됨

BackboneJS 프레임워크의 등장

  • 다양한 플러그인을 사용하면서 등장한 통일되지않는 구조 문제를 해결해주는 프레임워크가 등장

다양한 프레임워크의 등장

ReactJS가 혜성처럼 등장

  • 효율적인 방식으로 View를 보여줌
  • 모든 것을 Component로 쪼갰기 때문에, View를 재사용할 수 있었고, 더 편하게 효율적인 개발을 할 수 있게 됨
  • 데이터는 한쪽으로만 흐르기 때문에 Stack을 통한 디버깅이 가능(예측 가능)
  • View만 담당하기 때문에 여러 프레임워크에서 적용하기 용이했음

현재까지

  • 편리하면 써왔다.
  • 사용자의 요구가 커져왔다.

다음은?

  • Progressive Web App(PWA)
    • 네이티브 앱과 같은 사용성을 웹에서
  • 함수형 프로그래밍의 인기
    • 상속보단 조립
    • 불변성이 중요한 이슈로 올라올 것
  • Web Component
    • Custom Elements

Session 4. Github + Jenkins +Docker로 자동배포 시스템 구축하기

기존 배포방식

  • RSYNC
  • SYMBOLIC LINK
  • VCS
  • COPY

방식이 어떻게 됐든, 결국 수동으로 해야한다는 것..

Jenkins

  • CI 도구 (지속적 통합, Continuous integration)
  • Build & Test

GITHUB

webhook을 통해 빌드 자동화가 가능

저장소가 previte이라면 접속 가능한 계정 정보를 입력 해줘야 함

Jenkins의 빌드 유발 방식이 여러가지 존재

  • 빌드를 원격으로 유발
  • Build after other projects are built
  • 스케줄링
  • git push event(주로 사용)

github webhook event 등록

http://{jenkins ip or 도메인}/{github_webhook}

DOCKER

환경을 이미지화

  • Software containerization platform
  • 서비스 운영환경 독립
  • Immutable Infrastructure

이미지를 OS의 독립된 프로세스에서 구동

SCRIPTS

Jenkins의 Build 영역에 빌드로 어떤 작업들을 실행할지 shell script 등록

ex)

${JENKINS_HOME}/script/push.sh
${JENKINS_HOME}/script/deploy.sh

ex)push.sh

#!/bin/sh

DIR=/PATH/TO/DOCKERFILE

git -C $DIR/www pull
sudo docker build -~~
...

SSH 방식

  • ssh로 접근하여 docker를 switch하고 port fowarding
  • SSH 인증 설정
    • 인증 키를 등록해놓고 사용하면 편함

TCP 방식

  • TCP 요청을 통해 실행(docker는 -H 옵션 사용)
  • docker 데몬 실행 옵션을 변경 해주어야 함
    DOCKER_OPTS="-H unix:///var/run/docker/sock -H tcp://0.0.0.0:2376"
    

DOCKER-COMPOSE

  • docker 사용을 더 쉽게 해줌
  • compose를 통해 down pull 등이 가능
  • docker_compose.yml로 설정

CONTINUOUS DEPLOY

UP, DOWN시 delay 발생 여지가 있음

로드밸런서를 이용한 방식으로 변경 docker_compose_yml에서 services로 분리하여 포트를 다르게 하여 사용

로드밸런서

  • HAPROXY
    • check 옵션으로 살아있는 쪽으로 요청을 보내게 설정
    • 방화벽 설정 필요 (iptables, firewalld)

NOTIFICATION

JEKINS와 메신저를 연동하여 알림 처리

  • Slack Notipication Plugin
  • Jekins의 빌드 후 조치에 등록

ETC

PRIVATE REGISTRY

github.com/docker/distribution

  • Registry가 http를 사용하는 경우엔 옵션 등록 해줘야함(default https)

SERVICE DISCOVERY

서비스가 떠있는 것을 자동으로 캐치하기 위해 유용한 것들

  • dockercloud/hasproxy
  • jwilder/docker-gen
    • jwilder/nginx-proxy
  • docekr_compose.yml을 통해서도 설정 가능

발표 소스 코드