前提
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.15volumes:-.:/projecttty:trueworking_dir:/projectcommand:bashNodeのバージョンは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。
ルーティングを作成
constexpress=require('express');constapp=express();app.get('/',(req,res)=>{res.render("index",{message:"うおおおおおお"})});constport=process.env.PORT||3000app.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.15volumes:-.:/projecttty:trueworking_dir:/projectports:-"3000:3000"command:npm startportsを追加し、コンテナを立ち上げた時に 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><htmllang='en'><head><metacharset='UTF-8'><metaname='viewport'content='width=device-width, initial-scale=1.0'><title>Document</title></head><body><p><%=message%></p></body></html>constexpress=require('express');constapp=express();app.get('/',(req,res)=>{res.render("index.ejs",{message:"うおおおおおお"})});constport=process.env.PORT||3000app.listen(port,()=>console.log(`server started port ${port}`));renderでejsを描画し、「message」を埋め込む
