MEAN stack 의미?

간단하게 위 그림처럼 4가지 Mongo DB, Express, Angular.js, Node.js 오픈소스로 구성 된 개발 환경으로 생각하시면 됩니다.
Mongo DB: database
Express : back-end framework
Angular.js: front-end framework
Node.js: back-end runtime environment

각 항목이 어떤 역할을 하는지는 각각 설치방법과 함께 설명을 하겠습니다.

공식 홈페이지 (영문) 주소:

MEAN stack 각 홈페이지

MEAN stack 을 설치하기 위한 필요 툴 홈페이지 -> 자세한 설명은 아래에...

MEAN stack을 AWS EC2 환경의 리눅스 (Ubuntu) 와 Mac의 OS X 에 설치하는 과정을 진행하면서 정리해 보았습니다.


Node.js - 리눅스에 설치하는 방법

Node.js 에 대해서 다시 간단히 설명 드리면 

기존에 프론트앤드에서 사용하던 JavsScript 기술로 서버단 기술을 제어할 수있게 만든 것이라고 할 수 있다.

웹 개발은 Front-end 와 Back-end로 나뉜다. 간단히 말하면 프론트앤드는 웹페이지 쪽의 사용자가 볼 수 있는 부분이고, 백앤드는 서버쪽을 차지하고 있다. 원래 JavaScript는 프론트앤드에서 사용이 주로 됐지만, 2009년 Node.js라는 framework의 등장으로 자바스크립트로 서버단 기술까지 제어할 수 있게 되었다. Node.js(노드js) 는 JavaScript 엔진 V8 위에서 동작하는 이벤트 처리 I/O framework이다. 서버 환경을 포함한 프론트앤드 백앤드 모두를 JavaScript라는 같은 언어로 관리할 수 있게 되었다. 기존의 Front-end 개발자들도 다른 언어를 배울 필요 없이 쉽게 서버단 처리를 할 수 있게 만들어줬다.


우선 예전에 Node.js의 설명과 윈도우 기반에서 설치한 포스팅을 아래와 같이 한 적이 있는데 참고하셔도 됩니다.


AWS에 설치를 하기 위해서는 AWS에 리눅스 인스턴스를 설치 하는 방법 포스팅을 참고 하세요.


준비가 됐다면 그럼 리눅스에 설치를 해보자

참고한 링크 -> https://github.com/creationix/nvm#install-script


1. SSH를 통해서 리눅스 인스턴스에 연결한다.

2. Node version manager(NVM)을 아래와 같은 명령어도 설치한다

curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.0/install.sh | bash

3. nvm을 활성화 시킨다

. ~/.nvm/nvm.sh

4. 설치 가능한 nodejs 버전을 확인한다.

nvm ls-remote

4. nvm으로 특정 버전의 node.js를 설치한다. 버전 지정이 없으면 최신 버전

nvm install node


다양한 방법으로 node.js 를 설치 가능하지만 위에서는 nvm을 이용해서 설치 했다.

이유는 버전 관리하기 편하고 등등의 여러가지 장점이 있는 것 같은데 향후에 찾아서 적어보려고 한다.

뭐 일단 가장 괜찮다고 하는 방법으로 설치하였다.


NVM (Node version manager) 명령어 모음

nvm ls-remote

->설치 가능한 버전을 확인 


nvm install 1.1.1

-> 예를 들어서 1.1.1 버전을 설치하는 것


nvm install node

-> 버전 지정이 없으면 그냥 최신의 버전을 설치 한다.


nvm alias default 7.5.0

-> 터미널 시작시 사용할 버전을 설정


nvm uninstall x.x.x

->특정 버전을 삭제할 수 있다.


nvm use a.a.a

-> 특정 버전을 사용할 수 있다. 


기존에 설치된 버전에 문제가 있거나 버전 변경을 하기 위해서는 다른 버전을 설치하고 기존 버전을 삭제 해야 하는데 새로 설치된 버전을 사용하고 사용중이 아닌 기존 버전을 삭제할 수 있다.


1.1.1 버전 사용 중인데 3.3.3 버전으로 바꾸기 위해서는

