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

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

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

アプリ: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などのインストール

※ログインしてもディレクトリの移動はしない前提で進めます

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

ここまでくればexpressがうまく入っているはずです。

image04

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

4.YEOMAN一式インストール

5.MongoDBのインストール

6.angular-fullstackの用意

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

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

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

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

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

 7.の状態でもうまく起動するのですが、
 ctrl+cでストップしてしまいます。
 foreverをインストールして使うことによってバックグラウンドプロセスで動作するようになります。

最後に・・・

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

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

コメント