#目的
Node.jsを用いて簡易なWebシステムを構築する。まずは DBを参照して簡単な画面を出すだけ。
#環境条件
Node.js実行環境構築
で構築した環境を利用。
#構築手順
ec2-userでログイン
# rootユーザにスイッチ
sudo su -
##1.アプリ用のデータ準備
MySQLに必要な設定を実施する。
# MySQLにログイン
mysql -uroot -ppassword
# DBの作成
create database myappdb;
# DBの選択
use myappdb;
# テーブルの作成（ID, Name, Priceを含む簡易なテーブル）
create table myapptbl1 (id int auto_increment, name varchar(50), price int, primary key (id));
# データの投入
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);
# データの確認
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
// 各種ライブラリの呼び出し
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
<!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 にブラウザからアクセスし、以下のような画面が出れば完了。
次はMySQLへのデータ登録を実施。