nvm install 3.3.3

nvm use 3.3.3

nvm uninstall 1.1.1

하면 되는 식이다...


추가적으로 명령어를 더 알게되면 추가할 예정...


Node.js - Mac에 설치하는 방법 (Install on OS X)

위 포스팅처럼 AWS에서 구동되고 있는 우분투 리눅스에 Mean stack을 설정 하였는데, 가지고 있는 피씨는 맥북이라서 어떻게 환경을 구성 할지 고민을 하였다. ( Mean stack 에 대한 설명은 위 포스팅을 참고 하시면 됩니다.)


1. VirtualBox 가 윈도우 설치 때문에 깔려 있는데, 이것을 이용해서 우분투를 설치해서 똑같은 환경을 구성 할 것인가..

2. Mac에 필요한 파일을 다운로드 받아서 설치할 것인가...


일단 2번으로 진행 하기로 하였다. 이유는 찾아서 공부하는 과정에 두 가지 다 경험을 해보고 싶었고, 맥에 우분투를 설치하려면 아무래도 용량도 더 들기 때문이었다.


자 그럼 시작해 봅니다.


1. 아래 경로에서 필요한 파일을 다운 받고 ( node-v6.9.5.pkg ) 실행합니다.

-> https://nodejs.org/en/download/

그러면 /usr/local/bin 경로에 node & npm가 설치 됩니다.

/usr/local/bin/node

/usr/local/bin/npm


2. 설치가 잘 됐는지 Mac의 터미널을 열어서 버전을 확인해 봅니다.

Jasons-MacBook:~ Jason$ node -v

v6.9.5

Jasons-MacBook:~ Jason$ npm -v

3.10.10


하지만 맥도 우분투와 같은 방법으로 nvm을 통해서 설치하는 것을 추천한다.
nvm을 설치 후 환경 변수에 잡아 주면 다음에 터미널을 열었을 때, 실행이 가능하다

<nvm을 OS X의 환경 변수에 설정하는 법>

1. 홈 디렉토리에서 ls -a 을 하면 숨김 파일까지 보여지고,
2. vi .bash_profile 후 아래와 같이 입력 후 :wq 저장

export NVM_DIR="$HOME/.nvm"

