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

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

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

https://expressjs.com/ja/starter/installing.html

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

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

下記にイメージ図を添付しております。
![SnapCrab_NoName_2021-4-27_11-58-31_No-00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1229062/f5642a89-e606-7f38-12dd-a8f923f1947b.png)


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

```
$ npm install express-generator -g
npm WARN deprecated mkdirp@0.5.1: 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
+ express-generator@4.16.1
updated 1 package in 0.531s
```

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

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


![SnapCrab_● packagejson - training - Visual Studio Code_2021-4-22_18-25-47_No-00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1229062/eaefd96a-ab6a-4ef2-e588-0619ef778e89.png)

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

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

> nodemon@2.0.7 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 fsevents@2.3.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

+ nodemon@2.0.7
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

> stock@0.0.0 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」でアクセスすることができます。

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

![i.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1229062/fe13aece-9df7-e0bc-21a8-e19bdf141e65.png)


無事に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;
```
先ほどと同じＵＲＬにアクセスします。

![u.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1229062/157d1591-2e65-5530-f15e-4eecce0c73a2.jpeg)


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

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