Thứ năm, 06/02/2020 | 00:00 GMT+7

Cách tạo ứng dụng Node.js với Docker [Quickstart]

Hướng dẫn này sẽ hướng dẫn bạn cách tạo một hình ảnh ứng dụng cho một trang web tĩnh sử dụng Express framework và Bootstrap . Sau đó, bạn sẽ xây dựng một containers bằng cách sử dụng hình ảnh đó, đẩy nó đến Docker Hub và sử dụng nó để tạo một containers khác, minh họa cách bạn có thể tạo lại và mở rộng ứng dụng của bạn .

Để có version chi tiết hơn của hướng dẫn này, với giải thích chi tiết hơn về từng bước, vui lòng tham khảo Cách tạo ứng dụng Node.js bằng Docker .

Yêu cầu

Để làm theo hướng dẫn này, bạn cần :

  • Một user sudo trên server của bạn hoặc trong môi trường local của bạn.
  • Docker.
  • Node.js và npm .
  • Một account Docker Hub.

Bước 1 - Cài đặt phụ thuộc ứng dụng của bạn

Đầu tiên, tạo một folder cho dự án của bạn trong folder chính của user không phải root của bạn:

  • mkdir node_project

Điều hướng đến folder này:

  • cd node_project

Đây sẽ là folder root của dự án.

Tiếp theo, tạo một package.json với các phụ thuộc dự án của bạn:

  • nano package.json

Thêm thông tin sau về dự án vào file ; đảm bảo thay thế thông tin tác giả bằng tên của chính bạn và chi tiết liên hệ:

~ / 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"   } } 

Cài đặt các phụ thuộc dự án của bạn:

  • npm install

Bước 2 - Tạo file ứng dụng

Ta sẽ tạo một trang web cung cấp cho user thông tin về cá mập.

Mở app.js trong folder dự án chính để xác định các tuyến của dự án:

  • nano app.js

Thêm nội dung sau vào file để tạo ứng dụng Express và các đối tượng Bộ định tuyến, xác định folder cơ sở, cổng và server lưu trữ dưới dạng các biến, đặt các tuyến và gắn phần mềm trung gian router cùng với các nội dung tĩnh của ứng dụng:

~ / 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!') }) 

Tiếp theo, hãy thêm một số nội dung tĩnh vào ứng dụng. Tạo folder views :

  • mkdir views

Mở index.html :

  • nano views/index.html

Thêm mã sau vào file , mã này sẽ nhập Boostrap và tạo thành phần jumbotron với liên kết đến trang thông tin chi tiết hơn về 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> 

Tiếp theo, mở một file có tên là sharks.html :

  • nano views/sharks.html

Thêm mã sau, nhập Bootstrap và biểu định kiểu tùy chỉnh và cung cấp cho user thông tin chi tiết về một số cá mập nhất định:

~ / node_project / views / shark.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> 

Cuối cùng, tạo biểu định kiểu CSS tùy chỉnh mà bạn đã liên kết đến trong index.htmlsharks.html bằng cách tạo folder css trong folder views :

  • mkdir views/css

Mở biểu định kiểu và thêm mã sau, mã này sẽ đặt màu và phông chữ mong muốn cho các trang của ta :

~ / 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; } 

Khởi động ứng dụng:

  • npm start

Điều hướng trình duyệt của bạn đến http:// your_server_ip :8080 hoặc localhost:8080 nếu bạn đang làm việc local . Bạn sẽ thấy trang đích sau:

Trang đích ứng dụng

Nhấp vào nút Nhận thông tin cá mập . Bạn sẽ thấy trang thông tin sau:

Trang thông tin cá mập

Đến đây bạn đã có một ứng dụng đang chạy. Khi đã sẵn sàng , hãy thoát khỏi server bằng lệnh CTRL+C

Bước 3 - Viết Dockerfile

Trong folder root của dự án của bạn, hãy tạo Dockerfile:

  • nano Dockerfile

Thêm mã sau vào file :

~ / 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 này sử dụng hình ảnh cơ sở núi cao và đảm bảo các file ứng dụng được sở hữu bởi user không phải nút root được cung cấp theo mặc định bởi Docker image Node .

Tiếp theo, thêm module nút local , log npm, .dockerignore.dockerignore vào file .dockerignore của bạn:

~ / node_project / .dockerignore
node_modules npm-debug.log Dockerfile .dockerignore 

Xây dựng hình ảnh ứng dụng bằng lệnh docker build :

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

Các . chỉ định rằng ngữ cảnh xây dựng là folder hiện tại.

