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アプリが作れるかチャレンジしてみたいと思います!

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

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

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

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

あなたにおすすめ

仮想環境で『Ansible』を使ってサーバ構築... 最近、サーバ構築を実施する必要がありました。 まずは仮想環境を作り、サーバ構築を……と思ったのですが、私はインフラ周りの経験が浅く、色々困ったことが頻出してしまいました。 今回の記事では、私と同じような “サーバ構築ビギナー” ...
「Puppeteer」+「LINE Notify」でサイトの更新時のみ通知を受け取ってみる... 前回の記事では閲覧数向上が期待できそうなキーワードの「Puppeteer」と「LINE Notify」のそれぞれの解説、およびサイトのサムネイルを通知してみるといった試みを実施してみました。 <bitWave関連記事『「Puppeteer...
Vue.jsで社用登録データフォームを作ってみた... 今回は社内用データ登録フォームを作ろうと思い、初めて「Vue.js」を試してみることにしました。 「Vue.js」は使い方、書き方も簡単で、初心者もすぐ活用できるjsだと思いましたので、この場を借りて共有させていただきます。 なお、...
「Puppeteer」+「LINE Notify」でサイトのサムネイルを通知してみる... 今回は記事閲覧数が期待できそうなキーワードを用いて、ブログを書いてみようかと思います。 そのキーワードとは…… 「Puppeteer」と「LINE Notify」。 「Puppeteer」って何? 「LINE Notify」って...