YEOMANとEC2で爆速MEAN環境セットアップ:最新版

YEOMANとEC2で爆速MEAN環境セットアップ:最新版

ソフトバンク・au・ドコモの方は、公式のオンラインショップを利用すれば頭金不要で通常のショップよりお得に購入できます。

お恥ずかしながら最近まで少しの開発言語しか触ってきませんでした。

アプリ:Objective-c(iOS)
WEB:javascript
サーバーサイド:PHP

これだけでも知っていればなんとかなるものですが、新しいサービスを作ろうと思った際にいろいろ悩んだ挙句、node.jsにチャレンジしてみようと思いました。

node.jsとYEOMAN

今回node.jsを使って開発したいものはとてもシンプルで
・ユーザー作成&ログイン管理
・ユーザー毎に投稿ができる
ものがあればいいと思っていました。

ただそれだけのものでも1から作るのはとても大変であります。
・HTML
・CSS
・サーバーサイド+DB(ユーザー/投稿管理)

仕事の合間にこれをやるのはとても面倒だぞと。
技術調査をしながら思っていたのですが、なにやらYEOMANなる便利そうなツールを発見しました。

「THE WEB’S SCAFFOLDING TOOL FOR MODERN WEBAPPS」
和訳するとおそらくこんな内容です。
「最近のめっちゃ洒落おつなWEBアプリ基盤を構築するツール」

とても便利そうです。

ちなみにYEOMANについてはこちらの記事でも紹介されております。

このツールで最近主流となっている開発環境

「MEAN stack」を「AWSのec2インスタンス」で構築してみます。
(MEAN・・・MongoDB Express AngularJS Node.js)

調査するにあたり色々な記事を漁っていたのですが、うまく動かないケースも多く、2015/5 現在 問題なくセットアップができる方法をご紹介いたします。

1.EC2インスタンス作成

  • AWSコンソールログイン
  • EC2クリック
  • 左メニューよりインスタンス
  • 「インスタンスの作成」クリック
    ※AmazonLinuxを選びました
  • セキュリティグループにて
    HTTP(80) カスタムTCPポート(3000,8080)追加
  • sshのkeyをダウンロード
  • sshのkeyのパーミッションを変更(chmod 400)

2.nvm node npmなどのインストール

※ログインしてもディレクトリの移動はしない前提で進めます
[sh] ssh -i testtest.pem ec2-user@[ec2のIPアドレス] (EC2にログイン)
sudo yum update
sudo yum install git gcc-c++ make openssl-devel

git clone git://github.com/creationix/nvm.git .nvm (nvmのインストール)
source ~/.nvm/nvm.sh(同じ内容を.bash_profileにも追記しております)
nvm ls-remote (nodeの最新版のチェック)
nvm install v0.12.3 (今回は0.12.3が最新版でしたが新しいものがあればそれを指定)
nvm alias default v0.12.3
[/sh]

3.Expressアプリケーションを作成(飛ばしてもOK)

[sh] sudo ln -s .nvm/versions/node/v0.12.3/bin/node /usr/bin/node
sudo ln -s .nvm/versions/node/v0.12.3/bin/npm /usr/bin/npm
↑これらをしないと次のコマンドでこけます
sudo npm install express-generator -g
express ricemaaaaaan
cd ricemaaaaaan
sudo npm install
node ./bin/www
[/sh] ここまでくればexpressがうまく入っているはずです。

image04

http://ec2インスタンスのIPアドレス:3000 をブラウザで入力

4.YEOMAN一式インストール

[sh]  (3.を行った場合は) cd ~
npm install -g yo
npm install -g bower
npm install -g grunt-cli
npm install -g generator-angular-fullstack
(YEOMANを構成する yo bower grunt をインストールしています)
[/sh]

5.MongoDBのインストール

[sh] echo “[MongoDB] name=MongoDB Repository
baseurl=http://downloads-distro.mongodb.org/repo/redhat/os/x86_64
gpgcheck=0
enabled=1” | sudo tee -a /etc/yum.repos.d/mongodb.repo
yum list | grep mongo
sudo yum install -y mongodb-org
sudo service mongod start(mongodbの起動)
[/sh]

6.angular-fullstackの用意

[sh] mkdir angularicemaaaaaaaan
cd angularicemaaaaaaaan
yo angular-fullstack
[/sh] ここでコマンドラインに紳士風おじさんが登場しいろいろとセットアップの内容を聞いてきます。
私は
 ・javascript
 ・html
 ・css
 ・残りはほとんどYesを選択
 ※この時mongodbが起動していないとこけるようですので
  5.を先に行うようにしました。
[sh] grunt build
[/sh]

7.YEOMANで作ったテンプレートを起動

[sh] cd dist/server
NODE_ENV=production node app.js
[/sh] http://ec2インスタンスのIPアドレス:8080 をブラウザに入力

image03
↑こんな感じの紳士風おじさんが登場すれば完了です!

8.foreverのインストール(オプション)

 7.の状態でもうまく起動するのですが、
 ctrl+cでストップしてしまいます。
 foreverをインストールして使うことによってバックグラウンドプロセスで動作するようになります。
[sh] 
sudo npm install forever -g
NODE_ENV=production forever start app.js
 (これでほったらかしで稼働しますね!!)
NODE_ENV=production forever stop app.js
 (これでストップします)
[/sh]

最後に・・・

angular管理画面を見てみると、すでにユーザー新規登録や削除ログインなども用意されていてとても便利ですね!!

次回も機会があればこの画面を少しずついじりながら、どれだけ簡単にWEBアプリが作れるかチャレンジしてみたいと思います!

ソフトバンク・au・ドコモの方は、公式のオンラインショップを利用すれば頭金不要で通常のショップよりお得に購入できます。

【週刊bitWave】(メルマガ)始めました!

登録はこちらからメールアドレスを入力してお申込みください。

ご登録いただいたメールアドレスは 【週刊bitWave】の更新情報の配信にのみ使用します。

個人情報の取扱いに関しては、「プライバシーポリシー」をご確認ください。解除はいつでもこちらから行うことが可能です。

あなたにおすすめ