使用するミドルウェア これらを使用するとロジックをコーディングする必要がなくなる mongoose express-session passport passport-local passport-local-mongoose connect-mongo setup $ cd ~/ $ express userlogin $ cd userlogin $ npm install $ npm install express-session passport passport-local connect-mongo mongoose passport-local-mongoose app.js 以下の内容を追加 * sessionをmongoose経由でmongodbで保存 * /api へのアクセスは認証を通す app.js var passport = require('passport'

環境設定 routerフォルダでプロジェクトを作成 $ cd ~/ $ create-react-app router react-routerインストール 今回はwebサイト $ cd ~/router $ npm install --save react-router-dom src/App.js 編集 前ページ共通で表示するHeader,Footer トップページは/ /hoge, /moge でアクセスできるようにする src/App.js import React, { Component } from 'react'; import { BrowserRouter as Router, Route, Link } from 'react-router-dom'; const style = { common : { margin: 0, padding: "20px", tex

CMS開発の続きです node.js+ReactベースのCMS開発をはじめます node.js+React CMS を設計する(外部仕様)) node.js+React CMS を設計する(データベース仕様)) node.js+React CMS開発-サーバー雛形を作成 node.js+React CMS開発-モデル定義 前提条件と目的および採用基準 今回のCMS開発の考え方として ビジネス向けのwebアプリケーション開発を想定 メディアサイトのwebアプリケーションを想定 構造化が容易なアーキテクチャー ある程度枯れている&開発者が多い 手軽に作業ができる&コスト最小 デザインが自由にできる IaaSに載せやすい *管理サイトおよびメディアサイトの両方を想定 Javascriptだけで開発 Reactは決めの問題 Vueもいい Angularもいい JQueryも慣れているしプラグインが

クライアントReactアプリとWebサーバー&APIサーバーを分けるのが面倒で一箇所（プロセス）でホスティングしたいときがあります create-react-app で作成したプロジェクトをexpressの /_admin 以下で動作(配信）させてみます Express環境 $ express together create : together create : together/package.json create : together/app.js create : together/public create : together/routes create : together/routes/index.js create : together/routes/users.js create : together/views create : together/views/ind

create-react-appでプロジェクトを作成し、Material-UIを利用した画面を表示します 環境設定 ローカルの開発環境はこちら * macOS High Sierra(v10.13)でJavaScript開発環境を整える create-react-app でプロジェクトの雛形作成して起動してみる $ cd ~/ $ create-react-app material $ cd material $ npm start Compiled successfully! You can now view material in the browser. Local: http://localhost:3000/ On Your Network: http://192.168.11.15:3000/ Note that the development build is not opt

わざわざServer Side Renderingでやるべきことではないですが、やってみました。 やったこと express-generator で雛形を作る app.jsで view engineに express-react-views を設定 view 内の layout.jsxとindex.jsx でmaterial-uiを利用 ブラウザで確認 環境構築 $ express material $ cd material $ npm install $ npm install --save express-react-views react react-dom material-ui app.js var express = require('express'); var path = require('path'); var favicon = require('serve-fav

mongooseでセッション管理 パッケージインストール $ npm install --save mongoose $ npm install --save express-session $ npm install --save connect-mongo プロジェクト雛形作成 $ express session app.js var express = require('express'); var session = require('express-session'); var MongoStore = require('connect-mongo')(session); var path = require('path'); var favicon = require('serve-favicon'); var logger = require('morgan'); var c

Express+mongooseでパスワードを暗号化して保存する方法 mongoose-bcrypt をインストール npm install mongoose-bcrypt --save app.js ルーティングの/ でデータ登録、/checkでパスワードをチェックしてみます app.js var mongoose = require('mongoose'); const option = { useMongoClient: true, }; mongoose.Promise = global.Promise; mongoose.connect(`mongodb://localhost/nexpress`, option); // スキーマ定義 var Schema = mongoose.Schema; var userSchema = new Schema ({ user_id : N

CMS開発シリーズの続きです node.js+ReactベースのCMS開発をはじめます node.js+React CMS を設計する(外部仕様) node.js+React CMS を設計する(データベース仕様) 今回は Expressのプロジェクト作成とviewエンジンにReactを使用するテンプレートを作成します 目次 目次 開発環境 node.js v9.2.0 mongodb 3.4.9 express プロジェクト作成 初期パッケージインストール express-react-views mongoose passport pagkage.json アプリケーション雛形を作成 jade 削除 .jade を .jsxにrename app.js views/layout.jsx views/index.jsx views/error.jsx 起動&確認 起動 ブラウザで確認 開発

Express+mongooseで RDBのようなAUTO INCREMENTフィールドを実現する mongoose-sequence パッケージをインストール $ npm install --save mongoose-sequence app.js var mongoose = require('mongoose'); const option = { useMongoClient: true, }; mongoose.Promise = global.Promise; mongoose.connect(`mongodb://localhost/nexpress`, option); // スキーマ定義 var Schema = mongoose.Schema; const AutoIncrement = require('mongoose-sequence')(mongoose);

nexpressスキーマ構成を定義する。 必要最低限の要件を元にシンプルな構造を定義する。 1. Schemaに対する要件 ユーザー登録がエントリーポイント ユーザー ユーザーはサイトを複数作成できる サイトを新規作成したとき、自動的にそのサイトの最高権限ユーザーとなる ユーザーは自他含め複数のサイトに属する事ができる サイト内での権限(role)を付与される カテゴリ サイト単位でカテゴリを定義できる カテゴリは階層構造を取る カテゴリは他のカテゴリの子となることができる タグ サイト単位でタグを定義できる タグは短いキーワードとして登録する コンテンツ コンテンツはサイトおよび作成したユーザーに属す コンテンツには公開期間を設定できる コンテンツは複数のカテゴリに属することができ、かつカテゴリをキーとして検索できる コンテンツにはタグを付与でき、かつタグをキーとして検索できる 2. S

nexpress(CMS名称)画面構成 1. サイト画面構成 SSR(Server Side Rendering)にする トップページ 記事リストページ カテゴリ（サブカテゴリ） 検索結果 タグ検索 ランキング 新着 その他条件リスト 記事本文ページ (ユーザープロフィールや固定ページ) 2. 管理画面構成 SPA(Single Page Application)にする Adminトップページ ユーザー登録 ログイン ダッシュボード サイト管理 デザイン管理 ユーザー管理 カテゴリ管理 タグ管理 記事管理 編集 プレビュー 3. 外部仕様 全画面共通 PC,tablet向け、SP向け(HTML,AMP)に表示できるようにする PC,SPを分けるかレスポンシブにするか選択可能にする サイト 全ページ共通 ヘッダー フッター 広告のタグ類 その他全ページ共通表示要素 トップページ 新着記事など

なぜCMSか 現在CMSのデファクトスタンダードはwordpressです。PHPが動作するサーバーであれば簡単に設置でき、豊富なプラグイン、デザインテーマがあって使いやすくなっています。 これに匹敵できるようなCMSをnode.jsベースで開発してみます。CMSはWebアプリケーションの機能を幅広く実装するため、開発事例を網羅するためにCMSを題材に選びました。 なぜnode.jsか Webアプリケーションの開発においてフロントエンドの複雑化に対応することが必須となっています。 フロントエンドで動的な機能を実現するためにJavascriptの使用が標準となるため、バックエンドの実装言語にかかわらずJavascriptは必ず通る道です。 それならばバックエンドもJavascriptで構築すべきと考えました。node.jsは一般的に言われているメリットもあるためnode.jsをベースとします。

前回の続きです。 前回まではテキストのみを投稿する掲示板でしたが、画像もアップできるようにします。 作るもの これまで作ってきた掲示板を拡張 フロントエンドはcreate-react-appで作成 バックエンドはExpress 書き込みと同時に画像をアップロードできるようにする 書き込み一覧に画像を表示する 0. これまで作ったファイル構成 kakikomi ├── kakiapi サーバー API │   ├── app.js │   ├── bin │   ├── node_modules │   ├── package-lock.json │   ├── package.json │   ├── public │   ├── routes │   └── views └── kakifront フロントエンド ├── README.md ├── build ├── node_modu

前回の続きです。 フォームを表示して、投稿をできるようにします。 作るもの これまで作ってきた掲示板と同じもの フロントエンドが今回作るもの。前回作った掲示板APIと連携して書き込みデータをやりとりする。 サーバーAPIを立ち上げておく 前前回作った「掲示板REST API」を localhost:3000で立ち上げておきます。このサーバーと 今回作るアプリが連携します。 開発環境 MacOS High Sierra 詳細はこちら 1. App.jsにコンポーネントを追加 App.js import React, { Component } from 'react'; import './App.css'; /** * 書き込み１件 */ class Post extends Component { render() { return ( <div className="kakikomi"

create-react-appはFacebookが開発したReact web アプリケーションの環境構築パッケージです。 React はそのコードを書いて動かす以前に前提となる開発環境を整備するのに苦労することから適用を断念しがちでした。このツールによって導入がしやすくなりました。 作るもの サーバーAPIを立ち上げておく 開発環境 1. create-react-app のインストール 2. プロジェクト作成 3. package.jsonにサーバー情報を追加 4. App.js編集 スタイルはApp.cssにまとめる 5. buildして配置 6. まとめ 作るもの これまで作ってきた掲示板と同じもの フロントエンドが今回作るもの。前回作った掲示板APIと連携して書き込みデータをやりとりする。 サーバーAPIを立ち上げておく 前回作った「掲示板REST API」を localhost

作るもの 開発環境 1. Express プロジェクト作成 2. express-restify-mongoose をインストール 3. app.jsを編集 4. まとめ 作るもの Express内で定義したMongoDBのスキーマに対してデータをCreate,Read,Update,DeleteするWebAPIインターフェース これまで作ってきた掲示板アプリのWebAPIを作ってみる 開発環境 MacOS High Sierra 詳細はこちら 1. Express プロジェクト作成 express-generator で雛形を作成します。テンプレートエンジンはデフォルトのままで作成。 これまで作ってきた掲示板機能のAPIを想定しています。 $ express kakiapi warning: the default view engine will not be jade in futu

前回の「node.js+Express+mongooseで掲示板を作ってみる」ではview engineをpugで実装しました。 これを機能はそのままに Reactをview engineとして使ってみます。 目次 目次 1. express-react-views パッケージインストール 2. app.js で view engine を変更する 3. ViewテンプレートをReact,JSXで記述 ページレイアウト（共通） トップページ 投稿ページ 投稿後ページ 4. Reactテンプレートへのスタイルの適用 5. まとめ 1. express-react-views パッケージインストール express-react-views は React, React-DOM を用いたテンプレートをサーバーサイドでコンパイル（トランスパイル）してHTMLを出力するパッケージです。 他のview

前回の「node.js+mongodbで掲示板アプリを作ってみる」ではnode.jsとmongodbのnative driverだけでapp.jsのみで実装しました。 独自ルーティング デザインもHTMLも混在 dbのドキュメント構造がわかりにくい その他Webアプリケーションで共通の処理手順をそのつど書く ため、ソースに手を加えるたびに煩雑になってきます。 目次 目次 0.MVCモデルの掲示板アプリを作る 1. 新しいnodeをインストール 1. Expressアプリケーションのプロジェクトを作る デフォルトで設定される機能 2. mongooseをインストールして使えるようにする 3. mongoose接続とSchema定義を追加する 4. 投稿画面を追加 投稿フォーム 5.トップページを書き込み一覧表示にする 6. まとめ 検討事項 0.MVCモデルの掲示板アプリを作る 今回はExp

前回つくった掲示板サービスはnode.jsのhttpサーバー起動中の配列に書き込みデータを保存したため、サーバー再起動でデータが消えてしまいます。 今回はmongodbにデータを保存してみます。 1. mongodbのインストールと起動 2. node.jsでmongodbのdriverを使う 3. 掲示板アプリをmongodb利用に変更 4. まとめ 1. mongodbのインストールと起動 前提となる開発環境はMacOS High Sierra インストールして起動 $ brew install mongodb ~ $ brew services start mongodb mongo クライアント(mongo shell)で接続確認します。 $ mongo MongoDB shell version v3.4.9 connecting to: mongodb://127.0.0.1: