Go to Qiita Advent Calendar 2024 Top
LoginSignup
18
19

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

@kobaboy

Vagrantで起動したCentOS6.5にMEAN環境を構築した

Last updated at Posted at 2015-04-26

#はじめに
前回の記事でVirtualBoxとVagrantをインストールし、
CentOS6.5の仮想環境を構築しました。
そして、共有フォルダ内に入れたHTMLソースファイルをWebで確認するところまでできました。

今回は、共有フォルダではなく新しくディレクトリを作成し、
そこにMEAN環境を構築していきます。

#1. MEANとはなにか
M: MongoDB（ドキュメント指向データベース）
E: Express（Node.js上で動作するMVCフレームワーク）
A: Angular.js（フロントエンドのJavaScript用MVWフレームワーク）
N: Node.js（サーバーサイドJavaScriptの実行環境）

・全てJavaScriptでWebアプリを開発することが可能
・フロントエンドからデータベースまで一貫してJSONフォーマットでデータのやりとりを行うことが可能

もっと詳しく

#2. 下準備
Windowsの場合はTera Termで接続しておく。
(Macの場合はvagrant sshで接続する。　suでpass:vagrant）
接続が出来たら、
[vagrant@vagrant-centos65 ~]$
と表示される。
##2-1. 新規ディレクトリの作成
まずルートディレクトリに移動します。
[vagrant@vagrant-centos65 ~]$ cd /

[vagrant@vagrant-centos65 /]$ ls
bin   dev  home  lib64       media  opt   root  selinux  sys  usr      var
boot  etc  lib   lost+found  mnt    proc  sbin  srv      tmp  vagrant

共有ディレクトリがある場所まで移動します。
[vagrant@vagrant-centos65 /]$ cd var/www/html

[vagrant@vagrant-centos65 html]$ ls
hello

このhelloという名前のディレクトリがwindows側との共有ディレクトリです。
ここにWebSampleという名前のディレクトリを作成します。
WebSampleにMEAN環境を構築していきます。

・新規ディレクトリの作成
[vagrant@vagrant-centos65 html]$ sudo mkdir WebSample
・WebSampleのディレクトリの所有者を変更します。"chown"の参考サイト
[vagrant@vagrant-centos65 html]$ sudo chown -R vagrant:vagrant WebSample
　これで、rootだったのだvagrantに変更されました。
・WebSampleのアクセス権を変更します。"chmod"の参考サイト
[vagrant@vagrant-centos65 html]$ sudo chmod -R 777 WebSample
　これで、drwxr-xr-xだったのがdrwxrwxrwxに変更されました。

「参考」

[vagrant@vagrant-centos65 html]$ ls -la
total 12
drwxr-xr-x 4 root    root    4096 Apr 26 11:47 .
drwxr-xr-x 6 root    root    4096 Apr 25 09:02 ..
drwxrwxrwx 1 vagrant vagrant    0 Apr 25 09:00 hello
drwxrwxrwx 6 vagrant vagrant 4096 Apr 25 16:58 WebSample

WebSampleに移動します。
[vagrant@vagrant-centos65 html]$ cd WebSample

##2-2. vimとepelを有効化
[vagrant@vagrant-centos65 WebSample]$ sudo yum -y install vim epel-release
##2-3. 開発ツールを一括インストール、更新

[vagrant@vagrant-centos65 WebSample]$ sudo yum -y groupinstall "Development Tools"
[vagrant@vagrant-centos65 WebSample]$ sudo yum -y update

#3. インストール
##3-1. Node.jsとnpmのインストール
epelレポジトリからインストール

[vagrant@vagrant-centos65 WebSample]$ sudo yum -y install --enablerepo=epel nodejs npm
[vagrant@vagrant-centos65 WebSample]$ sudo rm -rf /usr/lib/node_modules/inherits
[vagrant@vagrant-centos65 WebSample]$ sudo mv /usr/lib/node_modules/inherits@2 /usr/lib/node_modules/inherits

##3-2. MongoDBのインストール
MongoDBレポジトリの追加
[vagrant@vagrant-centos65 WebSample]$ sudo vim /etc/yum.repos.d/mongodb.repo
下記を追加する。
（vimを使用しているため、まずaを押してインサートモードに移る。
保存して終了するときは、Escを押してコマンドモードに移ってから**:wq**を押す。）

/etc/yum.repos.d/mongodb.repo
[mongodb]
name=MongoDB Repository
baseurl=http://downloads-distro.mongodb.org/repo/redhat/os/x86_64/
gpgcheck=0
enabled=1

インストール・起動・自動起動

[vagrant@vagrant-centos65 WebSample]$ sudo yum -y install mongodb-org
[vagrant@vagrant-centos65 WebSample]$ sudo service mongod start
[vagrant@vagrant-centos65 WebSample]$ sudo chkconfig mongod on

##3-3. bowerのインストール
[vagrant@vagrant-centos65 WebSample]$ sudo npm install -g bower
##3-4. gruntのインストール
[vagrant@vagrant-centos65 WebSample]$ sudo npm install -g grunt-cli

##3-5. ここでとりあえずvagrantを再起動します
①Tera Termを閉じます
[vagrant@vagrant-centos65 WebSample]$ exit
②Vagrantを再起動します
C:\Users\keisuke\centos> vagrant reload
③接続します
Teta Termを開いてアクセスします (Macはvagrant sshでアクセスしsuでpass:vagrant)
④WebSampleまで移動する
[vagrant@vagrant-centos65 /]$ cd var/www/html/WebSample
#4. YEOMAN（ヨーマン）のインストール
この項目は、インストールに時間がかかるためコーヒーでも飲みながらのんびりとやったほうが良いです。
##4-1. インストール

[vagrant@vagrant-centos65 WebSample]$ sudo yum install libpng-devel
[vagrant@vagrant-centos65 WebSample]$ sudo npm install -g yo

##4-2. Angular-Fullstackのインストール

[vagrant@vagrant-centos65 WebSample]$ sudo npm install -g generator-angular-fullstack-jp

##4-3. YEOMAN実行

[vagrant@vagrant-centos65 WebSample]$ yo

[vagrant@vagrant-centos65 WebSample]$ yo
? 'Allo! What would you like to do? (Use arrow keys)
  Run a generator
? Angular Fullstack Jp
  qqqqqqqqqqqqqq
  Update your generators
  Install a generator
  Find some help
  Get me out of here!
  qqqqqqqqqqqqqq

[vagrant@vagrant-centos65 html]$ yo
? 'Allo! What would you like to do? Angular Fullstack Jp

Make sure you are in the directory you want to scaffold into.
This generator can also be run with: yo angular-fullstack-jp


     _-----_
    |       |
    |--(o)--|   .--------------------------.
   `---------´  |    Welcome to Yeoman,    |
    ( _´U`_ )   |   ladies and gentlemen!  |
    /___A___\   '__________________________'
     |  ~  |
   __'.___.'__
 ´   `  |° ´ Y `

