で、具体的にnodeを使ってどうやってウェブサイトを作るんじゃい？
拙者、前回nodeとは何なのか？を解説し申しましたが、nodeをコンピューターに入れただけだと、基本的にはコマンドラインからファイル操作などをjavascriptで行うっていう作業しか出来ないんだけど、サーバーを立ち上げてページを作って所定のディレクトリにいれ、ブラウザから見れるようにするという作業には、フレームワークを使います。
幾つか選択肢があるんだけど、今回は一番ポピュラーで軽いexpressというフレームワークを使って、サイトを構築。
イメージとしては、nodeにてウェブやウェブアプリの制作に必要なモジュールが用意されているパッケージっていう感じ。
以下順を追って、サーバーの構築方法。
1、メインディレクトリの制作とモジュール類のインストール
まずはウェブサイト全体を収めるメインのフォルダ(ルーツになる)を適当なところに作って、cdコマンドでそのフォルダに移動し、下記コマンドを実行。init、つまり初期化！ ＊今回は"NodeSite"っていうフォルダを制作したみたよ。
~/NodeSite$ npm init
幾つか質問が出てきますが、とりあえず全部そのままでOK。
そうすると、package.jsonというファイルが自動生成されます。
"name": "nodesite",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "nanashi",
"license": "ISC"
}
で、次にExpressをインストール。下記コマンドを実行。
npmってのは、Node Package Manager。つまり、色んなモジュールやパッケージをインストールしたり、設定したりしてくれるよ。
~/NodeSite$ npm install express --save
package-lock.jsonファイルとnode_modulesフォルダが生成されます。dependenciesっていうのは、読み込んだ外部モジュールのこと。この一覧がpackage-lock.jsonファイルに記録されていきます。
このjsonファイルがあれば、モジュール自体が無くても、npm install コマンド一発で、自動的にインストールしてくれます。持ち運びに便利！
node_modulesはそのままで、読み込んだモジュールのデータ。便利機能の保存場所。ここがドラえもんたる所以ですね。
２、app.jsファイルを作って、サーバー側 javascriptを書く
インストールが済んだら、app.jsファイルを作って、そこにサーバーサイドのjavascriptを書いていきます。
制作したルーツフォルダ直下にsrcフォルダを作り、その中にapp.jsファイルを作りましょう。コードは以下
const express = require('express');
const app = express();
// routing
// app.com/ => root
// app.com/about => about page
app.get('/', (req, res)=>{
res.send('Hello Express!');
})
app.get('/about', (req, res)=>{
res.send('This is about page');
})
app.listen(3333, ()=>{
console.log("server running on Port:3333");
})
これが超基本のコード。
これだけでサーバーがセットアップされ、ホームページとaboutが表示されます。
コード解説
const express = require('express');
const app = express();
１行目：外部モジュールを呼び込むお決まりの呪文。require('モジュール名')
２行目：expressはこの時点で関数なので、実行して、オブジェクトやメソッドを使えるようにし、app変数に入れる。
app.get('/', (req, res)=>{
res.send('Hello Express!');
})
app.get('/about', (req, res)=>{
res.send('This is about page');
})
ルーティングと言われている部分。
app.get()メソッドを使うと、各URLにリクエストを振り分けられる。
幾つでもここでルーティングできます。
引数は２つ。リンク先アドレスとコールバック。で、コールバックは２つの引数reqとresをとる。これは決まってる。
req resについての詳細は長くなるので、調べてちょー。
簡単に言うと、getリクエストで指定したリンク先にアクセスがあった場合、コールバックの内容が返される。
今回のサンプルは単純にテキストを返してるだけですが、JSONを返したり、リダイレクトしたり、APIを発動したり、ここで好き放題出来ます。
通常サイトのディレクトリ構造と大きく違うのは、別にリンクURLにフォルダやファイルがある必要がなく、適当なURLを設定できて、そこにアクセスがあれば、コールバックの内容を返せるという点ですかね。
今回の例で見ても、/aboutにaboutページが存在するわけではありません。
ここをこんな風にエンドポイントにして、JSONを送ることも可能です。
app.get('/app/music', (req, res)=>{
res.json('{inu: meshi kuu na}');
})
勿論、appフォルダとかは存在する必要ないです。
app.listen(3333, ()=>{
console.log("server running on Port:3333");
})
で、最後のこの行でサーバーの設定をしています。
app.listen(ポートナンバー, コールバック)です。
ポートナンバーは基本何番でもオーケーですが、nodeでは３０００が一般的みたい。コールバックは、接続時に実行される関数。
３、プログラムの実行
コマンドライン cd で、app.jsの階層まで移動して、node app.js
ubuntu@ubuntu-aurora-r4:~/NodeSite/src$ node app.js
server running on Port:3333
サーバーが起動してるのが分かるね？
で、ブラウザを立ち上げて、窓に localhost:3333 って入れれば、/ が、localhost:3333/about っていれればaboutページが表示されます。
今回の設定は、あくまでもローカル環境内でのセットアップで、公開するにはAWSやherokuなんかのnodeに対応したサーバーにてデプロイする必要があります。
通常のHTMLページ等をhandlebarsを使ってレンダリングする方法は次の記事で。
画像を幾つかアップロードしたかったんだけど、スクリーンショットの加工が面倒なのと、Qiitaでどう埋め込むのか調べるのが面倒くさかったので、今回は無しでござる。
小生の自習用備忘録でもあるので、乱文誤字脱字失礼つかまつる！押忍