DockerでNode.jsアプリケーションを構築する方法

導入

Dockerプラットフォームは、開発者がアプリケーションをコンテナとしてパッケージ化し、実行することを可能にします。コンテナとは、共有オペレーティングシステム上で実行される単一のプロセスであり、仮想マシンよりも軽量な代替手段です。コンテナ自体は新しいものではありませんが、プロセスの分離や環境の標準化といったメリットがあり、分散アプリケーションアーキテクチャを採用する開発者が増えるにつれて、これらのメリットはますます重要になるでしょう。.

Docker を使ってアプリケーションをビルドおよびスケーリングする際、通常はまずアプリケーションのイメージを作成し、それをコンテナ内で実行します。このイメージには、アプリケーションコード、ライブラリ、設定ファイル、環境変数、ランタイムが含まれます。イメージを使用することで、コンテナ環境が標準化され、アプリケーションのビルドと実行に必要なものだけが含まれるようになります。.

このチュートリアルでは、ExpressフレームワークとBootstrapフレームワークを使用した静的ウェブサイト用のアプリケーションイメージを作成します。次に、そのイメージを使用してコンテナを構築し、将来使用するためにDocker Hubにプッシュします。最後に、保存したイメージをDocker Hubリポジトリからプルし、別のコンテナにビルドすることで、アプリケーションのリファクタリングとスケーリングの方法を説明します。.

前提条件

• Ubuntu を実行するサーバー。sudo 権限を持つ非 root ユーザーとファイアウォールが有効になっています。設定方法については、こちらのリストからディストリビューションを選択し、初期サーバーインストールガイドに従ってください。.
• Docker がサーバーにインストールされています。.
• Node.js と npm がインストールされています。.
• Docker Hub アカウント。.

ステップ1 – アプリケーションの依存関係をインストールする

イメージを作成するには、まずアプリケーションファイルをビルドし、それをコンテナにコピーする必要があります。これらのファイルには、アプリケーションの静的コンテンツ、コード、依存関係が含まれています。.

まず、非rootユーザーのホームディレクトリにプロジェクト用のディレクトリを作成します。プロジェクト名は node_project としますが、任意の名前に置き換えてください。

mkdir node_project

次のディレクトリに移動します:

cd node_project

これはプロジェクトのメインディレクトリになります。.

次に、プロジェクトの依存関係やその他の識別情報を記述したpackage.jsonファイルを作成します。nanoまたはお好みのエディタでファイルを開きます。

nano package.json

プロジェクト名、作成者、ライセンス、エントリポイント、依存関係など、以下の情報を追加します。作成者情報は、必ずご自身の名前と連絡先に置き換えてください。

{
"name": "nodejs-image-demo",
"version": "1.0.0",
"description": "nodejs image demo",
"author": "Sammy the Shark <[email protected]>",
"license": "MIT",
"main": "app.js",
"keywords": [
"nodejs",
"bootstrap",
"express"
],
"dependencies": {
"express": "^4.16.4"
}
}

このファイルには、プロジェクト名、作者、そして配布ライセンスが記載されています。npmでは、プロジェクト名は簡潔で分かりやすく、npmレジストリ内での重複を避けることを推奨しています。ライセンスセクションにはMITライセンスを記載しており、これによりプログラムコードの自由な使用と配布が許可されます。さらに、このファイルには以下の内容が記載されています。

• “main”：アプリケーションのエントリポイント、app.js。このファイルは後で作成します。.
• “「依存関係」: プロジェクトの依存関係 (この場合は Express 4.16.4 以上)。.

このファイルにはリポジトリは記載されていませんが、こちらの手順に従ってpackage.jsonファイルにリポジトリを追加することで追加できます。これは、アプリケーションを編集する際に便利な追加機能です。変更が完了したら、ファイルを保存して閉じてください。.

プロジェクトの依存関係をインストールするには、次のコマンドを実行します。

npm install

これにより、package.json ファイルにリストされたパッケージがプロジェクトディレクトリにインストールされます。これでアプリケーションファイルをビルドできます。.

ステップ2 – プログラムファイルを作成する

サメに関する情報をユーザーに提供するウェブサイトを作成します。アプリケーションは、メインエントリであるapp.jsと、プロジェクトの固定アセットを含むviewsディレクトリで構成されます。ランディングページであるindex.htmlでは、ユーザーに基本情報と、より詳細なサメ情報を含むページであるsharks.htmlへのリンクを提供します。viewsディレクトリには、ランディングページとsharks.htmlの両方を作成します。.

