Node.jsで簡易なWebシステムの構築①

#目的
Node.jsを用いて簡易なWebシステムを構築する。まずは DBを参照して簡単な画面を出すだけ。

#環境条件
[Node.js実行環境構築](https://qiita.com/MARTOON/items/8fbbbda9df6242652030)
で構築した環境を利用。

#構築手順

ec2-userでログイン

```
# rootユーザにスイッチ
sudo su - 
```

##1.アプリ用のデータ準備
MySQLに必要な設定を実施する。

```
# MySQLにログイン
mysql -uroot -ppassword
```

```sql
# DBの作成
create database myappdb;
```

```sql
# DBの選択
use myappdb;
```

```sql
# テーブルの作成（ID, Name, Priceを含む簡易なテーブル）
create table myapptbl1 (id int auto_increment, name varchar(50), price int, primary key (id));
```

```sql
# データの投入
insert into myapptbl1 (name, price) values ('りんご',150);
insert into myapptbl1 (name, price) values ('みかん',100);
insert into myapptbl1 (name, price) values ('メロン',1000);
insert into myapptbl1 (name, price) values ('ぶどう',400);
```

```sql
# データの確認
select * from myapptbl1;
```


+------+-----------+-------+
| id   | name      | price |
+------+-----------+-------+
|    1 | りんご    |   150 |
|    2 | みかん    |   100 |
|    3 | メロン    |  1000 |
|    4 | ぶどう    |   400 |
+------+-----------+-------+

##2.アプリケーション用の初期設定
myapp1というプロジェクトを作成し、必要なモジュールのインストール等を実施する。

```
#　ディレクトリの作成
mkdir -p /opt/nodejs/myapp1
```

```
#ディレクトリの移動
cd /opt/nodejs/myapp1
```

```
# npmの初期設定
npm init -y
```

Wrote to /opt/nodejs/myapp1/package.json:

{
  "name": "myapp1",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

```
# expressのインストール
npm i -D express
```

npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN myapp1@1.0.0 No description
npm WARN myapp1@1.0.0 No repository field.

+ express@4.17.1
added 50 packages from 37 contributors and audited 50 packages in 2.687s
found 0 vulnerabilities

```
# express-generatorのインストール
npm install -D express-generator
```

npm WARN deprecated mkdirp@0.5.1: Legacy versions of mkdirp are no longer supported. Please update to mkdirp 1.x. (Note that the API surface has changed to use Promises in 1.x.)
npm WARN myapp1@1.0.0 No description
npm WARN myapp1@1.0.0 No repository field.


```
# mysql接続用モジュールのインストール
npm install --save mysql
```

npm WARN myapp1@1.0.0 No description
npm WARN myapp1@1.0.0 No repository field.

+ mysql@2.18.1
added 9 packages from 14 contributors and audited 59 packages in 1.339s
found 0 vulnerabilities

##3.アプリケーションの開発
こんな形になるようにファイルを作成する。（treeコマンドの結果）

myapp1/
├── app.js
├── node_modules（略）
├── package.json
├── package-lock.json
└── views
    └── index.ejs

app.js

```js
// 各種ライブラリの呼び出し
const express = require('express')
const ejs = require('ejs')
const mysql = require('mysql')
const app = express()

// テンプレートエンジンをejsに指定
app.set('ejs', ejs.renderFile)

// mysqlへのコネクションオブジェクトの定義
const con = mysql.createConnection({
    host: 'localhost',
    user: 'root',
    password: 'password',
    database: 'myappdb'
  });

// urlへアクセスしてきた際の動作を定義
app.get('/', (req, res) => {
 　　　　　　// mysqlへ接続しmyapptbl1の全件のデータを取得し、index.ejsに受け渡しを実施
    con.query('select * from myapptbl1', function (err, results, fields) {
        if (err) throw err
        res.render('index.ejs', { content: results })
    });
})

// 3000番ポートでListenするように設定 
app.listen(3000, () => {
    console.log('server start')
})
```

index.ejs

```erb
<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
    <div class="container" style="margin-top:50px;">
        <table class="table">
            <thead class="thead-dark">
                <tr>
                    <th scope="col">id</th>
                    <th scope="col">name</th>
                    <th scope="col">price</th>                    
                </tr>
            </thead>
            <tbody>
            <% for(let i in content) { %>
            <tr>
                <% let obj = content[i]; %>
                <th>
                    <%= obj.id %>
                </th>
                <th>
                    <%= obj.name %>
                </th>
                <th>
                    <%= obj.price %>
                </th>
            </tr>
            <% } %>
            </tbody>
        </table>
    </div>
</body>
</html>
```

```
# /opt/nodejs/myapp1に移動してアプリケーションを起動
node app.js
```

http://ホスト名:3000 にブラウザからアクセスし、以下のような画面が出れば完了。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/236234/0aabd1ce-43f9-d9a4-9465-be1093524913.png)

次はMySQLへのデータ登録を実施。