#初めに
今回は、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 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で編集の権限がなくなってしまいます。
権限の設定を行えば使用できるようになりますが、今回は一般ユーザーでプロジェクトを作成します。
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を起動した時のパスを記入します。
{
"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」でアクセスすることができます。
では、ブラウザで確認を行います。
無事にExpressのデフォルトのページにアクセスできました。
#Hello Worldの出力
では、先ほどのページをHello Worldという記述に変更します。
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に変更されていることを確認しました。
以上になります。
ありがとうございました。