Node.js と Express

Expressを使用することがあったので覚書。

環境：
・Windows10
・WSL2（Ubuntu20.04）
・Windows Terminal
・VSCode

目標：
・UbuntuにExpressをインストール
・動作確認

注意事項：
多々間違いがあると思いますが，ご了承ください。

作業ディレクトリ

WSL (Ubuntu)での操作です。
作業するディレクトリを作成して移動します。

okaki@DESKTOP:~$ mkdir vscode
okaki@DESKTOP:~$ cd vscode/
okaki@DESKTOP:~$ mkdir webappl
okaki@DESKTOP:~$ cd webappl/

Express Generatorのインストール

アプリケーション生成プログラム・ツールである Express Generator をインストールします。このパッケージはグローバルにインストールしています。

okaki@DESKTOP:~/vscode/webappl$ sudo npm -g install express-generator

アプリケーションのひな型を作成と確認

アプリケーションのひな型を作成します。
設定は次の通りにしています。
・アプリケーション名 = appl
・テンプレートエンジン = ejs

okaki@DESKTOP:~/vscode/webappl$ express appl --view=ejs

これでアプリケーションに必要なファイルが自動的に作成されます。

okaki@DESKTOP:~/vscode/webappl/appl$ ls -l
total 28
-rw-r--r-- 1 okaki okaki 1075 Sep 17 18:49 app.js
drwxr-xr-x 2 okaki okaki 4096 Sep 17 18:49 bin
-rw-r--r-- 1 okaki okaki  295 Sep 17 18:49 package.json
drwxr-xr-x 5 okaki okaki 4096 Sep 17 18:49 public
drwxr-xr-x 2 okaki okaki 4096 Sep 17 18:49 routes
drwxr-xr-x 2 okaki okaki 4096 Sep 17 18:49 views

作成されたひな形に必要なパッケージをインストールします。
必要なパッケージはpackage.jsonに記載されているので，これを使用します。

package.jsonのあるディレクトリに移動して以下のコマンドを実行（ひな形を作ったときはディレクトリ移動は必要ないと思います）。

okaki@DESKTOP:~/vscode/webappl/appl$ npm install

これで必要なパッケージがアプリケーションに組み込まれました。
とりあえずひな形のまま動かしてみます。

okaki@DESKTOP:~/vscode/webappl/appl$ DEBUG=appl:* npm start

起動させた後にWebブラウザで http://localhost:3000/ にアクセスしてみます（ひな形のままでは，自機のIPアドレスを直接入力しても表示されませんので，試す場合はlocalhostでアクセスします）。

画面が表示されると成功です。

最後に

今回はここまで。

次回はWebアプリケーションを少し触っていきたいと思います。