まず、メイン プロジェクト ディレクトリの app.js を開いて、プロジェクト パスを定義します。

nano app.js

ファイルの最初の部分では、Express および Router アプリケーション オブジェクトを作成し、ベース ディレクトリとポートを定数として定義します。

const express = require('express');
const app = express();
const router = express.Router();

const path = __dirname + '/views/';
const port = 8080;

require 関数は Express モジュールをロードし、これを使用してアプリケーションオブジェクトとルーターオブジェクトを作成します。ルーターオブジェクトはアプリケーションのルーティング機能を実行します。HTTP メソッドのルートを定義すると、このオブジェクトにルートを追加して、アプリケーションがリクエストを処理する方法を指定します。.

このファイルのセクションにはいくつかの定数も含まれています。 パス そして ポート セット:

• path: 現在のプロジェクト ディレクトリ内の views ディレクトリの下にあるベース ディレクトリを定義します。.
• ポート: プログラムにポート 8080 をリッスンして接続するように指示します。.

次に、ルーター オブジェクトを使用してアプリケーション ルートを設定します。

...
router.use(function (req,res,next) {
console.log('/' + req.method);
next();
});
router.get('/', function(req,res){
res.sendFile(path + 'index.html');
});
router.get('/sharks', function(req,res){
res.sendFile(path + 'sharks.html');
});

router.use 関数は、ルーターリクエストをログに記録し、アプリケーションのルートに転送するミドルウェア関数をロードします。これらの関数は、以下の関数で定義されており、プロジェクトのベースURLへのGETリクエストはindex.htmlページを返し、/sharksルートへのGETリクエストはsharks.htmlを返すように指定しています。.

最後に、ルーター ミドルウェアとアプリケーションの静的アセットをマウントし、アプリケーションにポート 8080 でリッスンするように指示します。

...
app.use(express.static(path));
app.use('/', router);
app.listen(port, function () {
console.log('Example app listening on port 8080!')
})

完成した app.js ファイルは次のようになります。

const express = require('express');
const app = express();
const router = express.Router();
const path = __dirname + '/views/';
const port = 8080;
router.use(function (req,res,next) {
console.log('/' + req.method);
next();
});
router.get('/', function(req,res){
res.sendFile(path + 'index.html');
});
router.get('/sharks', function(req,res){
res.sendFile(path + 'sharks.html');
});
app.use(express.static(path));
app.use('/', router);
app.listen(port, function () {
console.log('Example app listening on port 8080!')
})

完了したらファイルを保存して閉じます。.

次に、アプリケーションに静的コンテンツを追加しましょう。まずはviewsディレクトリを作成しましょう。

mkdir views

ランディング ページ ファイル index.html を開きます。

nano views/index.html

ファイルに次のコードを追加します。このコードは、Bootstrap をインポートし、sharks.html の詳細情報ページへのリンクを含む jumbotron コンポーネントを作成します。

<!DOCTYPE html>
<html lang="en">
<head>
<title>About Sharks</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link href="css/styles.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Merriweather:400,700" rel="stylesheet" type="text/css">
</head>
<body>
<nav class="navbar navbar-dark bg-dark navbar-static-top navbar-expand-md">
<div class="container">
<button type="button" class="navbar-toggler collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span>
</button> <a class="navbar-brand" href="#">Everything Sharks</a>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav mr-auto">
<li class="active nav-item"><a href="/" class="nav-link">Home</a>
</li>
<li class="nav-item"><a href="/sharks" class="nav-link">Sharks</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="jumbotron">
<div class="container">
<h1>Want to Learn About Sharks?</h1>
<p>Are you ready to learn about sharks?</p>
<br>
<p><a class="btn btn-primary btn-lg" href="/sharks" role="button">Get Shark Info</a>
</p>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-6">
<h3>Not all sharks are alike</h3>
<p>Though some are dangerous, sharks generally do not attack humans. Out of the 500 species known to researchers, only 30 have been known to attack humans.
</p>
</div>
<div class="col-lg-6">
<h3>Sharks are ancient</h3>
<p>There is evidence to suggest that sharks lived up to 400 million years ago.
</p>
</div>
</div>
</div>
</body>
</html>

トップレベルのナビゲーションバーは、ユーザーがHomeページとSharksページ間を移動できるようにします。navbar-navコンポーネントでは、Bootstrapのactiveクラスを使用して現在のページを表示します。また、app.jsで定義したルートと一致する静的ページのルートも指定しています。

...
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav mr-auto">
<li class="active nav-item"><a href="/" class="nav-link">Home</a>
</li>
<li class="nav-item"><a href="/sharks" class="nav-link">Sharks</a>
</li>
</ul>
</div>
...

さらに、ジャンボトロンのボタンにサメの情報ページへのリンクを作成しました。

...
<div class="jumbotron">
<div class="container">
<h1>Want to Learn About Sharks?</h1>
<p>Are you ready to learn about sharks?</p>
<br>
<p><a class="btn btn-primary btn-lg" href="/sharks" role="button">Get Shark Info</a>
</p>
</div>
</div>
...

ヘッダーにはカスタム スタイルシートへのリンクもあります。

...
<link href="css/styles.css" rel="stylesheet">
...

このステップの最後に、このスタイルシートを作成します。完了したらファイルを保存して閉じてください。アプリのランディングページを配置することで、sharks.htmlというサメの情報ページを作成できます。このページは、サメに興味のあるユーザーに、サメに関するより詳しい情報を提供します。.

ファイルを開きます:

nano views/sharks.html

Bootstrap とカスタム スタイルシートをインポートし、特定のサメに関する詳細な情報をユーザーに提供する次のコードを追加します。

<!DOCTYPE html>
<html lang="en">
<head>
<title>About Sharks</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link href="css/styles.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Merriweather:400,700" rel="stylesheet" type="text/css">
</head>
<nav class="navbar navbar-dark bg-dark navbar-static-top navbar-expand-md">
<div class="container">
<button type="button" class="navbar-toggler collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span>
</button> <a class="navbar-brand" href="/">Everything Sharks</a>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav mr-auto">
<li class="nav-item"><a href="/" class="nav-link">Home</a>
</li>
<li class="active nav-item"><a href="/sharks" class="nav-link">Sharks</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="jumbotron text-center">
<h1>Shark Info</h1>
</div>
<div class="container">
<div class="row">
<div class="col-lg-6">
<p>
<div class="caption">Some sharks are known to be dangerous to humans, though many more are not. The sawshark, for example, is not considered a threat to humans.
</div>
<img src="https://assets.digitalocean.com/articles/docker_node_image/sawshark.jpg" alt="Sawshark">
</p>
</div>
<div class="col-lg-6">
<p>
<div class="caption">Other sharks are known to be friendly and welcoming!</div>
<img src="https://assets.digitalocean.com/articles/docker_node_image/sammy.png" alt="Sammy the Shark">
</p>
</div>
</div>
</div>
</html>

このファイルでは、現在のページを表示するために active クラスを使用していることに注意してください。完了したら、ファイルを保存して閉じてください。.

最後に、views ディレクトリに css フォルダを作成して、index.html と sharks.html でリンクしたカスタム CSS スタイルシートを作成します。

mkdir views/css

スタイルシートを開きます:

nano views/css/styles.css

ページに希望の色とフォントを設定する次のコードを追加します。

.navbar {
margin-bottom: 0;
}
body {
background: #020A1B;
color: #ffffff;
font-family: 'Merriweather', sans-serif;
}
h1,
h2 {
font-weight: bold;
}
p {
font-size: 16px;
color: #ffffff;
}
.jumbotron {
background: #0048CD;
color: white;
text-align: center;
}
.jumbotron p {
color: white;
font-size: 26px;
}
.btn-primary {
color: #fff;
text-color: #000000;
border-color: white;
margin-bottom: 5px;
}
img,
video,
audio {
margin-top: 20px;
max-width: 80%;
}
div.caption: {
float: left;
clear: both;
}

このファイルでは、フォントと色の設定に加えて、画像の最大幅を80%に設定することで画像のサイズも制限しています。これにより、画像がページ上で必要以上にスペースを占有することがなくなります。完了したら、ファイルを保存して閉じてください。.

プログラム ファイルがインストールされ、プロジェクトの依存関係がインストールされたら、プログラムを起動する準備が整います。.

前提条件にある初期サーバー設定チュートリアルに従った場合、SSHトラフィックのみを許可するアクティブなファイアウォールが存在します。ポート8080へのトラフィックを許可するには、以下の手順に従います。

sudo ufw allow 8080

プログラムを起動するには、プロジェクトのルート ディレクトリにいることを確認してください。

cd ~/node_project

node app.js でアプリケーションを起動します。

