Walmart Electrode CentOS 7 에서 Docker 로 배포하기.

Docker는 생성 및 실행, 배포가 가능한 어플리케이션을 만들 수 있는 기술이 기반으로 한 새로운 컨테이너이다. 컨테이너는 가상화기술보다 매우 가벼운 기술이다.

1. 먼저 Docker 에 가입을 하자.

ID와 이메일과 패스워드를 입력 후 Sign up을 클릭한다.

Node.js에서 MariaDB 와 GIS

1. 필요한 모듈

• Node.js - 크롬의 자바스크립트 런타임이 내장된 Node.js 플랫폼이다. 이는 이벤트 기반과 넌블럭 아키텍처 기반이다.
• Express.js - node.js 기반의 웹 프레임워크이다.(루비의 Sinatra 와 유사하다) 응용 프로그램에 대하여 쉽게 Configuration을 할 수 있고, 괜찮은 구조를 만들어 준다.
• Jade - node.js 의 뷰 템플릿 엔진으로 HTML 태그 보다 심플한 형태의 마크업을 작성하면, 자동으로 HTML을 생성해 주는 역할을 한다.
• node-mariasql - MariaDB를 node.js에 바인딩할 수 있는 클라이언트 라이브러이다.
• xml2js - XML 파싱을 위한 node 모듈이다.
• Google Maps - 최종결과를 맵에 표시하기 위해 필요하다.

여기에서 사용하는 소스는 github인 https://github.com/rasmushoj/nodejs-gpx-mariadb 에서 다운을 받을 수 있다.

CentOS7 에 Node.js 설치하기.

1. yum 저장소에 epel-release 를 설치한다.

[binrang@binrang-db ~]$ sudo yum install epel-release [sudo] password for binrang:  Loaded plugins: fastestmirror, langpacks base                                                                                                 | 3.6 kB  00:00:00      extras                                                                                               | 3.4 kB  00:00:00      mariadb                                                                                              | 2.9 kB  00:00:00      updates                                                                                              | 3.4 kB  00:00:00      Loading mirror speeds from cached hostfile  * base: mirror.oasis.onnetcorp.com  * extras: mirror.oasis.onnetcorp.com  * updates: mirror.oasis.onnetcorp.com Resolving Dependencies --> Running transaction check ---> Package epel-release.noarch 0:7-6 will be installed --> Finished Dependency Resolution Dependencies Resolved ============================================================================================================================  Package                           Arch                        Version                    Repository                   Size ============================================================================================================================ Installing:  epel-release                      noarch                      7-6                        extras                       14 k Transaction Summary ============================================================================================================================ Install  1 Package Total download size: 14 k Installed size: 24 k Is this ok [y/d/N]: y Downloading packages: epel-release-7-6.noarch.rpm                                                                          |  14 kB  00:00:00      Running transaction check Running transaction test Transaction test succeeded Running transaction   Installing : epel-release-7-6.noarch                                                                                  1/1    Verifying  : epel-release-7-6.noarch                                                                                  1/1  Installed:   epel-release.noarch 0:7-6                                                                                                  Complete! [binrang@binrang-db ~]$

CentOS7 에서 MariaDB 10.0 설치 하기.

1. yum repository 에 mariadb 저장소 추가

[root@binrang-db yum.repos.d]# pwd /etc/yum.repos.d [root@binrang-db yum.repos.d]# vi MariaDB.repo # MariaDB 10.0 CentOS repository list - created 2016-11-03 04:33 UTC # http://downloads.mariadb.org/mariadb/repositories/ [mariadb] name = MariaDB baseurl = http://yum.mariadb.org/10.0/centos7-amd64 gpgkey=https://yum.mariadb.org/RPM-GPG-KEY-MariaDB gpgcheck=1

CentOS7에서 yum 으로 설치 된 Mariadb 삭제 하기.

1. yum으로 패키지를 조회 해 보자.

[root@binrang-db ~]# yum list mariadb Loaded plugins: fastestmirror, langpacks Loading mirror speeds from cached hostfile  * base: mirror.oasis.onnetcorp.com  * extras: mirror.oasis.onnetcorp.com  * updates: mirror.oasis.onnetcorp.com Installed Packages mariadb.x86_64                                           1:5.5.50-1.el7_2                                           @updates [root@binrang-db ~]#

CentOS7 에서 MariaDB 설치

mariaDB  설치를 하기 위해 yum 을 이용한다.

