在使用Vagrant启动的CentOS6.5上构建MEAN环境

2 年 ago
新, 韵
4 minutes

首先在之前的文章中，我們安裝了VirtualBox和Vagrant，並成功建立了CentOS6.5的虛擬環境。然後，我們還成功將HTML源代碼文件放入共享文件夾，並可以在網頁上進行確認。

这次我们不使用共享文件夹，而是创建一个新的目录，
在那里构建MEAN环境。

1. “MEAN” 是什么意思？MongoDB（文档导向型数据库）
Express（运行在Node.js上的MVC框架）
Angular.js（前端JavaScript的MVW框架）
Node.js（用于服务器端JavaScript执行的环境）

用JavaScript可以开发所有的Web应用程序。从前端到数据库，都可以使用JSON格式进行数据交互。

更详细地。

2. 准备好如果是Windows操作系统，则需要使用Tera Term进行连接。（如果是Mac操作系统，则使用vagrant ssh进行连接，通过su命令输入密码：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

启用vim和epel.[vagrant@vagrant-centos65 WebSample]$ 以超级用户身份(sudo)安装(vim)和(epel-release)软件包，请不要询问(yum -y)。

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编辑器，首先按下”i”进入插入模式。
保存并退出时，按下Esc进入命令模式，然后输入”:wq”。）

[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 全局安装 bower npm install

3-4. 安装grunt[vagrant@vagrant-centos65 WebSample]$ 以 root 用户身份运行 npm install -g grunt-cli

3-5. 在这里暂时重启vagrant。①关闭Tera Term。
[vagrant@vagrant-centos65 WebSample]$ exit

②重新启动Vagrant。
C:\Users\keisuke\centos> vagrant reload

③连接。
打开Tera Term并访问。
（使用Mac时通过vagrant ssh进行访问，然后使用su命令输入密码：vagrant）

④进入WebSample目录。
[vagrant@vagrant-centos65 /]$ cd var/www/html/WebSample

4. 安装YEOMAN（ヨーマン）。由于安装需要花费时间，最好在喝咖啡的同时悠闲地完成此项任务。

安装

[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”注释掉（请参考下面）。

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. 服务器的启动 fú建造

[vagrant@vagrant-centos65 WebSample]$ grunt serve
c3c7c355-4719-8d3f-8825-618203590c86.png通过按下Ctrl+C来结束/中止

查看正在运行的服务器
ps aux | grep grun

在Tera Term的”新连接”选项中，使用多个终端进行开发。

最后我已经成功搭建了进行Web开发的环境！
为了今后能够进行Web开发，
我也希望能够理解并总结服务器端和客户端之间的协作等内容。

请参考以下网站
「【Windows7(64bit)】利用VirtualBox和Vagrant建立CentOS虚拟环境」
URL：http://qiita.com/kobaboi/items/5469523a2b0bf8b61e8e
「尝试使用Vagrant建立MEAN环境」
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/

bannerAds