macbookproを新しく購入し、前回挫折したmean環境構築に久しぶりに挑戦しました。
今回はなぜかうまく行きました。だけどもまた落とし穴が…
前回と若干違う行程なので、この記事で触れてないとこでエラーが出た方は下の記事を参考にして見てください。
nodejsのインストール
上の記事でこのmacにもインストールしようとしたらエラーが出たので、違うやり方を紹介します。
以下の記事の通り、nodejsをインストールしてください。
node.jsをインストールしたら使えるように設定して行きます。
xの部分で先ほどインストールしたnodejsのバージョンを書き込んでください。
次に実行パスを通します。
|
$ echo 'export PATH=$PATH:/Users/xxxxx/.nodebrew/current/bin' >> ~/.bashrc |
xxxxxはUserのHomeDir名を入力してください
次に「.bash_profile」に下記を記述します。
|
if [ -f ~/.bashrc ] ; then . ~/.bashrc fi |
そしてターミナルで以下のコマンドを実行しそれぞれバージョンが表示されればおっけーです。
yoemanでmean構築
ここらは前回同様以下のサイトを参考にyoeman,gulp,grunt,bowerをインストールします。
唯一違うのはyoemanの「Angular-fullstack」の公式チュートリアルにある通りgruntではなく「gulp」で実行したところです。
そうすると、勝手にブラウザが動き以下のように正常に起動しました。

herokuにデプロイしようとしたら、
ここからherokuにデプロイしようとこちらのサイト(herokuの公式サイト)に従い、コマンドを実行しました。
インストールしたのちに以下のコマンドを実行していくとデプロイされるはずなのですが、自分はできませんでした。
|
heroku login yo angular-fullstack:heroku cd dist heroku addons:add mongolab grunt grunt buildcontrol:heroku |
heroku login の後に、ユーザー名とパスワードが聞かれますが、自分のherokuアカウントで使っているものを入力してください。
yo angular-fullstack:heroku の後に、アプリケーション名を聞かれますが適当にいれてください。ここで決めた名前がアプリのurl名に使われます。詳細は上でも紹介した「paiza開発日誌」さんを見てください。
そして「そもそも自分さっきgruntじゃなくてgulp使ったじゃん」ということに気づき
|
grunt grunt buildcontrol:heroku |
の部分を
|
gulp gulp buildcontrol:heroku |
にしようとgulpを入力するも時すでに遅し。よくわからないエラーがorz
そっからはもう地獄のようでした。
一回herokuへのデプロイは忘れて、雛形とりあえず改造してオリジナルのアプリをローカルで開発しようと躍起になり、
「gulp serve」と入力するも
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25
|
/Users/shun/yoeman/fullstack/webpack.make.js:252 new ForkCheckerPlugin(), ^ TypeError: ForkCheckerPlugin is not a constructor at makeWebpackConfig (/Users/shun/yoeman/fullstack/webpack.make.js:252:9) at Object.exports.default (/Users/shun/yoeman/fullstack/server/config/express.js:87:27) at Object.<anonymous> (/Users/shun/yoeman/fullstack/server/app.js:29:1) at Module._compile (module.js:624:30) at loader (/Users/shun/yoeman/fullstack/node_modules/babel-register/lib/node.js:144:5) at Object.require.extensions.(anonymous function) [as .js] (/Users/shun/yoeman/fullstack/node_modules/babel-register/lib/node.js:154:7) at Module.load (module.js:545:32) at tryModuleLoad (module.js:508:12) at Function.Module._load (module.js:500:3) at Module.require (module.js:568:17) at require (internal/module.js:11:18) at Object.<anonymous> (/Users/shun/yoeman/fullstack/server/index.js:12:28) at Module._compile (module.js:624:30) at Object.Module._extensions..js (module.js:635:10) at Module.load (module.js:545:32) at tryModuleLoad (module.js:508:12) at Function.Module._load (module.js:500:3) at Function.Module.runMain (module.js:665:10) at startup (bootstrap_node.js:201:16) at bootstrap_node.js:626:3 [nodemon] app crashed - waiting for file changes before starting... |
やべぇデプロイどころかローカルでも普通に起動しなくなった笑
さっき(herokuデプロイするためのインストールをした時)色々コピペでわけわからんコマンド実行しまくったのが、今になって帰ってきた笑
ここには書きませんが、途中パスが無効になってgulpとyoコマンドが使えなくなったり…
本当に…

3時間くらいこんな感じ笑
普通に動いていれば、今頃api使って色々遊んでいたかもしれないのに笑
ということでyoemanでのmean環境構築は今回もお預け。
ネットにはgulpとgruntでサーバーを起動する方法がありました。その情報が交錯しているのが今回の不祥事の原因だと考察します。
自分はgulpを使っているのでそれを考慮し、しっかり情報を見極めていればこんなことになっていなかったかもしれません。
<追記>
別ディレクトリに再度yoemanやらなにやらを下記手順でインストールしなおしたらうまく行きました!!!
|
$ npm install -g yo bower grunt-cli gulp $ npm install -g generator-angular-fullstack $ mkdir sample $ cd sample $ yo angular-fullstack sample $ npm install -g npm-check-updates $ npm-check-updates -u $ npm install $ gulp serve |
herokuへのデプロイは一回置いといて遊んで見ようと思います。
スポンサードリンク