[root@localhost ~]# yum install mariadb Loaded plugins: fastestmirror, langpacks Loading mirror speeds from cached hostfile  * base: mirror.oasis.onnetcorp.com  * extras: mirror.oasis.onnetcorp.com  * updates: mirror.oasis.onnetcorp.com Resolving Dependencies --> Running transaction check ---> Package mariadb.x86_64 1:5.5.41-2.el7_0 will be updated --> Processing Dependency: mariadb(x86-64) = 1:5.5.41-2.el7_0 for package: 1:mariadb-server-5.5.41-2.el7_0.x86_64 ...... ============================================================================================================================  Package                         Arch                    Version                             Repository                Size ============================================================================================================================ Updating:  mariadb                         x86_64                  1:5.5.50-1.el7_2                    updates                  8.9 M Updating for dependencies:  mariadb-libs                    x86_64                  1:5.5.50-1.el7_2                    updates                  755 k  mariadb-server                  x86_64                  1:5.5.50-1.el7_2                    updates                   11 M Transaction Summary ============================================================================================================================ Upgrade  1 Package (+2 Dependent packages) Total size: 20 M Is this ok [y/d/N]:  ...... Transaction test succeeded Running transaction   Updating   : 1:mariadb-libs-5.5.50-1.el7_2.x86_64                                                                     1/6    Updating   : 1:mariadb-5.5.50-1.el7_2.x86_64                                                                          2/6    Updating   : 1:mariadb-server-5.5.50-1.el7_2.x86_64                                                                   3/6    Cleanup    : 1:mariadb-server-5.5.41-2.el7_0.x86_64                                                                   4/6    Cleanup    : 1:mariadb-5.5.41-2.el7_0.x86_64                                                                          5/6    Cleanup    : 1:mariadb-libs-5.5.41-2.el7_0.x86_64                                                                     6/6    Verifying  : 1:mariadb-server-5.5.50-1.el7_2.x86_64                                                                   1/6    Verifying  : 1:mariadb-libs-5.5.50-1.el7_2.x86_64                                                                     2/6    Verifying  : 1:mariadb-5.5.50-1.el7_2.x86_64                                                                          3/6    Verifying  : 1:mariadb-5.5.41-2.el7_0.x86_64                                                                          4/6    Verifying  : 1:mariadb-server-5.5.41-2.el7_0.x86_64                                                                   5/6    Verifying  : 1:mariadb-libs-5.5.41-2.el7_0.x86_64                                                                     6/6  Updated:   mariadb.x86_64 1:5.5.50-1.el7_2                                                                                            Dependency Updated:   mariadb-libs.x86_64 1:5.5.50-1.el7_2                        mariadb-server.x86_64 1:5.5.50-1.el7_2                        Complete! [root@localhost ~]#

Hapi 따라하기.

1. 신규로 새로운 프로젝트 디렉토리를 만든다.

[binrang@binrang ~]$ mkdir haproject [binrang@binrang ~]$ cd haproject/ [binrang@binrang haproject]$ pwd /home/binrang/haproject [binrang@binrang haproject]$

2. npm init 명령을 실행하여 package.json 을 생성한다.

Walmart Electrode #09 Generate Docs

문서 생성

문서는 component.md와 메타문서인 component.json 으로 이루어져 있다. Electrode-Docgen 을 이용하면, 자동화가 가능하다.

이 문서화 명령은 아래 gulpfile.js 안에 정의되어 있다.

1. 위치 : <your-awesome-component>/gulpfile.js

Walmart Electrode #08 Build and Demo

Demo the Component & Build

아래와 같이 디렉토리 이동 후 실행을 해 보자.

Walmart Electrode #07 Add Examples

예제를 추가 해보기.

1. 위치 : <your-awesome-component>/demo/examples/render-friend.example

해당 디렉토리에 render-friend.example 파일을 신규로 생성하고 아래 코드를 추가한다.

[binrang@binrang examples]$ pwd /home/binrang/br-electrode-component/br-elec-component/demo/examples [binrang@binrang examples]$ vi render-friend.example <RenderFriend     friend={       {name: "John", img: "//goo.gl/dL5MXT"}     } />

Walmart Electrode #06 Test Components

Components에 대한 개발 테스트

WalmartLabs 에서는 대용량, 고성능 코드를 구현하는데 있어 중요한 포인트로 테스트를 강조하고 있다.

이 테스트 방법은 Component와 Application 레벨에서 단위별 테스트를 포함하고 있다.