[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" #This loads nvm

3. 터미널을 다시 열거나 source .bash_profile 입력 하면 적용 된다.


Express 설치방법

우선, Express 는 Node.js 를 위한 환경 설정을 담당하는 Web application framework 정도라고 생각하면 된다.

설치 방법은 그냥 express 를 설치할 수도 있고, 

vs

Express generator 를 설치할 수도 있다. generator 는 어플리케이션을 만드는데 필요한 JavaScript files, Jade templates, sub-directories 등을 포함하고 있다.


mongoDB - 리눅스에 설치하는 방법

아래 링크를 참고 하였음 ( 우분투의 APT(advanced packaging tool) 를 사용 하는 방법 )

https://docs.mongodb.com/manual/tutorial/install-mongodb-on-ubuntu/



1. sudo apt-key adv --keyserver hkp://keyserver.ubuntu.com:80 --recv 0C49F3730359A14518585931BC711F9BA15703C6

2. echo "deb [ arch=amd64,arm64 ] http://repo.mongodb.org/apt/ubuntu xenial/mongodb-org/3.4 multiverse" | sudo tee /etc/apt/sources.list.d/mongodb-org-3.4.list

3. sudo apt-get update

4. sudo apt-get install -y mongodb-org

5. sudo service mongod start

6. sservice mongod status


mongoDB - Mac에 설치하는 방법 (Install on OS X)

아래 링크에 가면  Homebrew라는 OX X 용 패키지 관리자 툴이 있는데, 이걸 설치한 후, 그것을 이용해서 mongoDB 를 설치하려고 한다. 사실 다른 패키지들 node등도 brew 를 통해서 설치할 수 있기도 하다.
http://brew.sh/
Homebrew를 Mac 에 설치 하는 방법은 아래 한 줄을 터미널에 입력하면 된다.
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

일단 brew가 실행이 되면 다음과 같은 순서로 진행 한다.

아래 링크를 참고 하였음

https://docs.mongodb.com/manual/tutorial/install-mongodb-on-os-x/


Jasons-MacBook:~ Jason$ brew list

Jasons-MacBook:~ Jason$ brew update

Already up-to-date.

Jasons-MacBook:~ Jason$ brew install mongodb

==> Installing dependencies for mongodb: openssl

==> Installing mongodb dependency: openssl

==> Downloading https://homebrew.bintray.com/bottles/openssl-1.0.2k.sierra.bottl

######################################################################## 100.0%

..... 중략


설치 완료 후 brew list로 brew를 통해서 설치된 패키지 리스트를 보면 mongodb 와 dependency를 가진 openssl이 설치 된 것을 볼 수 있다.


Jasons-MacBook:~ Jason$ brew list

mongodb openssl



Bower를 이용해서 AngularJs 설치하는 방법

Bower (https://bower.io/) 는 웹개발을 위한 패키지 매니저. Jquery 같은 자바스크립트 라이브러리를 설치하게 도와줌

여기서는 앵귤러JS를 설치해보려고 한다.


Bower 설치방법

$ npm install -g bower


자 이제 AngularJs 를 설치해 보자


Angular.Js 설치방법


1. bower 를 이용해 angular 를 설치한다.

bower install angular

2. 설치된 Angular 를 확인 한다.

bower list

아래 터미널 결과를 참고하시면 됩니다.

ubuntu@ip-172-31-28-247:~$ npm install -g bower

/home/ubuntu/.nvm/versions/node/v6.9.5/bin/bower -> /home/ubuntu/.nvm/versions/node/v6.9.5/lib/node_modules/bower/bin/bower

/home/ubuntu/.nvm/versions/node/v6.9.5/lib

└── bower@1.8.0 


ubuntu@ip-172-31-28-247:~$ bower


Usage:


    bower <command> [<args>] [<options>]

Commands:


    cache                   Manage bower cache

    help                    Display help information about Bower

    home                    Opens a package homepage into your favorite browser

    info                    Info of a particular package

    init                    Interactively create a bower.json file

    install                 Install a package locally

    link                    Symlink a package folder

    list                    List local packages - and possible updates

    login                   Authenticate with GitHub and store credentials

    lookup                  Look up a single package URL by name

    prune                   Removes local extraneous packages

    register                Register a package

    search                  Search for packages by name

    update                  Update a local package

    uninstall               Remove a local package

    unregister              Remove a package from the registry

    version                 Bump a package version

Options:


    -f, --force             Makes various commands more forceful

    -j, --json              Output consumable JSON

    -l, --loglevel          What level of logs to report

    -o, --offline           Do not hit the network

    -q, --quiet             Only output important information

    -s, --silent            Do not output anything, besides errors

    -V, --verbose           Makes output more verbose

    --allow-root            Allows running commands as root

    -v, --version           Output Bower version

    --no-color              Disable colors

See 'bower help <command>' for more information on a specific command.

ubuntu@ip-172-31-28-247:~$ bower list

ubuntu /home/ubuntu

ubuntu@ip-172-31-28-247:~$ bower install angular

bower not-cached    https://github.com/angular/bower-angular.git#*

bower resolve       https://github.com/angular/bower-angular.git#*

bower download      https://github.com/angular/bower-angular/archive/v1.6.2.tar.gz

bower extract       angular#* archive.tar.gz

bower resolved      https://github.com/angular/bower-angular.git#1.6.2

bower install       angular#1.6.2


angular#1.6.2 bower_components/angular

ubuntu@ip-172-31-28-247:~$ bower list

bower check-new     Checking for new versions of the project dependencies...

ubuntu /home/ubuntu

└── angular#1.6.2 extraneous

ubuntu@ip-172-31-28-247:~$ 



이 글은 현재 수정 중입니다.

문의 사항이나 의견이 있으신 분은 알려주세요^^


Posted by do Jason

Yesterday211
Today34
Total151,845
Statistics Graph

최근에 받은 트랙백

글 보관함