Kiểm tra hình ảnh của bạn:

  • docker images

Bạn sẽ thấy kết quả sau:

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

Chạy lệnh sau để tạo containers bằng hình ảnh này:

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

Kiểm tra danh sách các containers đang chạy của bạn bằng docker ps :

  • docker ps

Bạn sẽ thấy kết quả sau:

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

Khi containers của bạn đang chạy, bây giờ bạn có thể truy cập ứng dụng của bạn bằng cách chuyển trình duyệt của bạn đến http:// your_server_ip hoặc localhost . Bạn sẽ thấy trang đích ứng dụng của bạn :

Trang đích ứng dụng

Đến đây bạn đã tạo một hình ảnh cho ứng dụng của bạn , bạn có thể đẩy nó lên Docker Hub để sử dụng trong tương lai.

Bước 4 - Sử dụng repository để làm việc với hình ảnh

Bước đầu tiên để đẩy hình ảnh là đăng nhập vào account Docker Hub của bạn:

  • docker login -u your_dockerhub_username -p your_dockerhub_password

Đăng nhập theo cách này sẽ tạo file ~/.docker/config.json trong folder chính của user với thông tin đăng nhập Docker Hub của bạn.

Đẩy hình ảnh của bạn lên bằng tên user của chính bạn thay cho your_dockerhub_username :

  • docker push your_dockerhub_username/nodejs-image-demo

Nếu muốn, bạn có thể kiểm tra tiện ích của register hình ảnh bằng cách phá hủy containers và hình ảnh ứng dụng hiện tại của bạn và xây dựng lại chúng.

Đầu tiên, liệt kê các containers đang chạy của bạn:

  • docker ps

Bạn sẽ thấy kết quả sau:

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

Sử dụng CONTAINER ID được liệt kê trong kết quả của bạn, dừng containers ứng dụng đang chạy. Đảm bảo thay thế ID được đánh dấu bên dưới bằng CONTAINER ID của bạn :

  • docker stop e50ad27074a7

Liệt kê tất cả hình ảnh của bạn với cờ -a :

  • docker images -a

Bạn sẽ thấy kết quả sau với tên hình ảnh của bạn, your_dockerhub_username / nodejs-image-demo , cùng với hình ảnh node và các hình ảnh khác từ bản dựng của bạn:

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

Xóa containers đã dừng và tất cả hình ảnh, bao gồm cả hình ảnh không sử dụng hoặc treo, bằng lệnh sau:

  • docker system prune -a

Với tất cả hình ảnh và containers của bạn đã bị xóa, bây giờ bạn có thể kéo hình ảnh ứng dụng từ Docker Hub:

  • docker pull your_dockerhub_username/nodejs-image-demo

Liệt kê các hình ảnh của bạn :

  • docker images

Bạn sẽ thấy hình ảnh ứng dụng của bạn :

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

Đến đây bạn có thể xây dựng lại containers của bạn bằng lệnh từ Bước 3:

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

Liệt kê các containers đang chạy của bạn:

  • 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

Truy cập http:// your_server_ip hoặc localhost để xem ứng dụng đang chạy của bạn.

Dưới đây là các liên kết đến các hướng dẫn chi tiết hơn liên quan đến hướng dẫn này:

Bạn cũng có thể xem loạt bài dài hơn về Từ containers đến Kubernetes với Node.js , từ đó hướng dẫn này được điều chỉnh.

Ngoài ra, hãy xem thư viện tài nguyên Docker đầy đủ của ta để biết thêm về Docker.


Tags:

Các tin liên quan

Cách cài đặt Docker Compose trên Debian 10
2020-01-30
Cách chứa một ứng dụng Laravel để phát triển với Docker Compose trên Ubuntu 18.04
2020-01-23
Cách chứa một ứng dụng Laravel để phát triển với Docker Compose trên Ubuntu 18.04
2020-01-23
Lưu trữ một ứng dụng Ruby on Rails để phát triển với Docker Compose
2019-12-27
Làm việc với nhiều container bằng Docker Compose
2019-12-20
Cách sử dụng Plugin Docker cho Visual Studio Code
2019-12-12
Cách sử dụng Ansible để cài đặt và thiết lập Docker trên Ubuntu 18.04
2019-12-05
Cách tạo ứng dụng Django và Gunicorn với Docker
2019-10-25
Cách thiết lập Flask với MongoDB và Docker
2019-10-11
Cách cài đặt và sử dụng Docker trên Debian 10
2019-07-08