ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • MEAN stack AWS 우분투 / Mac 설치 방법
    개발 2017.02.11 16:14

    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:~$ 



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

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


    댓글 2

    • moosekiss 2017.10.07 14:10

      흥미로워요 호주이민 게시글을 통해서 알게됬네요
      자주 들릴게요 포스팅 기대하면서
      저도 목표가 해외취업이라서요~

© do Jason