yoemanのJhipsterでwebappの雛形作成してみた

 

Yoemanジェネレータの一つ「Jhipster」でwebappの雛形を作成したのでメモしときます。

公式ドキュメントを参考にしました。かなり密度が濃く英語なので疲れますがその分、有益な情報が詰まっています。

 

前準備

  1. npmを最新版にアップデートします

2. yoeman,bower,gulp-cli,をインストール。すでにインストールされてる場合はいりません。

3. Jhipsterをインストール

 

JHipsterの起動

適当にディレクトリを作成し、以下のコマンドでyoemanを起動する。

その後に「jhispter」を選択する。

そうすると全部で16個質問されるが、雛形を作成する程度なら適当で問題ないと思う。

ついでに自分は以下の設定。

ついでに選択肢については公式ドキュメントの下の部分を見ると良い。

インストールが終了すると以下の文字がターミナルに現れるはず

言われるがままgulp install を実行し、そのあとに

でサーバー起動すると、勝手にブラウザが立ち上がり以下の画面に。

だがしかし…

雛形完成。試しにadminとuser でログインを試みるも

ログイン失敗と言われる。

デフォルトでadminとuserが用意されていると公式ドキュメントに書いてあるので、初期設定は関係ないはず。

Mavenというものを使ってサーバーを起動して見ることにした。「./mvnw spring-boot:run」で実行できるらしいが、JavaのJDKがないと動かないと言われたので大人しくこちらでインストール

http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html

ダウンロードファイルをダブルクリックすれば、勝手にインストーラーが起動するはず。

そして下記コマンド実行(かなり時間かかる)

下記画像(公式ドキュメント)にある通り、http://localhost:8080 に接続して見るも接続できない。そもそも『Maven』とは一体…

もう一度、gulp serveを実行し、ログインを試みるも結果はなにも変わらず…

何が原因なのかわからないので、解明に時間がかかりそうですがわかり次第、更新します。

 



スポンサードリンク

記事が役に立ったらシェア!

yoemanでmean環境構築がまたうまくいかねぇorz(gulpとgruntどう違うんですかね)

 

macbookproを新しく購入し、前回挫折したmean環境構築に久しぶりに挑戦しました。

今回はなぜかうまく行きました。だけどもまた落とし穴が…

前回と若干違う行程なので、この記事で触れてないとこでエラーが出た方は下の記事を参考にして見てください。

nodejsのインストール

上の記事でこのmacにもインストールしようとしたらエラーが出たので、違うやり方を紹介します。

以下の記事の通り、nodejsをインストールしてください。

 

node.jsをインストールしたら使えるように設定して行きます。

xの部分で先ほどインストールしたnodejsのバージョンを書き込んでください。

次に実行パスを通します。

xxxxxはUserのHomeDir名を入力してください

次に「.bash_profile」に下記を記述します。

そしてターミナルで以下のコマンドを実行しそれぞれバージョンが表示されればおっけーです。

yoemanでmean構築

ここらは前回同様以下のサイトを参考にyoeman,gulp,grunt,bowerをインストールします。

 

唯一違うのはyoemanの「Angular-fullstack」の公式チュートリアルにある通りgruntではなく「gulp」で実行したところです。

そうすると、勝手にブラウザが動き以下のように正常に起動しました。

 

herokuにデプロイしようとしたら、

ここからherokuにデプロイしようとこちらのサイト(herokuの公式サイト)に従い、コマンドを実行しました。

 

インストールしたのちに以下のコマンドを実行していくとデプロイされるはずなのですが、自分はできませんでした。

heroku login の後に、ユーザー名とパスワードが聞かれますが、自分のherokuアカウントで使っているものを入力してください。

yo angular-fullstack:heroku の後に、アプリケーション名を聞かれますが適当にいれてください。ここで決めた名前がアプリのurl名に使われます。詳細は上でも紹介した「paiza開発日誌」さんを見てください。

そして「そもそも自分さっきgruntじゃなくてgulp使ったじゃん」ということに気づき

の部分を

にしようとgulpを入力するも時すでに遅し。よくわからないエラーがorz

そっからはもう地獄のようでした。

一回herokuへのデプロイは忘れて、雛形とりあえず改造してオリジナルのアプリをローカルで開発しようと躍起になり、

「gulp serve」と入力するも

