Node.js について
1.1 ローカルサーバーを立ち上げてHTMLファイルをブラウザに表示させる
ローカルのWebサーバーを立ち上げても、そのwebサイトは自身のPC上でしか閲覧できません。これをインターネット上で、外部から閲覧できるようにします。以下の説明は、Node.jsの環境設定を終わらせているものと仮定して話を進めています。以下のコードはブラウザに表示させるhtmlファイルとなります。ファイル名はaaa.htmlです。<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Earth</title> </head> <body> <h2>にゃーん</h2> <div class = "tweet_share"> <font size = "4">ボタンを押して、Twitterでシェアしてみよう!<br></font> <a href="https://twitter.com/share?ref_src=twsrc%5Etfw" class="twitter-share-button" data-size="large" data-show-count="false">Tweet</a><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> </div> <script src = "sarcle.js"></script> </body> </html>
javascriptのコードは以下の通りです。ファイル名はapp.jsです。
const http = require('http'); const hostname = '127.0.0.1'; const port = 3000; var server = http.createServer(); server.on('request', doRequest); // ファイルモジュールを読み込む var fs = require('fs'); // リクエストの処理 function doRequest(req, res) { // ファイルを読み込んだら、コールバック関数を実行する。 fs.readFile('./aaa.html', 'utf-8' , doReard ); // コンテンツを表示する。 function doReard(err, data) { res.writeHead(200, {'Content-Type': 'text/html'}); res.write(data); res.end(); } } server.listen(port, hostname, () => { console.log(`Server running at http://${hostname}:${port}/`); });
これらの2つのファイルを同じディレクトリ下において下さい。ファイルを保存したら、ターミナル上でそのディレクトリ下に移動してください。cdコマンドで移動みたいな感じです。
$ node app.js
をターミナルに打ち込みます。私はWindows 10 のwsl2環境で行いました。wslでなくても実行できます。その後以下のように表示されればローカルサーバーの立ち上げに成功です。
ポート番号3000番ですね。その後ブラウザの検索欄で、localhost:3000 と入力して下さい。
すると、上の画像のように、htmlファイルで記述したものがブラウザ上に表示されます。しかし、これはローカル環境でしか反映されません。次に、インターネット上で誰でもこのwebページにアクセスできるようにします。
1.2 ngrokでローカル環境外からでも閲覧可能にする
https://ngrok.com/上のサイトからngrokを任意のディレクトリにインストールして、解凍してください。すると、ngrok.exeという実行ファイルが出現します。それを起動させ、
ngrok http 3000
と打ち込むと外部公開できるようになります。
上の図のForwardingという欄の後に記述されているものが、アクセスできるurlとなります。
Ctrl+C のキーを押すと外部公開終了となり、urlにアクセスできなくなります。ちなみに、このurlは毎回異なる値となります。
2-1 expressでhttpサーバーを作る
この記事が分かりやすかったので参考にしました。blog.katsubemakito.net
以下のコードは、webサイトにアクセスがあった時に、Terminal上でログ出力するというものです。サーバー管理用のserv.jsとブラウザ表示用のaaa.htmlを同じディレクトリ下に置いています。
const express = require("express"); const app = express(); const port = 3000; // ルーティングの設定 app.get("/", (req, res) =>{ res.sendFile(`${__dirname}/aaa.html`); console.log("/ へアクセスがありました"); }); // HTTPサーバを起動する app.listen(port, () => { console.log(`listening at http://localhost:${port}`); });
アクセスカウンタを実装したコードは以下の通り。localhost:3000/resetのurlにアクセスするとアクセスカウンタの数字がリセットされる。
const express = require("express"); const app = express(); const port = 3000; // カウンター用のデータ let COUNT = 1; // ルーティング app.get("/", (req, res)=>{ res.send(`あなたは${COUNT}人目のお客様です`); COUNT++; }); app.get("/reset", (req, res)=>{ res.send(`カウントをリセットしました`); COUNT=1; }); // サーバを起動 app.listen(port, ()=>{ console.log(`Running at http://localhost:${port}/`); })
メッセージ送信フォームを作る
ファイル構成|-document root | app.js | file1.txt |---views index.ejs
クライアント側から入力された情報を、コンソール画面に出力し、file1.txtに追記するというシステムです。非同期処理で実装しているため、高速です。
Body Parser(body-parser)でPOST処理をおこなう[フォーム]
const express = require("express") const ejs = require('ejs') const bodyParser = require("body-parser") const app = express() const fs = require("fs"); var data = "yet"; const port = 3000; app.set('ejs', ejs.renderFile) app.use(bodyParser.urlencoded({ extended: false })) app.get("/", (req, res) => { res.render("./index.ejs", { name: '未送信', message: '未送信' }) }); app.post("/", (req, res) => { res.render('index.ejs', { name: req.body.name, message: req.body.message }) data = req.body.name+"さん : "+req.body.message; fs.appendFile("file1.txt", data+'\n', (err) => { if(err){ console.log(`[error] ${err}`); } console.log(data); }); }); app.listen(port, () => { console.log(`listening at http://localhost:${port}`); });
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> .size-input-name {width: 16em; height: 2em;} .size-input-message {width: 50em; height: 3em; } </style> </head> <body> <h2>メッセージ送信フォーム</h2> <br> <form action="/" method="post"> <input type="text" name="name" placeholder="名前" class = "size-input-name"> <hr> <textarea type="text" name = "message" rows = "10" cols = "80" placeholder="メッセージ"></textarea> <hr> <button type="submit" name="button">送信</button> </form> <br> <h2>送信内容</h2> <ul> <li>名前:<%=name %></li> <li>メッセージ:<%=message %></li> </ul> </body> </html>