前提
ProgateのNodejsコース完了程度の知識があること。
Docker使える。
VSCodeでDocker入門
本記事の対象者
ProgateでNodejs学んだ。次は自分のプロジェクトを作ってみたいって人
本記事でやること
- DockerでNodejs環境を作る
- プロジェクトの作成
- ライブラリのインストール
- ブラウザ上でページを確認
環境
Docker
VSCode
Node 14.15
Git
プロジェクトの作成
まず適当な場所にプロジェクトのフォルダを作成。
本記事では nodejs-sample-app
という名前で作った。
そして、そのフォルダをVSCodeで開く。
以下のファイルを作成
version: "3"
services:
node:
image: node:14.15
volumes:
- .:/project
tty: true
working_dir: /project
command: bash
Nodeのバージョンは14.15を指定しておく。
コンテナに入ってバージョンを確認。
root@cf2295d42525:/project# node -v
v14.15.4
そしたらプロジェクトを作る準備が完了。
ここからnpmコマンドを使ってプロジェクトを構築する。
以下のコマンドを打つと、プロジェクトに package.json
というファイルが作成される。
$ npm init -y
root@cf2295d42525:/project# npm init -y
Wrote to /project/package.json:
{
"name": "project",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}
package.json は Nodejsプロジェクトの様々な情報をかくところと把握しておけばOK
次に Webアプリケーション において一番最初に呼ばれるjsファイルを作る。
package.json と同じ階層に以下のように作成
console.log("Hello nodejs");
そうしたら、以下のコマンドで実行されるか確かめる
root@cf2295d42525:/project# node app.js
Hello nodejs
Hello nodejs と表示されたらOK
次に package.json を以下のように変更
{
"name": "project",
"version": "1.0.0",
"description": "",
"main": "app.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "node app.js"
},
"keywords": [],
"author": "",
"license": "ISC"
}
mainを修正 testの末尾にカンマ追加, scripts.start追加
そうすると、 npm start
でscripts.startで指定したコマンドが呼ばれるようになる。
root@cf2295d42525:/project# npm start
> project@1.0.0 start /project
> node app.js
Hello nodejs
これでひと段落。
このタイミングでgit init
すると良い。
expressのインストールとルーティング
expressのインストール
$ npm install express
package.jsonに以下のように追記される
{
...
"dependencies": {
"express": "^4.17.1"
}
}
そして、node_modulesというフォルダと package-lock.jsonというファイルができる。
node_modulesにはインストールしたpackageが入る。
これはプッシュしたくないのでgitignoreを作成してつっこむ。
node_modules/
installして差分がでてるのでここでcommit。
ルーティングを作成
const express = require('express');
const app = express();
app.get('/', (req, res) => {
res.send({message: "ok!"});
});
const port = process.env.PORT || 3000
app.listen(port, () => console.log(`server started port ${port}`));
npm start
すると、以下のように表示される。
root@cf2295d42525:/project# npm start
> project@1.0.0 start /project
> node app.js
server started port 3000
しかし、今のままではブラウザでひらけない
docker-composeにportについて記述する必要がある。
version: "3"
services:
node:
image: node:14.15
volumes:
- .:/project
tty: true
working_dir: /project
ports:
- "3000:3000"
command: npm start
portsを追加し、コンテナを立ち上げた時に npm start 実行するように変更した。
docker-compose を編集したら、コンテナを作り直す必要がある。
一度コンテナを消して以下を実行
$ docker-compose up -d
ちゃんとサーバーとして起動しているかログを確認
nodejs-sample-app(main)$ docker-compose logs
Attaching to nodejs-sample-app_node_1
node_1 |
node_1 | > project@1.0.0 start /project
node_1 | > node app.js
node_1 |
node_1 | server started port 3000
いけてそう。
ブラウザで確認
ejs
ejsを使うためにインストール
$ npm install ejs
viewsフォルダを作成し、その中にejsファイルを作成
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Document</title>
</head>
<body>
<p><%= message %></p>
</body>
</html>
const express = require('express');
const app = express();
app.get('/', (req, res) => {
res.render("index.ejs", {message: "うおおおおおお"})
});
const port = process.env.PORT || 3000
app.listen(port, () => console.log(`server started port ${port}`));
renderでejsを描画し、「message」を埋め込む