スポンサードリンク
MEAN スタックを使ってwebアプリを開発していこうと思います。なお今回対象とするOSはmacosです。
今回は手始めとして、MEANスタックの開発環境構築から。
これがまた長かった笑
1.node.jsのインストール
nodeのインストールにはhomebrewを用います。homebrewはあらかじめインストールしておいてください。
まずは、nodebrewをインストールします。
いろんなサイト見るとスムーズに行かれてる方が多いのですが、自分の場合はここでエラーが出ました。
nodebrew install エラー とググると、どうやらここでつまづく方もいるようで少し安心。
以下のコマンドで解決。
|
curl -L http://git.io/nodebrew | perl - setup |
これを設定しないとhomebrewに対して、古いバージョンのnodebrewをインストールしてしまうらしい。
ここはこのサイトを参考にしました。
もう一回
でうまくいきました。
ついでにインストールがうまくいったかの確認は以下のコマンドでバージョンを確認できればOK
と先ほどインストールしたバージョンが表示されれば問題ないです。
次に、以下のコマンド
|
$ nodebrew install-binary latest |
これで勝手に最新版をインストールしてくれます。違うバージョンをインストールしたい場合は、latestの部分をv.7.1.0みたいに指定すれば問題ないです。
次にインストールしたnode.jsのバージョンを有効にします。
Xの部分に自分がインストールしたバージョンを入れてください。
でcurrentが上で指定したバージョンになって入ればOK
|
$ nodebrew list v8.1.1 current: v8.1.1 |
次に実行パスを通します。
|
$ echo 'export PATH=$PATH:/Users/xxxxx/.nodebrew/current/bin' >> ~/.bashrc |
~/.bash_profileも下記のように変更してください(すでに下のようになっている場合もあります)。
|
if [ -f ~/.bashrc ]; then . ~/.bashrc fi |
ここまで、終わったらターミナルを再起動して、nodeのバージョンを再確認してみてください。先ほど設定したバージョンなら問題ないです。
これでnode.jsのインストールは終わりです。
スポンサードリンク
2. AngularJSのインストール
まず、angularjsに必要なyeoman等をインストールします。
|
% sudo npm install -g yo bower grunt-cli gulp |
次にangularjsをインストール(少し時間がかかります)
|
% sudo npm install -g generator-angular-fullstack |
こんだけ!
3, MongoDBのインストール
|
% brew update % brew install mongodb % ln -fs /usr/local/opt/mongodb/homebrew.mxcl.mongodb.plist ~/Library/LaunchAgents/ launchctl load ~/Library/LaunchAgents/homebrew.mxcl.mongodb.plist |
上の三つのコマンドを順次実行してください。
これが終了したら、Mongodbが正常に動くか確認してください。
下記のコマンドで、起動
しかし以下のようなエラー。
|
MongoDB shell version v3.4.4 connecting to: mongodb://127.0.0.1:27017 2017-06-14T19:00:09.373+0900 W NETWORK [thread1] Failed to connect to 127.0.0.1:27017 after 5000ms milliseconds, giving up. 2017-06-14T19:00:09.374+0900 E QUERY [thread1] Error: couldn't connect to server 127.0.0.1:27017, connection attempt failed : connect@src/mongo/shell/mongo.js:237:13 @(connect):1:6 exception: connect failed |
色々調べると、権限が設定されていないということにたどり着く。
以下のコマンドで権限を設定し直します。
|
$ sudo chown -R mongod:mongod /var/lib/mongo |
これでもう一回先ほどの起動コマンド。
|
/usr/local/bin/mongo MongoDB shell version v3.4.4 connecting to: mongodb://127.0.0.1:27017 MongoDB server version: 3.4.4 Welcome to the MongoDB shell. For interactive help, type "help". For more comprehensive documentation, see http://docs.mongodb.org/ Questions? Try the support group http://groups.google.com/group/mongodb-user Server has startup warnings: 2017-06-14T19:00:06.242+0900 I CONTROL [initandlisten] 2017-06-14T19:00:06.286+0900 I CONTROL [initandlisten] ** WARNING: Access control is not enabled for the database. 2017-06-14T19:00:06.286+0900 I CONTROL [initandlisten] ** Read and write access to data and configuration is unrestricted. 2017-06-14T19:00:06.286+0900 I CONTROL [initandlisten] > |
うまく起動できました。
Mongodbを終了させるときはControl+cでオッケーです。
スポンサードリンク
4, プロジェクトの作成
必要なものはインストールし終わりましたので、いよいよプロジェクトを作成していきます。
適当にディレクトリを作成し、そのディレクトリに移動してください。
以下のコマンドでsプロジェクトを作成(初めての場合、かなり時間がかかります。)
|
yo angular-fullstack sample |
色々と聞かれますが、全てエンターで問題ないです。
angularjs-fullstackのバージョンをアップデートします。
|
% sudo npm install -g npm-check-updates % npm-check-updates -u % npm install |
三つ目のコマンドは多少時間がかかります。
5. プロジェクトの起動
これで勝手にサーバーが立ち上がり、デフォルトのUIが表示されるはずが、
|
$ grunt serve A valid Gruntfile could not be found. Please see the getting started guide for more information on how to configure grunt: http://gruntjs.com/getting-started Fatal error: Unable to find Gruntfile. |
はい?ここにきて問題発生。
有効なGruntfleがないよと言われているが、Gruntfileって何ですか?って感じです。
もう少しでプロジェクトの開発が始められそうなんですが、今回は疲れたのでここまで。
原因がわかったらまた更新します。