MEANのプロジェクトをAngular4でCMS作成する⑥

Node.jsのディレクトリの方にmodels, routesっというフォルダを追加する。

そして、それぞれにpage.jsを作成する。

Cursor_and_workspace5____Documents_workspace5__-_____nodecmsproject_routes_page_js__workspace5_

そして、modelフォルダのpage.jsにはDBの定義を作成

routesフォルダにはのpage.jsには

app.jsは以下のような感じ

 

 

↓のコードを追加した。

// set routes
var pages = require(“./routes/pages.js”);
app.use(“/pages”, pages);

 

 

適当にMongoDBにレコードを追加してみる。

nodecmsproject____Documents_workspace5_nodecmsproject__-_mongo_cmsproject_pages

そうすると。。

http://localhost:3000/pages

にブラウザで接続。

localhost_3000_pages

で、OK。

 

 

MEANのプロジェクトをAngular4でCMS作成する⑤

Node.jsのAPIのフォルダを仮にnodecmsprojectっとして作成して、

そのフォルダに移動し、npm init

packageの名前を聞かれるのでそこだけapp.jsっとして、ほかはリターンですすんでいく。

次に

Expressフレームワーク,Mongoose,Body-parserをインストール。

をインストール。

Expressとは、Node.jsでの王道的な開発をスピードアップするためのフレームワーク

Mongooseは、MongoDBを操作するためのライブラリ。

Body-parserは、ExpressでPOSTで値を受け取る場合のミドルウェア。

/nodecmsproject/app.jsを作成してそこにコーディングを開始、必要なパッケージをインポートしていく。

 

/nodecmsproject/config/database.js

を作成。

。。DBがまだ作っていないので、MongoDBの作成をする。

まず昔にmongodbをインストールした記憶があるので、それを確認。

 

っということで接続情報を確認。

接続先は127.0.0.1:27017とわかる。

PHPStormのMongoExpressPluginを使う。

↓みたいな感じでMongoDBのGUIを設定。

Add_a_Mongo_Server_and_Preferences_and_workspace5____Documents_workspace5__-_____nodecmsproject_config_database_js__workspace5_

↓みたいな感じでPHPStorm開発環境に表示される。

workspace5____Documents_workspace5__-_____nodecmsproject_config_database_js__workspace5_

mongoのコマンドライン上で、このプロジェクト用のDBを作成

DB作成という目的のためだけのコマンドは存在しない。

新規のDBを使用するっとコマンドすると同時に新規にDBが作成される。

続いて、DB内にコレクションを作成する

ここで初めてDBが作成される。

workspace5____Documents_workspace5__-_____nodecmsproject_config_database_js__workspace5_

ここで

/nodecmsproject/config/database.js

の作成に戻って、

/nodecmsproject/app.jsは以下のようにコーディングしてみる。

 

で、とりあえず走らせてみる

 

っとなればOK。

Node.jsのソースが変えられるたびに自動で反応しサーバをリロードさせるようにnodemonをインストール

 

OK.

 

MEANのプロジェクトをAngular4でCMS作成する④

レイアウトのベースとしてBootstrapの公式ページから適当なサンプルを拾ってくる。

https://getbootstrap.com/docs/3.3/examples/starter-template/

このbodyの中身だけをsrc/app/app.component.htmlにコピペ

 

 

ブラウザで確認。

Cmsproject

ちょっと変だけど、まぁとりあえずOK。

 

 

 

 

MEANのプロジェクトをAngular4でCMS作成する③

ナビゲーションバーを作成したい。

そのためのコンポーネントを取得する。

app_component_html_-_cmsproject_-____Documents_workspace5_cmsproject_

src/app/componets/navbar/navbar.component.html

のファイルを開いてみると

 

といった状態。

本体の

src/app/app.component.html

を内容を全部消して、以下のように書き直す。

そしてリフレッシュして確認。