node app.js

ブラウザで http://your_server_ip:8080 にアクセスしてください。次のランディングページが表示されます。

「Shark Infoを取得」ボタンをクリックします。以下の情報ページが読み込まれます。

これでアプリケーションが起動しました。準備ができたら、Ctrl+C を押してサーバーを終了してください。次に、必要に応じてアプリケーションを再構築およびスケールするための Dockerfile の作成に進みます。.

ステップ3 – Dockerfileの作成

Dockerfileは、アプリケーションコンテナの実行時に何が含まれるかを指定します。Dockerfileを使用することで、コンテナ環境を定義し、依存関係やランタイムバージョンの競合を回避できます。.

最適なコンテナを構築するためのこれらのガイドラインに従うことで、イメージ レイヤーの数を最小限に抑え、イメージの機能を単一の目的 (アプリケーション ファイルと静的コンテンツの再作成) に制限し、イメージを可能な限り効率的にすることができます。.

プロジェクトのルート ディレクトリに Dockerfile を作成します。

nano Dockerfile

Dockerイメージは、複数のレイヤーイメージを積み重ねて作成されます。まずは、アプリケーションのビルドの出発点となるベースイメージを追加します。.

執筆時点で推奨されているNode.jsのLTSバージョンであるnode:10-alpineイメージを使用しましょう。AlpineイメージはAlpine Linuxプロジェクトから取得されており、イメージサイズを抑えるのに役立ちます。Alpineイメージがプロジェクトに適しているかどうかについて詳しくは、Docker HubのNodeイメージページの「イメージバリアント」セクションをご覧ください。.

アプリケーションのベースイメージを設定するには、次の FROM ディレクティブを追加します。

FROM node:10-alpine

このイメージにはNode.jsとnpmが含まれています。すべてのDockerfileはFROMディレクティブで始まる必要があります。.

Docker Node イメージにはデフォルトで非 root ノードユーザーが含まれており、これを使用することで、アプリケーションコンテナが root として実行されるのを防ぐことができます。コンテナを root として実行することを避け、コンテナ内の権限をプロセスの実行に必要な権限のみに制限することは、推奨されるセキュリティ対策です。そのため、アプリケーションの作業ディレクトリとしてノードユーザーのホームディレクトリを使用し、コンテナ内ではノードユーザーをユーザーとして設定します。Docker Node イメージを使用する際のベストプラクティスの詳細については、こちらのベストプラクティスガイドをご覧ください。.

コンテナ内のアプリケーションコードのパーミッションを微調整するために、アプリケーションディレクトリに加えて、/home/node に node_modules サブディレクトリを作成しましょう。これらのディレクトリを作成することで、必要なパーミッションが付与されます。これは、npm install でコンテナ内にローカル Node.js モジュールを作成する際に重要になります。これらのディレクトリを作成するだけでなく、所有権を Node.js ユーザーに設定します。

...
RUN mkdir -p /home/node/app/node_modules && chown -R node:node /home/node/app

統合 RUN 命令の使用に関する詳細については、コンテナ レイヤーの管理方法に関するこの説明をお読みください。.

次に、アプリケーションの作業ディレクトリを /home/node/app に設定します。

...
WORKDIR /home/node/app

WORKDIR が設定されていない場合、Docker はデフォルトで作成するため、明示的に設定することをお勧めします。.

次に、package.json および package-lock.json (npm 5+ の場合) ファイルをコピーします。

...
COPY package*.json ./

npm install を実行する前、またはアプリケーションコードをコピーする前にこの COPY ディレクティブを追加すると、Docker のキャッシュメカニズムを活用できます。ビルドの各段階で、Docker は特定のディレクティブに対応するレイヤーがキャッシュされているかどうかを確認します。package.json を変更した場合はこのレイヤーが再構築されますが、変更しない場合は、このディレクティブによって Docker は既存のイメージレイヤーを使用し、Node.js モジュールの再インストールを省略できます。.

node_modules ディレクトリの内容を含むすべてのアプリケーション ファイルが非ルート ノード ユーザーに所有されるようにするには、npm install を実行する前にユーザーを node に変更します。

...
USER node

プロジェクトの依存関係をコピーし、ユーザーを切り替えた後、npm install を実行できます。

...
RUN npm install

次に、適切な権限を持つアプリケーション コードをコンテナ上のアプリケーション ディレクトリにコピーします。

...
COPY --chown=node:node . .