그리고 구현한 Component들을 위해, Mocha 를 사용하고, 자바스크립트 테스트 프레임워크 는 비동기 테스트에 대하여 완벽하게 수행한다. Enzyme을 같이 사용하고,airbnb 의 React를 위한 테스트 유틸리티이다.

Walmart Electrode #05 Develop Main Component

상위 레벨의 메인 Component 개발

1. 위치 : <your-awesome-component>/src/components/your-awesome-component.jsx
해당 파일을 열어 아래 코드를 재정의 한다.

현재 코드

Walmart Electrode #04 Develop Styles

CSS 모듈을 사용하여 스타일 개발

이번에는 동적 응용 프로그램을 만드는 CSS 모듈을 이용하여 일부 스타일을 추가 해본다.

1. 위치 : <your-awesome-component>/src/styles/your-awesome-component.css

해당 CSS 파일을 열어 아래 부분에 CSS 코드를 추가한다.

Walmart Electrode #03 Component Helpers

Components 에 대한 helpers 개발

1. 위치 : <your-awesome-component>/src/helpers/graph-styles.js

src 디렉토리 밑에 helpers 디렉토리를 신규 생성하고 graph-styles.js 파일을 생성 후 아래 내용을 코딩한다.

Walmart Electrode #02 Low-Level Components

1. 위치 : <your-awesome-component>/src/components/guest-list.jsx
디렉토리를 이동하고 guest-list.jsx 파일을 신규로 생성한 후 , 아래 내용과 같이 입력한다.

Walmart Electrode #01 Create a Reusable Component

새로운 프로젝트를 하기 위해 상위 디렉토리에서 신규 프로젝트 디렉토리를 생성한다.

[binrang@binrang ~]$ mkdir br-electrode-component [binrang@binrang ~]$ cd br-electrode-component/ [binrang@binrang br-electrode-component]$

이번에도 Yeoman 을 이용한다. 먼저 generator-electrode-component 를 글로벌 모드로 설치하자.

react-router-tutorial #13 server rendering

13-server-rendering 디렉토리로 이동 한 후 npm install 을 실행하자.

1. 루트 디렉토리에 webpack.server.config.js 파일을 신규로 만들고 아래 코드를 입력한다.

[binrang@binrang 13-server-rendering]$ pwd /home/binrang/react/react-router-tutorial/lessons/13-server-rendering [binrang@binrang 13-server-rendering]$ vi webpack.server.config.js var fs = require('fs') var path = require('path') module.exports = {   entry: path.resolve(__dirname, 'server.js'),   output: {     filename: 'server.bundle.js'   },   target: 'node',   // keep node_module paths out of the bundle   externals: fs.readdirSync(path.resolve(__dirname, 'node_modules')).concat([     'react-dom/server', 'react/addons',   ]).reduce(function (ext, mod) {     ext[mod] = 'commonjs ' + mod     return ext   }, {}),   node: {     __filename: true,     __dirname: true   },   module: {     loaders: [       { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader?presets[]=es2015&presets[]=react' }     ]   } }

react-router-tutorial #12 navigating

이번 예제를 위하여 12-navigating 디렉토리로 이동 후 npm install을 실행하자.
이번에는 링크를 따라 움직이다 입력을 한 후 버튼을 클릭할 경우 응답을 하는 부분을 구현해본다.


1. modules 밑에 Repos.js 파일에 대하여 아래와 같이 구현한다.

react-router-tutorial #11 production-ish server

이번 예제를 위하여 11-productionish-server 디렉토리로 이동하고 npm install 을 실행 해 놓는다.

production 모드는 배포를 뜻하는 것이고, development 모드는 개발 을 뜻한다.
Node.js 프레임워크의 Express 의경우 production 모드일때는 파일 캐싱, 에러 메시지 감추기 등 배포의 적합한 환경을 설정을 한다.

development 모드일 경우는 파일 캐싱 방지, 디버그를 위한 상세한 에러 메시지 보이기 등의 개발에 필요한 환경을 설정을 해 준다.

react-router-tutorial #10 clean urls

이번 예제를 위하여 10-clean-urls 디렉토리로 이동한 후 npm install을 실행한다.
이제까지의 예제들을 보면 URL에 해시를 이용하고 있는 것을 확인 할 수 있다.
이 해시는 Hash History 라는 것을 이용해 라우팅을 설정하는 것고 한다.

어째든 해시를 이용하다 보니 URL이 쓰레기 같은게 붙어서 움직임으로 이를 없애는 것이 목적이다.

1. index.js 파일에 대하여 hashHistory 를 browserHistory 로 변경한다.