Dockerを使用してNode.jsアプリケーションを構築する方法[クイックスタート]

投稿日: 2022-07-16 2022-10-16
タグ: Applications, Docker, Node.js, Quickstart

序章

このチュートリアルでは、ExpressフレームワークとBootstrapを使用する静的Webサイトのアプリケーションイメージを作成する手順を説明します。次に、そのイメージを使用してコンテナーを構築し、それを Docker Hub にプッシュし、それを使用して別のコンテナーを構築し、アプリケーションを再作成してスケーリングする方法を示します。

このチュートリアルのより詳細なバージョンと各ステップのより詳細な説明については、Dockerを使用してNode.jsアプリケーションを構築する方法を参照してください。

前提条件

このチュートリアルに従うには、次のものが必要です。

A sudo サーバーまたはローカル環境のユーザー。
Docker。
Node.jsと npm.
DockerHubアカウント。

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

まず、root以外のユーザーのホームディレクトリにプロジェクトのディレクトリを作成します。

mkdir node_project

このディレクトリに移動します。

cd node_project

これがプロジェクトのルートディレクトリになります。

次に、プロジェクトの依存関係を使用してpackage.jsonを作成します。

nano package.json

プロジェクトに関する次の情報をファイルに追加します。著者情報を自分の名前と連絡先の詳細に置き換えてください。

〜/ node_project / 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",
  "scripts": {
    "start": "node app.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "nodejs",
    "bootstrap",
    "express"
  ],
  "dependencies": {
    "express": "^4.16.4"
  }
}

プロジェクトの依存関係をインストールします。

npm install

ステップ2—アプリケーションファイルを作成する

サメに関する情報をユーザーに提供するウェブサイトを作成します。

開ける app.js プロジェクトのルートを定義するには、メインプロジェクトディレクトリで次の手順を実行します。

nano app.js

次のコンテンツをファイルに追加して、ExpressアプリケーションとRouterオブジェクトを作成し、ベースディレクトリ、ポート、およびホストを変数として定義し、ルートを設定して、 router ミドルウェアとアプリケーションの静的アセット：

〜/ node_project / app.js

var express = require("express");
var app = express();
var router = express.Router();

var path = __dirname + '/views/';

// Constants
const PORT = 8080;
const HOST = '0.0.0.0';

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(8080, function () {
  console.log('Example app listening on port 8080!')
})

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

mkdir views

開ける index.html:

nano views/index.html

次のコードをファイルに追加します。これにより、Boostrapがインポートされ、ジャンボトロンコンポーネントが作成され、より詳細な情報へのリンクが追加されます。 sharks.html 情報ページ：

〜/ node_project / views / index.html

<!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://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
      <link href="css/styles.css" rel="stylesheet">
      <link href='https://fonts.googleapis.com/css?family=Merriweather:400,700' rel='stylesheet' type='text/css'>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
   </head>
   <body>
      <nav class="navbar navbar-inverse navbar-static-top">
         <div class="container">
            <div class="navbar-header">
               <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
               <span class="sr-only">Toggle navigation</span>
               <span class="icon-bar"></span>
               <span class="icon-bar"></span>
               <span class="icon-bar"></span>
               </button>
               <a class="navbar-brand" href="#">Everything Sharks</a>
            </div>
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
               <ul class="nav navbar-nav mr-auto">
                  <li class="active"><a href="/">Home</a></li>
                  <li><a href="/sharks">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-md-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-md-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>

次に、というファイルを開きます sharks.html:

nano views/sharks.html

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

〜/ node_project / views / sharks.html

<!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://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
      <link href="css/styles.css" rel="stylesheet">
      <link href='https://fonts.googleapis.com/css?family=Merriweather:400,700' rel='stylesheet' type='text/css'>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
   </head>
   <nav class="navbar navbar-inverse navbar-static-top">
      <div class="container">
         <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Everything Sharks</a>
         </div>
         <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav mr-auto">
               <li><a href="/">Home</a></li>
               <li class="active"><a href="/sharks">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-md-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-md-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>
   </body>
</html>

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

mkdir views/css

スタイルシートを開き、次のコードを追加します。これにより、ページに必要な色とフォントが設定されます。

〜/ node_project / 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;
}

アプリケーションを起動します。

npm start

ブラウザを次の場所に移動します http://your_server_ip:8080 また localhost:8080 ローカルで作業している場合。次のランディングページが表示されます。

Get SharkInfoボタンをクリックします。次の情報ページが表示されます。

これで、アプリケーションが稼働しています。準備ができたら、次のように入力してサーバーを終了します CTRL+C.

ステップ3—Dockerfileを作成する

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

nano Dockerfile

次のコードをファイルに追加します。

〜/ node_project / 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" ]

このDockerfileはアルパインベースイメージを使用し、アプリケーションファイルがDockerノードイメージによってデフォルトで提供される非ルートノードユーザーによって所有されることを保証します。

次に、ローカルノードモジュール、npmログ、Dockerfile、および .dockerignore あなたに .dockerignore ファイル：

〜/ node_project / .dockerignore

node_modules
npm-debug.log
Dockerfile
.dockerignore

dockerbuildコマンドを使用してアプリケーションイメージをビルドします。

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

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

画像を確認してください：

