メモ帳

楽しいアウトプットの場所

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 と入力して下さい。
f:id:nya__nya:20210504212014p:plain

f:id:nya__nya:20210504212536p:plain
すると、上の画像のように、htmlファイルで記述したものがブラウザ上に表示されます。しかし、これはローカル環境でしか反映されません。次に、インターネット上で誰でもこのwebページにアクセスできるようにします。

1.2 ngrokでローカル環境外からでも閲覧可能にする

https://ngrok.com/
上のサイトからngrokを任意のディレクトリにインストールして、解凍してください。すると、ngrok.exeという実行ファイルが出現します。それを起動させ、

ngrok http 3000

と打ち込むと外部公開できるようになります。

f:id:nya__nya:20210504213547p:plain
上の図の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にアクセスするとアクセスカウンタの数字がリセットされる。

  1. サーバ起動中はグローバル変数は生き続ける
  2. サーバが死ぬとグローバル変数も死ぬ
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>