これにより、アプリケーション ファイルが非 root ユーザーによって所有されることが保証されます。.

最後に、コンテナのポート 8080 を設定し、アプリケーションを起動します。

...
EXPOSE 8080
CMD [ "node", "app.js" ]

EXPOSE はポートを公開するのではなく、コンテナ実行時に利用可能なポートをドキュメント化する手段として機能します。CMD はアプリケーションを起動するコマンド（この場合は node app.js）を実行します。Dockerfile ごとに CMD コマンドは 1 つだけ記述する必要があることに注意してください。複数の CMD コマンドを記述した場合、最後に記述したコマンドのみが適用されます。.

Dockerfile でできることはたくさんあります。詳細な手順については、Docker の Dockerfile リファレンスドキュメントを参照してください。.

完全な Dockerfile は次のようになります。

FROM node:10-alpine
RUN mkdir -p /home/node/app/node_modules && chown -R node:node /home/node/app
WORKDIR /home/node/app
COPY package*.json ./
USER node
RUN npm install
COPY --chown=node:node . .
EXPOSE 8080
CMD [ "node", "app.js" ]

編集が完了したら、ファイルを保存して閉じます。.

アプリケーションイメージをビルドする前に、.dockerignore ファイルを追加しましょう。.gitignore ファイルと同様に、.dockerignore はプロジェクトディレクトリ内のどのファイルとディレクトリをコンテナにコピーしないかを指定します。.

.dockerignore ファイルを開きます。

nano .dockerignore

ファイル内に、ローカル ノード モジュール、npm ログ、Dockerfile、および .dockerignore ファイルを追加します。

node_modules
npm-debug.log
Dockerfile
.dockerignore

Git を使用している場合は、.git ディレクトリと .gitignore ファイルも追加する必要があります。.

完了したらファイルを保存して閉じます。.

これで、docker build コマンドを使ってアプリケーションイメージをビルドする準備が整いました。docker build に -t フラグを使用すると、イメージに覚えやすい名前を付けてタグ付けできます。イメージをDocker Hubにプッシュするので、タグにはDocker Hubのユーザー名を含めましょう。ここでは nodejs-image-demo というタグを付けますが、これは任意の名前に置き換えても構いません。また、 your_dockerhub_username をDocker Hubのユーザー名に置き換えることも忘れないでください。

sudo docker build -t your_dockerhub_username/nodejs-image-demo .

. ビルドのコンテキストが現在のディレクトリであることを指定します。.

イメージの作成には1～2分ほどかかります。完了したら、イメージを確認してください。

sudo docker images

次のような出力が得られます。

Output
REPOSITORY TAG IMAGE ID CREATED SIZE
your_dockerhub_username/nodejs-image-demo latest 1c723fb2ef12 8 seconds ago 73MB
node 10-alpine f09e7c96b6de 3 weeks ago 70.7MB

これで、docker runを使ってこのイメージでコンテナを作成できます。このコマンドに3つのコマンドを追加します。

• -p: コンテナ上のポートを公開し、ホスト上のポートにマッピングします。ホスト上のポートは80番を使用しますが、そのポートで他のプロセスが動作している場合は、必要に応じて変更してください。動作の詳細については、Dockerドキュメントのポートバインディングに関する説明をご覧ください。.
• -d: このコンテナをバックグラウンドで実行します。.
• --name: これにより、コンテナに覚えやすい名前を付けることができます。.

コンテナを作成するには、次のコマンドを実行します。

sudo docker run --name nodejs-image-demo -p 80:8080 -d your_dockerhub_username/nodejs-image-demo

コンテナが起動したら、docker ps を使用して実行中のコンテナのリストを確認できます。

sudo docker ps

次のような出力が得られます。

Output
CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES
e50ad27074a7 your_dockerhub_username/nodejs-image-demo "node app.js" 8 seconds ago Up 7 seconds 0.0.0.0:80->8080/tcp nodejs-image-demo

コンテナの実行中に、ブラウザでポートを指定せずにサーバーの IP にアクセスしてアプリケーションにアクセスできるようになります。

http://your_server_ip

アプリのランディング ページがもう一度読み込まれます。.

アプリケーションのイメージを作成したので、将来使用するために Docker Hub にプッシュできます。.

ステップ4 – リポジトリを使用して画像を操作する

アプリケーションイメージをDocker Hubなどのレジストリにプッシュすることで、コンテナの構築やスケールの際に後で使用できるようになります。ここでは、アプリケーションイメージをリポジトリにプッシュし、そのイメージを使ってコンテナを再作成する方法を説明します。.