Cmsproject_and_app_component_html_-_cmsproject_-____Documents_workspace5_cmsproject_

OK

 

MEANのプロジェクトをAngular4でCMS作成する②

次にjQueryとBootstrapもインストールしておく。

$ npm install jquery bootstrap@3 –save
+ jquery@3.3.1
+ bootstrap@3.3.7
added 2 packages from 2 contributors and audited 38986 packages in 15.177s
found 0 vulnerabilities

そして、angular.jsonにインストールしたファイルを組み込む。

“architect”: {
“build”: {
“builder”: “@angular-devkit/build-angular:browser”,
“options”: {
“outputPath”: “dist/cmsproject”,
“index”: “src/index.html”,
“main”: “src/main.ts”,
“polyfills”: “src/polyfills.ts”,
“tsConfig”: “src/tsconfig.app.json”,
“assets”: [
“src/favicon.ico”,
“src/assets”
],
“styles”: [
“src/styles.css”,
“node_modules/bootstrap/dist/css/bootstrap.css”
],
“scripts”: [
“node_modules/jquery/dist/jquery.js”,
“node_modules/bootstrap/dist/js/bootstrap.js”
]
},

 

赤色は追加した部分。

もう一度サーバを立ち上げ直してみる。

 

$ ng serve
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **

Date: 2018-10-02T14:01:14.518Z
Hash: c343c06bcd8a1fb9b97f
Time: 9685ms
chunk {main} main.js, main.js.map (main) 10.7 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 227 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.22 kB [entry] [rendered]
chunk {scripts} scripts.js, scripts.js.map (scripts) 341 kB [rendered]
chunk {styles} styles.js, styles.js.map 165 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 3.28 MB [initial] [rendered]
ℹ 「wdm」: Compiled successfully.

 

赤色の部分を見てもらうと、バンドルされたスクリプトの容量が増加していることがわかる。

localhost:4200をもう一度ブラウザで見る。

Cmsproject

変化していることが分かります!

 

MEANのプロジェクトをAngular4でCMS作成する①

MEANのプロジェクトをAngular4で作成する。

まずは、AngularCLIをインストールする。

AngularCLIとは、AngularJS用のコマンドラインインターフェースのこと、

Angularを中心にプロジェクト開発をする上で使うことになるので、

まずインストール

 

そして、プロジェクトのベースを作成。

 

っと思ったらこんなことを言われてしまった。

Node.jsのバージョンが低くてAngular CLIでサポートされてないっということで、アップデートしてください。っということです。

ということで、Nodeのバージョン管理をするnをインストール

それで↓のバージョンをインストールする。

Node.jsのホームページでは↓のバージョンが一番使われてるっとあったので。

 

Node_js

 

そして再度コマンド。

 

生成したディレクトリはこんな感じ

cmsproject_-____Documents_workspace5_cmsproject_

ここまで来たら初めて

では、サーバを開始してみる

 

っと言った感じでサーバが開始。

localhost:4200をブラウザで開いてみるっと。

Cmsproject

といった感じで表示が出ればOK。

 

 

 

 

 

 

 

 

 

 

 

 

 

 

webstromでMEAN.IOをデバッグ

MEAN.IOのルートでgultしてみると

デフォルトはdevelopになっていて、

勝手にDebuggerを立ち上げてくれる。

なので、WebstormでやるべきことはこのDebuggerを受け取ること。

なので、

Edit Configurations -> Add New Configuration -> Node.js Remote Debug

Run_Debug_Configurations

といった感じでせっていたら、Debuggerを拾ってくれるはず!

ッと思ったら。ブレイクポイントで止まってくれない。

どうやらNode Debuggerをnode –debug-brk ~~~ で立ち上げないとDebuggerを拾ってくれないみたいです。

ということで、修正。

修正すべきところは、

/gulp/development.js

です。

gulpを立ち上げ直す。

Good!

 

Vagrantの共有フォルダでNode.jsを編集するたびに自動再起動する

結論から、

私の結論としてはnodemonを使うしかないかと。

ソース監視の方式に

nodemon

supervisor

node-dev

pm2

っといったアプリがありますが、すべてデフォルトではVagrantの共有フォルダに反応してくれません。

試行錯誤で結局全て試してしまったので、紹介する。

Nodemonをインストール

nodemonをインストール

後はnodeコマンドの代わりにnodemonを使うだけ

これがスタンダードなやり方。

VagrantのSynced folderを使っている場合には遅くするために”L”というオプションをつけて、

っとしなくてはいけないのですが、これが何故か上手くいかない。

何故かと言うと、↑のコマンドではファイルの更新を監視する対象(watch)

が「*.*」っとなっている、これでは同階層のファイルに対する変更しか監視しない。

監視したい対象は自分で指定する必要がある。

私の場合はこんな感じ。

これでOK。

Vagrantの共有フォルダで更新を監視したいだけなら、ココまでの部分でOK。

以降は蛇足。

Supervisorのインストール。

supervisorをインストールした。

無視するファイルとディレクトリの指定は -i

npmでインストールをかけたときに異常に再起動しないために

としてみたけど、結局VagrantのSynced Folderでは、これも結局使えない。

Node-devのインストール

PM2のインストール

$ npm install pm2 -g

こうです。

そうするとこう。

ただひとつ残念なのが、今まで標準出力でリアルタイムに監視できてたログが見えなくなってしまうこと、標準出力がどこに言っているかというと

~/.pm2/logs/ ここ

ここに、

エラー:server-error-0.log

標準出力:server-out-0.log

っとわけて収納されている。

リアルタイム監視をしたいなら

っとすればリアルタイム監視ができます。

pm2での監視もういいよってなったらこう。

ただSynced Folderで使えない。

AWSにNodeJSとMongoDBをセットアップ

AWSにMEANの環境をセットアップする

まずyumアップデート

環境構築に必要なパッケージを一気に取得

Nodejsのインストールのために

nvmをインストール

で、Nodejsのいい感じのバージョンをインストール。

そのいい感じのバージョンをデフォルトとする。

次にMongoDBをインストールする

MongoDBインストール用のyumレポジトリを記述する

それでは、yumでMongoDBをインストール・スタート・起動のたびにスタートするように設定

取り敢えずここまでOK。

 

MEANスタック+Angular Materialを導入してみる

最近流行りのMEANスタック構成をサーバにインストールしてみる。

さらに、個人的に注目のAngular Materialもついでに入れてみる。

丁度、npmの公式HPに次のようなページが用意されている。

https://www.npmjs.com/package/generator-angular-material-fullstack

どうやら、MEANスタック+Angular Materialが手軽にインストールできそうな予感。

早速npmコマンド、、しかし、そもそもまだnpmコマンドをインストールしていない。

いきなりエラーメッセージversionlock。

versionlockを無効化にする。

まだエラー

エラーメッセージfastestmirror。

どうやらRPM パッケージのデータベースが破損したようです。

yumのキャッシュをクリアする。

でもできない。。

単純な理由でした。root権限で実行すればOK。

npmコマンドが使えるようになったので、ここから初めて

AngularJS Material Full-Stackがインストールできるようになる。

取り敢えずココまで問題なし。

ここで、プロジェクトを作成。以下コマンドを実行。

ちなみに、Yeomanとはプロジェクトの雛形生成ツールのことです。

そのコマンドが「Yo」。npmでインストールすることが可能。

しかし、↓みたいなエラー・・

Yeomanが古いからなのかな?

あれ。まだうまくいかない。

npm, nodejsをバージョンアップして、再度Yeomanをバージョンアップして。

もう一度、実行。

なんだか。nodejsのバージョンが低いことでエラーが出てるみたい。

yumでnodejsをインストールするとバージョンがかなり低いのが問題みたい。

nvmで再度nodejsをインストールしてみる。