Out of the box I create an AngularJS app with an Express server.

# Client

? What would you like to write scripts with? (Use arrow keys)
? JavaScript
  CoffeeScript

? What would you like to write markup with? (Use arrow keys)
? HTML
  Jade

? What would you like to write stylesheets with?
? CSS
  Sass
  Stylus
  Less

? What Angular router would you like to use? (Use arrow keys)
  ngRoute
? uiRouter

その後もYやYESなど自分の好きなように選んでいき雛型を生成します。

##4-4. Gruntfileの変更
下記を実行してGruntfileを変更する

[vagrant@vagrant-centos65 WebSample]$ sudo vim Gruntfile.js

vimで開いているとき、
539行目に書かれているopenをコメントアウトする。（下記を参考）

Gruntfile.js
if (target === 'debug') {
      return grunt.task.run([
        'clean:server',
        'env:all',
        'concurrent:server',
        'injector',
        'wiredep',
        'autoprefixer',
        'concurrent:debug'
      ]);
    }

    grunt.task.run([
      'clean:server',
      'env:all',
      'concurrent:server',
      'injector',
      'wiredep',
      'autoprefixer',
      'express:dev',
      'wait',
  //    'open', ←コメントアウト（539行目）
      'watch'
    ]);
  });

#5. サーバの起動
ビルド

[vagrant@vagrant-centos65 WebSample]$ grunt serve

ビルド後にアクセス
http://192.168.33.10:9000/
c3c7c355-4719-8d3f-8825-618203590c86.png
上記の画面が表示されたら、
無事MEAN環境が構築出来ました。

切断方法
ctrl+cで終了する

現在起動しているサーバを見る
ps aux | grep grun

Tera Termの"新しい接続"でターミナルを複数使用して開発していく。
#おわりに
これでweb開発を行う環境を構築することができました！
今後、Web開発を行っていくために、
server側とclient側の連携などについても理解してまとめていきたいです。

#参考サイト
「【Windows7(64bit)】VirtualBox+VagrantでCentOSの仮想環境構築」
URL：http://qiita.com/kobaboi/items/5469523a2b0bf8b61e8e
「MEAN環境をVagrantで構築してみた」
URL：http://qiita.com/kurun/items/d957e65a084019f9f610
「CentOS6.5(64bit)にMeanを入れてみた」
URL：http://gaku3601.hatenablog.com/entry/2014/12/07/210911
「YEOMANを使ってMEAN(MongoDB+Express+AngularJS+Node.js)を作成しよう」
URL：http://blog.chat.ac/yeoman%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%A6meanmongodbexpressangularjsnode-js%E3%82%92%E4%BD%9C%E6%88%90%E3%81%97%E3%82%88%E3%81%86/

18
19
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
18
19

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?