MacにMEAN.IOを入れてTwitterのOAuthログインできるWEBアプリの作成まで
Dockerで開発するわけにもいかないので、ローカルで開発できるようにします。
MEANに必要な全てをインストールしていきます。
インストール
MongoDB
brew update
brew install mongodb
初期状態でdbpathは/usr/local/var/mongodb、
logディレクトリは/usr/local/var/log/mongodbになってて、
文句は無いのでこのままにしておきます。
起動自動化
Linuxにはchkconfigがありますが、Macにはlaunchctlがある模様。
MacでMongoDBをDaemon化して自動起動させる - Meltdown Countdown rev.
ここのサイトさんを参考に以下のコマンドを実行して、
org.mongo.mongod.plistファイルを作成。
sudo curl https://gist.githubusercontent.com/marutanm/976445/raw/org.mongo.mongod.plist | sudo tee /Library/LaunchDaemons/org.mongo.mongod.plist > /dev/null
ラベルはmongodとかに変えてもいいかもしれません。
そしてとりあえず起動。
launchctl load /Library/LaunchDaemons/org.mongo.mongod.plist
Node.js
普通に公式でダウンロードしたパッケージを実行すれば良いです。
パーミッションの設定
このままだとNode.jsのパッケージマネージャであるnpmを使う際に、
毎回sudoを付けなくてはいけないので、以下を実行。
sudo chown -R `whoami` ~/.npm sudo chown -R `whoami` /usr/local/lib/node_modules
Homebrewとかもsudo付けないのでこちらの方が落ち着きます。
Express
npm install -g express
gオプションを付けると全てのプロジェクトでパッケージを使えるように
グローバルインストールしてくれる。
Bower
Twitter社が作ったフロントエンド用のパッケージマネージャらしいです。
これも後で使うのでインストール。
npm install -g bower
Grunt
npm install -g grunt-cli
MEAN
いよいよ本体です。素直にトップページに書かれているコマンドを打ちます。(sudoは除いて)
npm install -g mean-cli
これで必要なものは全てインストールされました。
アプリの用意
雛形アプリの作成
アプリは以下のコマンドで簡単にディレクトリ配下に作成できます。
mean init yourNewApp
依存モジュールのインストール
先ほど作ったアプリのルートディレクトリに潜り込んで、
依存モジュールをインストールします。
cd ./yourNewApp npm install
BowerによるCSSパッケージ等のダウンロード
同じディレクトリで以下を実行。
bower install --allow -root
起動
アプリのルートディレクトリで単純に以下。
grunt -f
自分の場合fオプションが無いと実行できませんでした。
これで、晴れてhttp://localhost:3000でアクセスできます。
起動オプション
起動するポート番号なんかはどこで設定するのだろうと調べたら、
config/env/all.jsにprocess.env.PORTという変数を発見。
Node.js の起動オプション、環境変数、npm start の話 - Block Rockin’ Codes
このサイトさんに以下のように書かれていました。
オプションとは違いますが、起動時にあわせて使います。 基本は、 xxx=yyy という変数をつけて実行すると、ランタイムからはprocess.env.xxx で yyy の値を文字列値として受け取れることを利用しています。 慣習的に NODE_XXX という変数が使われます。例えば独自変数 NODE_MY_FLG を指定したい場合。
$ NODE_MY_FLG=true node server.jsこのように指定できます。
よって、ポート番号や起動する環境を指定したいときは以下のように書きます。
NODE_ENV=test PORT=8080 grunt -f
Twitter-OAuthの設定
CONSUMER KEY・SECRETの取得
Application Managementでアプリを作成しましょう。
- Callback URLには
http://127.0.0.1:3000/auth/twitter/callbackと書いてください。- localhostじゃない理由は、それだと登録できないからです。
- Consumer KeyとConsumer Secretはメモしましょう。
設定ファイルに書き込み
config/env/development.jsを書き換えましょう。
twitter: { clientID: 'YOUR_CONSUMER_KEY', clientSecret: 'YOUR_CONSUMER_SECRET', callbackURL: 'http://127.0.0.1:3000/auth/twitter/callback' },
これで後はhttp://127.0.0.1:3000にアクセスするだけです。以上で終了です。