イメージをプッシュするための最初のステップは、前提条件で作成した Docker Hub アカウントにログインすることです。

sudo docker login -u your_dockerhub_username

プロンプトが表示されたら、Docker Hubアカウントのパスワードを入力してください。この方法でログインすると、ユーザーのホームディレクトリにDocker Hubの認証情報を含む ~/.docker/config.json ファイルが作成されます。.

先ほど作成したタグ your_dockerhub_username/nodejs-image-demo を使用して、アプリケーション イメージを Docker Hub にプッシュできるようになりました。

sudo docker push your_dockerhub_username/nodejs-image-demo

現在のアプリケーション コンテナーとイメージを破棄し、リポジトリ内のイメージを使用して再構築することで、イメージ レジストリ ツールをテストしてみましょう。.

まず、実行中のコンテナを一覧表示します。

sudo docker ps

次のような出力が得られます。

Output
CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES
e50ad27074a7 your_dockerhub_username/nodejs-image-demo "node app.js" 3 minutes ago Up 3 minutes 0.0.0.0:80->8080/tcp nodejs-image-demo

出力に表示されているコンテナIDを使用して、実行中のアプリケーションコンテナを停止します。以下の強調表示されたIDを、ご自身のコンテナIDに置き換えてください。

sudo docker stop e50ad27074a7

-a を使用してすべての画像を一覧表示します:

docker images -a

ビルドからのノード イメージとその他のイメージとともに、イメージ名 your_dockerhub_username/nodejs-image-demo を含む次の出力が表示されます。

Output
REPOSITORY TAG IMAGE ID CREATED SIZE
your_dockerhub_username/nodejs-image-demo latest 1c723fb2ef12 7 minutes ago 73MB
<none> <none> 2e3267d9ac02 4 minutes ago 72.9MB
<none> <none> 8352b41730b9 4 minutes ago 73MB
<none> <none> 5d58b92823cb 4 minutes ago 73MB
<none> <none> 3f1e35d7062a 4 minutes ago 73MB
<none> <none> 02176311e4d0 4 minutes ago 73MB
<none> <none> 8e84b33edcda 4 minutes ago 70.7MB
<none> <none> 6a5ed70f86f2 4 minutes ago 70.7MB
<none> <none> 776b2637d3c1 4 minutes ago 70.7MB
node 10-alpine f09e7c96b6de 3 weeks ago 70.7MB

次のコマンドを使用して、コンテナを停止し、未使用のイメージやハングしているイメージを含むすべてのイメージを削除します。

docker system prune -a

終了時にコンテナと停止したイメージを削除するかどうかを確認するプロンプトが表示されたら、「Y」と入力します。これによりビルド キャッシュも削除されることに注意してください。.

これで、アプリケーションイメージを実行しているコンテナとイメージ自体の両方が削除されました。Dockerコンテナ、イメージ、ボリュームの削除に関する詳細は、「Dockerイメージ、コンテナ、ボリュームの削除方法」をご覧ください。.

すべてのイメージとコンテナを削除したら、Docker Hub からアプリケーション イメージをプルできるようになります。

docker pull your_dockerhub_username/nodejs-image-demo

画像をもう一度リストします。

docker images

出力にはアプリケーションのイメージが含まれます。

Output
REPOSITORY TAG IMAGE ID CREATED SIZE
your_dockerhub_username/nodejs-image-demo latest 1c723fb2ef12 11 minutes ago 73MB

手順 3 のコマンドを使用してコンテナを再構築できます。

docker run --name nodejs-image-demo -p 80:8080 -d your_dockerhub_username/nodejs-image-demo

実行中のコンテナを一覧表示します。

docker ps

Output
CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES
f6bc2f50dff6 your_dockerhub_username/nodejs-image-demo "node app.js" 4 seconds ago Up 3 seconds 0.0.0.0:80->8080/tcp nodejs-image-demo

実行中のアプリケーションを表示するには、もう一度 http://your_server_ip にアクセスしてください。.

結果

このチュートリアルでは、ExpressとBootstrapを使用して静的Webアプリケーションと、そのアプリケーション用のDockerイメージを作成しました。このイメージを使用してコンテナを作成し、Docker Hubにプッシュしました。その後、イメージとコンテナを破棄し、Docker Hubリポジトリを使用して再作成することができました。.