如何使用 Docker 构建 Node.js 应用程序 [快速入门]

2025-05-24

如何使用 Docker 构建 Node.js 应用程序 [快速入门]

介绍

本教程将指导您创建使用Express框架和Bootstrap的静态网站应用程序镜像。然后，您将使用该镜像构建一个容器，将其推送到Docker Hub，并使用它来构建另一个容器，演示如何重新创建和扩展应用程序。

有关本教程的更详细版本，以及每个步骤的更详细说明，请参阅如何使用 Docker 构建 Node.js 应用程序。

先决条件

要遵循本教程，您需要：

  • sudo您的服务器或本地环境中的用户。
  • Docker。
  • Node.js 和npm。
  • Docker Hub 帐户。

第1步 - 安装应用程序依赖项

首先，在非 root 用户的主目录中为您的项目创建一个目录：

mkdir node_project
Enter fullscreen mode Exit fullscreen mode

导航到此目录：

cd node_project
Enter fullscreen mode Exit fullscreen mode

这将是项目的根目录。

接下来，创建一个package.json包含项目依赖项的：

nano package.json
Enter fullscreen mode Exit fullscreen mode

将有关项目的以下信息添加到文件中；请务必用您自己的姓名和联系方式替换作者信息：

~/node_project/package.json

{
  "name": "nodejs-image-demo",
  "version": "1.0.0",
  "description": "nodejs image demo",
  "author": "Sammy the Shark <sammy@example.com>",
  "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"
  }
}
Enter fullscreen mode Exit fullscreen mode

安装项目的依赖项：

npm install
Enter fullscreen mode Exit fullscreen mode

第2步 - 创建应用程序文件

我们将创建一个网站，向用户提供有关鲨鱼的信息。

在主项目目录中打开app.js定义项目的路由：

nano app.js
Enter fullscreen mode Exit fullscreen mode

将以下内容添加到文件以创建 Express 应用程序和路由器对象，将基目录、端口和主机定义为变量，设置路由，并将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!')
})
Enter fullscreen mode Exit fullscreen mode

接下来，让我们向应用程序添加一些静态内容。创建views目录：

mkdir views
Enter fullscreen mode Exit fullscreen mode

打开index.html：

nano views/index.html
Enter fullscreen mode Exit fullscreen mode

将以下代码添加到文件中，这将导入 Boostrap 并创建一个jumbotron组件，其中包含指向更详细信息页面的链接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>
Enter fullscreen mode Exit fullscreen mode

接下来，打开一个名为的文件sharks.html：

nano views/sharks.html
Enter fullscreen mode Exit fullscreen mode

添加以下代码，导入 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>
Enter fullscreen mode Exit fullscreen mode

最后，创建您链接到的自定义 CSS 样式表index.html，sharks.html首先css在views目录中创建一个文件夹：

mkdir views/css
Enter fullscreen mode Exit fullscreen mode

打开样式表并添加以下代码，这将为我们的页面设置所需的颜色和字体：

~/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;
}
Enter fullscreen mode Exit fullscreen mode

启动应用程序：

npm start
Enter fullscreen mode Exit fullscreen mode

如果您在本地工作，请导航至http://your_server_ip:8080或localhost:8080。您将看到以下登录页面：

应用程序登陆页面

点击“获取鲨鱼信息”按钮。您将看到以下信息页面：

鲨鱼信息页面

现在，您的应用程序已启动并正在运行。准备就绪后，请输入 退出服务器CTRL+C。

第 3 步 — 编写 Dockerfile

在项目的根目录中，创建 Dockerfile：

nano Dockerfile
Enter fullscreen mode Exit fullscreen mode

将以下代码添加到文件：

~/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" ]
Enter fullscreen mode Exit fullscreen mode

此 Dockerfile 使用alpine 基础镜像，并确保应用程序文件由Docker Node 镜像默认提供的非 root节点用户拥有。

接下来，将您的本地节点模块、npm 日志、Dockerfile 添加.dockerignore到您的.dockerignore文件中：

~/node_project/.dockerignore

node_modules
npm-debug.log
Dockerfile
.dockerignore
Enter fullscreen mode Exit fullscreen mode

使用以下命令构建应用程序映像docker build：

