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
sudotrê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ệ:
{ "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:
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 :
<!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:
<!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.html và sharks.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 :
.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:
Nhấp vào nút Nhận thông tin cá mập . Bạn sẽ thấy trang thông tin sau:
Đế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 :
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 và .dockerignore vào file .dockerignore của bạn:
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:
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 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:
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 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 :
Đế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:
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 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:
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 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 :
OutputREPOSITORY 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
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 Truy cập http:// your_server_ip hoặc localhost để xem ứng dụng đang chạy của bạn.
Hướng dẫn liên quan
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:
- Cách cài đặt Docker Compose trên Ubuntu 18.04 .
- Cách Cung cấp và Quản lý Server Docker Từ xa với Máy Docker trên Ubuntu 18.04 .
- Cách chia sẻ dữ liệu giữa các containers Docker .
- Cách chia sẻ dữ liệu giữa Docker Container và Host .
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.
Các tin liên quan
Cách cài đặt Docker Compose trên Debian 102020-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