やべぇデプロイどころかローカルでも普通に起動しなくなった笑

さっき(herokuデプロイするためのインストールをした時)色々コピペでわけわからんコマンド実行しまくったのが、今になって帰ってきた笑

ここには書きませんが、途中パスが無効になってgulpとyoコマンドが使えなくなったり…

本当に…

 

3時間くらいこんな感じ笑

普通に動いていれば、今頃api使って色々遊んでいたかもしれないのに笑


ということでyoemanでのmean環境構築は今回もお預け。

 

ネットにはgulpとgruntでサーバーを起動する方法がありました。その情報が交錯しているのが今回の不祥事の原因だと考察します。

自分はgulpを使っているのでそれを考慮し、しっかり情報を見極めていればこんなことになっていなかったかもしれません。


<追記>

別ディレクトリに再度yoemanやらなにやらを下記手順でインストールしなおしたらうまく行きました!!!

herokuへのデプロイは一回置いといて遊んで見ようと思います。

 



スポンサードリンク

記事が役に立ったらシェア!

MEAN(Mongodb,Express,Angular,Node)スタック環境構築を試そう。だがしかし…



スポンサードリンク

MEAN スタックを使ってwebアプリを開発していこうと思います。なお今回対象とするOSはmacosです。

今回は手始めとして、MEANスタックの開発環境構築から。

これがまた長かった笑

1.node.jsのインストール

nodeのインストールにはhomebrewを用います。homebrewはあらかじめインストールしておいてください。

まずは、nodebrewをインストールします。

いろんなサイト見るとスムーズに行かれてる方が多いのですが、自分の場合はここでエラーが出ました。

nodebrew install エラー とググると、どうやらここでつまづく方もいるようで少し安心。

以下のコマンドで解決。

これを設定しないとhomebrewに対して、古いバージョンのnodebrewをインストールしてしまうらしい。

ここはこのサイトを参考にしました。

もう一回

でうまくいきました。

ついでにインストールがうまくいったかの確認は以下のコマンドでバージョンを確認できればOK

と先ほどインストールしたバージョンが表示されれば問題ないです。

次に、以下のコマンド

これで勝手に最新版をインストールしてくれます。違うバージョンをインストールしたい場合は、latestの部分をv.7.1.0みたいに指定すれば問題ないです。

次にインストールしたnode.jsのバージョンを有効にします。

Xの部分に自分がインストールしたバージョンを入れてください。

でcurrentが上で指定したバージョンになって入ればOK

次に実行パスを通します。

~/.bash_profileも下記のように変更してください(すでに下のようになっている場合もあります)。

ここまで、終わったらターミナルを再起動して、nodeのバージョンを再確認してみてください。先ほど設定したバージョンなら問題ないです。

これでnode.jsのインストールは終わりです。


スポンサードリンク

2. AngularJSのインストール

まず、angularjsに必要なyeoman等をインストールします。

次にangularjsをインストール(少し時間がかかります)

こんだけ!

3, MongoDBのインストール

上の三つのコマンドを順次実行してください。

これが終了したら、Mongodbが正常に動くか確認してください。

下記のコマンドで、起動

しかし以下のようなエラー。

色々調べると、権限が設定されていないということにたどり着く。

以下のコマンドで権限を設定し直します。

これでもう一回先ほどの起動コマンド。

うまく起動できました。

Mongodbを終了させるときはControl+cでオッケーです。



スポンサードリンク

4, プロジェクトの作成

必要なものはインストールし終わりましたので、いよいよプロジェクトを作成していきます。

適当にディレクトリを作成し、そのディレクトリに移動してください。

以下のコマンドでsプロジェクトを作成(初めての場合、かなり時間がかかります。)

色々と聞かれますが、全てエンターで問題ないです。

angularjs-fullstackのバージョンをアップデートします。

三つ目のコマンドは多少時間がかかります。

5. プロジェクトの起動

これで勝手にサーバーが立ち上がり、デフォルトのUIが表示されるはずが、

はい?ここにきて問題発生。

有効なGruntfleがないよと言われているが、Gruntfileって何ですか?って感じです。

もう少しでプロジェクトの開発が始められそうなんですが、今回は疲れたのでここまで。

原因がわかったらまた更新します。

 

 

記事が役に立ったらシェア!