はじめに
- Node.jsをDockerで起動し、適当なWeb画面を表示させるところまでをやります
- Node.jsでのサンプルはAkinari Tsugoさんの記事を参考に実装しました
やったこと
- Node.js（express + ejs）の環境をdockerで構築する
- express + ejsを使用したWebアプリサンプルを作成し、docker上で起動させる
使用するフレームワークについて
expressとは
- Node.jsでWebアプリを開発する際に使用するフレームワーク
- 画面遷移とかWebアプリ開発に必要な諸々をサポートする機能あり
- expressの公式はこちら
ejsとは
- JavaScriptでHTMLを作成できるテンプレート言語
- JavaでいうところのJSPに相当する
- ejsの公式はこちら
node.jsをdockerで構築する
Dockerfileの作成
- 鉄板のalpineを選択
- express、ejsのみをnpmで投入
FROM node:alpineRUN npm install express
RUN npm install ejs
# 作業ディレクトリへ移動WORKDIR /app# 3000番ポートを公開EXPOSE 3000docker-compose.ymlの作成
- volumesの設定など、何かとdocker-composeにしておいた方がいいのでdocker-compose.ymlを作成
tty: trueとしておくことで、コンテナをずっと起動状態にできるbuild: .でDockerfileの位置を指定volumes:の指定で、コンテナ内の/appをホスト側にもマウント
version: '3'
services:
app:
build: .
tty: true
container_name: node-sample01
volumes:
- ./app:/app
ports:
- "8080:3000"
Webアプリサンプル
ディレクトリ構成
- ディレクトリ全体構成は以下の通り
app/
├ public/
│ └ 静的なファイル群
├ routes
│ └ index.js
├ views
│ └ index.ejs
└ app.js
Dockerfile
docker-compose.yml
app.js
varexpress=require('express');varapp=express();// テンプレートエンジンをEJSに設定app.set('views','./views');app.set('view engine','ejs');// public配下の静的ファイルは無条件に公開app.use('/public',express.static('public'));// URLと処理をマッピングapp.use('/',require('./routes/index.js'));// ポート3000で起動app.listen(3000);// アプリケーション開始時のログconsole.log('Server running at http://localhost:3000');index.js
varexpress=require('express');varrouter=express.Router();// デフォルトルーティングrouter.get('/',function(request,response){// パラメータに値を設定、設定したパラメータはejs内で参照可能となるresponse.render('index',{title:'NodeSample01',message:'Hello Node.js'});});module.exports=router;index.ejs
- index.jsで設定した
titleとmessageをejs内で参照
<!DOCTYPE html><htmllang="ja"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1"><title><%=title%></title><linkrel="stylesheet"href="/public/bootstrap/bootstrap.css"/><linkrel="stylesheet"href="/public/css/index.css"/><script type="text/javascript"src="/public/jquery/jquery.js"></script><script type="text/javascript"src="/public/bootstrap/bootstrap.js"></script><script type="text/javascript"src="/public/js/index.js"></script></head><body><navclass="navbar navbar-inverse navbar-fixed-top"><divclass="container"><divclass="navbar-header"><buttontype="button"class="navbar-toggle collapsed"data-toggle="collapse"data-target="#navbar"aria-expanded="false"aria-controls="navbar"><spanclass="sr-only">Toggle navigation</span><spanclass="icon-bar"></span></button><aclass="navbar-brand"href="#">Hello Project</a></div></div></nav><divclass="container"><divclass="starter-template"><p><%=message%></p><p><imgid="img"src="/public/images/drum.jpg"class="img-thumbnail"></p></div></div></body></html>起動方法
docker-compose upにてコンテナを起動したら、以下でコンテナにログイン
docker exec-it node-sample01 /bin/ash
- コンテナ内でNode.jsを起動
node app.js
サンプル画面の表示
http://localhost:8080で以下画面が表示される![NodeSample01.png]()
