2018-01-12

React, Redux, Material UI, Babel, Webpackの環境構築

■ 各種install

$ npm install --save-dev babel-core babel-loader babel-preset-env babel-preset-react

$ npm install --save-dev webpack webpack-dev-server

$ npm install --save-dev html-webpack-plugin

$ npm install --save-dev style-loader css-loader

$ npm install --save react react-dom

$ npm install --save redux react-redux

$ npm install --save material-ui@next

やっぱり環境構築がメンドウ。。。

2017-10-22

Node.js, ExpressでWebApplication

Node.js

Node.jsを使って、Webアプリを作ってみようと思います。

使いたい技術、要件としては、以下の通り。一般的なWebアプリで使われる要素＋IoTの要素を取り入れておきたいと思います。

・フレームワークは王道のExpressを使う
・MQTTを使ってメッセージを受信する
・Databaseに保存する
・UIはcss フレームワークのbootstrapを使ってみる

まずは、環境構築から。
AWSのアカウント作ったので、無料枠範囲内で実施してみます。
※ -----
この無料枠、よく調べておかないとすぐ超えてしまうかもしれません。
EC2インスタンスは750時間で、1か月連続稼働がOKという文言が目に入りますが、これは1台の場合であることに注意！つまり、インスタンス時間です。2台であれば375時間になります。EC2インスタンスは、何台でも簡単に作れてしまうので、ついつい作ってしまいがちなので注意です。
※ -----

AWSのEC2のインスタンスタイプ（スペック）は、無料のt2.microを作成しました。
vCPU : 1core, Strage : 8G, Memory : 1Gと、無料だけあってやや非力ですね。。。
OSは、Amazon Linuxで作成しました。Amazon LinuxはRedHat系ですね。（個人的には、Ubuntu/Debian系のお手軽さが好みですが。）

|||■||| Node.jsセットアップ |||■|||

Node.jsのセットアップ方法はいろいろありますが、nvmからインストールします。
Gitリポジトリが以下にあります。

github.com

Installationに書かれている通りcurlでインストール。

$ curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.5/install.sh | bash

~/.nvmにインストールされて、~/.bashrcにコマンドが追加されます。
初回はコマンドを使えるようにsourceします。

$ source ~/.bashrc
$ nvm --version
0.33.5

Node.jsはnvmで好きなVersionをインストールできます。ls-remoteでNode.jsのVersionを確認できます。

$ nvm ls-remote

2017.10.22時点最新のv.8.7.0をインストール。同時にNode.jsのPackageManagerのnpmもインストールされます。
npmについてはこちらが参考になります。

www.webprofessional.jp

$ nvm install v8.7.0
$ node -v
v8.7.0
$ npm -v
5.4.2

完了です。Node.js自体はとても簡単にインストールできます。

|||■||| Expressのインストール |||■|||

Node.jsのWebアプリケーションフレームワークのExpressをインストールします。

Express - Node.js web application framework

まずは、npmのベースとなるpackage.jsonを作成。

$ npm init

対話形式で質問に答えていくと、package.jsonができます。

{
  "name": "my-web-app",
  "version": "0.0.1",
  "description": "sample web application",
  "main": "app.js",
  "scripts": {
    "test": "test"
  },
  "author": "Tuna",
  "license": "MIT",
}

Expressのインストールは、以下の通り。

$ npm install express --save

npm5からpackage.jsonとpackage-lock.jsonが生成されるようになったようです。
package-lock.jsonは、環境の違い、Versionの違いによるエラーを回避するために作成されるようです。詳しくはこちら。

yosuke-furukawa.hatenablog.com

|||■||| お試しアプリ作成 |||■|||

Expressのお試しアプリを作ってみます。

$ vi app.jp

/*!
 * My Web Application Sample
 */

// requires
let express = require('express');

// express instance
let app = express();

// start web server
let server = app.listen(3000, () => {
  console.log('web server start');
});

// responce greating page
app.get("/", (req, res, next) => {
  res.end("Hello Web Server");
});

EC2インスタンスのセキュリティグループで3000番ポートを開放し、
http://EC2-IP-address:3000/
にアクセスすると、Hello Web Serverが表示されました。

次回は、express-generatorを使って、フレームワークを生成し、Web Applicationを作りこんでいきたいと思います。

■ その他参考
Google Web Starter Kit

developers.google.com

ES6

qiita.com