docker build -t your_dockerhub_username/nodejs-image-demo .
Enter fullscreen mode Exit fullscreen mode

指定.构建上下文是当前目录。

检查你的图像：

docker images
Enter fullscreen mode Exit fullscreen mode

您将看到以下输出：

Output

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

运行以下命令使用此镜像构建容器：

docker run --name nodejs-image-demo -p 80:8080 -d your_dockerhub_username/nodejs-image-demo
Enter fullscreen mode Exit fullscreen mode

使用以下命令检查正在运行的容器列表docker ps：

docker ps
Enter fullscreen mode Exit fullscreen mode

您将看到以下输出：

Output

CONTAINER 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
Enter fullscreen mode Exit fullscreen mode

容器运行后，您现在可以通过浏览器访问http://your_server_ip或来访问您的应用程序localhost。您将再次看到您的应用程序登录页面：

应用程序登陆页面

现在您已经为应用程序创建了映像，您可以将其推送到 Docker Hub 以供将来使用。

第4步 - 使用存储库处理图像

推送镜像的第一步是登录您的 Docker Hub 帐户：

docker login -u your_dockerhub_username -p your_dockerhub_password
Enter fullscreen mode Exit fullscreen mode

以这种方式登录将~/.docker/config.json使用您的 Docker Hub 凭据在用户主目录中创建一个文件。

使用您自己的用户名代替以下名称来推送您的图像your_dockerhub_username：

docker push your_dockerhub_username/nodejs-image-demo
Enter fullscreen mode Exit fullscreen mode

如果您愿意，您可以通过销毁当前应用程序容器和图像并重建它们来测试图像注册表的实用性。

首先，列出正在运行的容器：

docker ps
Enter fullscreen mode Exit fullscreen mode

您将看到以下输出：

Output

CONTAINER 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
Enter fullscreen mode Exit fullscreen mode

使用CONTAINER ID输出中列出的内容，停止正在运行的应用程序容器。请务必将下面突出显示的 ID 替换为你自己的CONTAINER ID：

docker stop e50ad27074a7
Enter fullscreen mode Exit fullscreen mode

使用标志列出您的所有图像-a：

docker images -a
Enter fullscreen mode Exit fullscreen mode

您将看到以下输出，其中包含您的图像名称，your_dockerhub_username/nodejs-image-demo以及该node图像和您构建的其他图像：

Output

REPOSITORY                                           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
Enter fullscreen mode Exit fullscreen mode

使用以下命令删除已停止的容器和所有图像，包括未使用或悬空的图像：

docker system prune -a
Enter fullscreen mode Exit fullscreen mode

删除所有镜像和容器后，您现在可以从 Docker Hub 中提取应用程序镜像：

docker pull your_dockerhub_username/nodejs-image-demo
Enter fullscreen mode Exit fullscreen mode

再次列出您的图像：

docker images
Enter fullscreen mode Exit fullscreen mode

您将看到您的应用程序图像：

Output

REPOSITORY                                     TAG                 IMAGE ID            CREATED             SIZE
your_dockerhub_username/nodejs-image-demo      latest              1c723fb2ef12        11 minutes ago      895MB
Enter fullscreen mode Exit fullscreen mode

您现在可以使用步骤 3 中的命令重建容器：

docker run --name nodejs-image-demo -p 80:8080 -d your_dockerhub_username/nodejs-image-demo
Enter fullscreen mode Exit fullscreen mode

列出正在运行的容器：

docker ps

Output

CONTAINER 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
Enter fullscreen mode Exit fullscreen mode

再次访问http://your_server_ip或查看您正在运行的应用程序。localhost

相关教程

以下是与本教程相关的更详细指南的链接：

您还可以查看更长的系列文章《从容器到使用 Node.js 的 Kubernetes》，本教程就是从该系列文章改编而来的。

此外，请参阅我们的完整Docker 资源库以获取有关 Docker 的更多信息。

CC 4.0许可证

本作品采用Creative Commons Attribution-NonCommercial-ShareAlike 4.0 国际许可协议进行许可

文章来源：https://dev.to/digitalocean/how-to-build-a-node-js-application-with-docker-quickstart-432
Devto 翻译
PREV
如何使用 Docker 构建 Node.js 应用程序
NEXT
Docker：向 5 岁小孩讲解。👶🏻