docker images

次の出力が表示されます。

OutputREPOSITORY                                         TAG                 IMAGE ID            CREATED             SIZE
your_dockerhub_username/nodejs-image-demo          latest              1c723fb2ef12        8 seconds ago       895MB
node                                               10                  f09e7c96b6de        17 hours ago        893MB

次のコマンドを実行して、このイメージを使用してコンテナを構築します。

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

docker ps を使用して、実行中のコンテナーのリストを調べます。

docker ps

次の出力が表示されます。

OutputCONTAINER ID        IMAGE                                                   COMMAND             CREATED             STATUS              PORTS                  NAMES
e50ad27074a7        your_dockerhub_username/nodejs-image-demo               "npm start"         8 seconds ago       Up 7 seconds        0.0.0.0:80->8080/tcp   nodejs-image-demo

コンテナが実行されている状態で、ブラウザを次の場所に移動してアプリケーションにアクセスできます。 http://your_server_ip また localhost. アプリケーションのランディングページがもう一度表示されます。

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

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

イメージをプッシュするための最初のステップは、DockerHubアカウントにログインすることです。

docker login -u your_dockerhub_username -p your_dockerhub_password

この方法でログインすると、 ~/.docker/config.json DockerHubのクレデンシャルを使用してユーザーのホームディレクトリにファイルします。

代わりに独自のユーザー名を使用して画像をプッシュアップします your_dockerhub_username:

docker push your_dockerhub_username/nodejs-image-demo

必要に応じて、現在のアプリケーションコンテナとイメージを破棄して再構築することにより、イメージレジストリのユーティリティをテストできます。

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

docker ps

次の出力が表示されます。

OutputCONTAINER ID        IMAGE                                       COMMAND             CREATED             STATUS              PORTS                  NAMES
e50ad27074a7        your_dockerhub_username/nodejs-image-demo   "npm start"         3 minutes ago       Up 3 minutes        0.0.0.0:80->8080/tcp   nodejs-image-demo

を使用して CONTAINER ID 出力にリストされている場合は、実行中のアプリケーションコンテナを停止します。以下で強調表示されているIDを自分のものに置き換えてください CONTAINER ID:

docker stop e50ad27074a7

すべての画像を -a 国旗：

docker images -a

画像の名前とともに次の出力が表示されます。 your_dockerhub_username/nodejs-image-demo、一緒に node 画像とビルドからの他の画像：

OutputREPOSITORY                                           TAG                 IMAGE ID            CREATED             SIZE
your_dockerhub_username/nodejs-image-demo            latest              1c723fb2ef12        7 minutes ago       895MB
<none>                                               <none>              e039d1b9a6a0        7 minutes ago       895MB
<none>                                               <none>              dfa98908c5d1        7 minutes ago       895MB
<none>                                               <none>              b9a714435a86        7 minutes ago       895MB
<none>                                               <none>              51de3ed7e944        7 minutes ago       895MB
<none>                                               <none>              5228d6c3b480        7 minutes ago       895MB
<none>                                               <none>              833b622e5492        8 minutes ago       893MB
<none>                                               <none>              5c47cc4725f1        8 minutes ago       893MB
<none>                                               <none>              5386324d89fb        8 minutes ago       893MB
<none>                                               <none>              631661025e2d        8 minutes ago       893MB
node                                                 10                  f09e7c96b6de        17 hours ago        893MB

次のコマンドを使用して、停止したコンテナと、未使用またはぶら下がっているイメージを含むすべてのイメージを削除します。

docker system prune -a

すべてのイメージとコンテナーが削除されたので、DockerHubからアプリケーションイメージをプルできます。

docker pull your_dockerhub_username/nodejs-image-demo

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

docker images

アプリケーションイメージが表示されます。

OutputREPOSITORY                                     TAG                 IMAGE ID            CREATED             SIZE
your_dockerhub_username/nodejs-image-demo      latest              1c723fb2ef12        11 minutes ago      895MB

これで、ステップ3のコマンドを使用してコンテナーを再構築できます。

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

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

docker ps

OutputCONTAINER ID        IMAGE                                                   COMMAND             CREATED             STATUS              PORTS                  NAMES
f6bc2f50dff6        your_dockerhub_username/nodejs-image-demo               "npm start"         4 seconds ago       Up 3 seconds        0.0.0.0:80->8080/tcp   nodejs-image-demo

訪問 http://your_server_ip また localhost もう一度、実行中のアプリケーションを表示します。

このチュートリアルに関連するより詳細なガイドへのリンクは次のとおりです。

Ubuntu18.04にDockerComposeをインストールする方法。
Ubuntu18.04でDockerマシンを使用してリモートDockerホストをプロビジョニングおよび管理する方法。
Dockerコンテナ間でデータを共有する方法。
Dockerコンテナとホスト間でデータを共有する方法。

また、このチュートリアルが採用されているNode.jsを使用したコンテナからKubernetesへの長いシリーズもご覧いただけます。

さらに、Dockerの詳細については、Dockerリソースの完全なライブラリを参照してください。

getdocs

13036

序章

前提条件

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

ステップ2—アプリケーションファイルを作成する

ステップ3—Dockerfileを作成する

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

関連チュートリアル

getdocs