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

15855 ワード
Webサービス ejs AWS MySQL Node.js Node.js テキストリンク

目的

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 [email protected] No description
npm WARN [email protected] No repository field.

  • [email protected] 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 [email protected]: 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 [email protected] No description
npm WARN [email protected] No repository field.

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

npm WARN [email protected] No description
npm WARN [email protected] No repository field.

  • [email protected] 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へのデータ登録を実施。