Expressを使用してブラウザにHello Worldを出力する

6257 ワード
Node.js AmazonLinux2 nodemon Express Node.js テキストリンク

初めに

今回は、Expressを使用して、ブラウザにHellow Worldを出力させるまでの手順を投稿します。
既にnpmを使用してexpressをインストールしている状態になります。

インストールがお済でない方は、Expressの公式サイトを参考にしてインストールを行ってください。

環境

■OS
Amazon Linux2
■仮想マシン
VirtualBox
■ソースコードエディタ
Windows版 Visual Studio Code(以下VScodeと略す)
■使用PC
Windows10

※Amazon Linux2はVirtualBoxを用いて導入し、Expressのファイルを編集するためにsambaを使用しています。

下記にイメージ図を添付しております。

プロジェクトの作成

まず初めに、express-generatorをインストールしてプロジェクトの作成を行います。
express-generatorをインストールすることで、プロジェクトを簡単に作成できるようになります。

$ npm install express-generator -g
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.)
/home/ec2-user/.nvm/versions/node/v14.16.1/bin/express -> /home/ec2-user/.nvm/versions/node/v14.16.1/lib/node_modules/express-generator/bin/express-cli.js
+ [email protected]
updated 1 package in 0.531s

次に、プロジェクトの作成を行います。

プロジェクトの作成を行う際に、rootユーザーで作成を行うと、下記画面のようにWindows版のVScodeで編集の権限がなくなってしまいます。

権限の設定を行えば使用できるようになりますが、今回は一般ユーザーでプロジェクトを作成します。

viewの後には、テンプレートエンジンを指定します。
プロジェクト名はstockという名称で作成します。

$ express --view=ejs stock

   create : stock/
   create : stock/public/
   create : stock/public/javascripts/
   create : stock/public/images/
   create : stock/public/stylesheets/
   create : stock/public/stylesheets/style.css
   create : stock/routes/
   create : stock/routes/index.js
   create : stock/routes/users.js
   create : stock/views/
   create : stock/views/error.ejs
   create : stock/views/index.ejs
   create : stock/app.js
   create : stock/package.json
   create : stock/bin/
   create : stock/bin/www

   change directory:
     $ cd stock

   install dependencies:
     $ npm install

   run the app:
     $ DEBUG=stock:* npm start

stockというディレクトリが作成され、その配下にExpressの雛形が作成されます。

必要なパッケージのインストール

次に、依存関係にあるパッケージのインストールを行います。
インストールは、stockディレクトリに移動してから行います。

$ cd stock/
$ npm install
npm notice created a lockfile as package-lock.json. You should commit this file.
added 54 packages from 38 contributors and audited 55 packages in 1.442s
found 0 vulnerabilities

次に、nodemonをインストールします。
nodemonはファイルに変更があると自動でサーバーを再起動してくれるツールです。
では、インストールを行います。

$ npm install -g nodemon
/home/ec2-user/.nvm/versions/node/v14.16.1/bin/nodemon -> /home/ec2-user/.nvm/versions/node/v14.16.1/lib/node_modules/nodemon/bin/nodemon.js

> [email protected] postinstall /home/ec2-user/.nvm/versions/node/v14.16.1/lib/node_modules/nodemon
> node bin/postinstall || exit 0

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@~2.3.1 (node_modules/nodemon/node_modules/chokidar/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

+ [email protected]
added 119 packages from 53 contributors in 2.978s

nodemonのインストール後に、package.jsonファイルを編集します。
package.jsonファイルのscripts セクションにnodemonを起動した時のパスを記入します。

/stock/package.json
{
  "name": "stock",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "start": "node ./bin/www",
    "devstart": "nodemon ./bin/www"    ・・・ここを追記
  },
  "dependencies": {
    "cookie-parser": "~1.4.4",
    "debug": "~2.6.9",
    "ejs": "~2.6.1",
    "express": "~4.16.1",
    "http-errors": "~1.6.3",
    "morgan": "~1.9.1"
  },
  "devDependencies": {
    "nodemon": "^2.0.7"
  }
}

nodemonを起動します。

$ DEBUG=stock:* npm run devstart

> [email protected] devstart /home/share/training/stock
> nodemon ./bin/www

[nodemon] 2.0.7
[nodemon] to restart at any time, enter `rs`
[nodemon] watching path(s): *.*
[nodemon] watching extensions: js,mjs,json
[nodemon] starting `node ./bin/www`

サーバーが起動しました。
試しに、3000番ポートにアクセスしてみます。
開発環境とブラウザのOSが同じであれば、localhostを使用してアクセスすることができます。
私の様に、開発環境にゲストOS、ブラウザはホストOSから確認を行いたい場合は「http://<ゲストOSのIPアドレス>:3000」でアクセスすることができます。

では、ブラウザで確認を行います。

無事にExpressのデフォルトのページにアクセスできました。

Hello Worldの出力

では、先ほどのページをHello Worldという記述に変更します。

/stock/routes/index.js
var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/', function(req, res, next) {
  res.send('Hello World' );
});

module.exports = router;

先ほどと同じＵＲＬにアクセスします。

ExpressのデフォルトのページがHello Worldに変更されていることを確認しました。

以上になります。
ありがとうございました。