Node.js cho người mới: Xây dựng Blog với Heroku

: Blogs; Blogs công nghệ

Các trang error không thường xuất hiện khi lướt web nhưng khi điều đó xảy ra thì nó thật khó chịu! Để xem server làm việc như thế nào từ bên trong, chúng ta sẽ xây dựng một web server đơn giản. Chúng ta sử dụng Node.js đóng vai trò server. Sau đó, sẽ sử dụng Heroku cloud application platform để biến local server thành một world wide server.

Tại sao tôi nên làm vậy?

Chào mọi người! Không biết bạn như thế nào ?, nhưng cuối tuần của tôi thường rất tuyệt vời !

Tối thứ Sáu. Tôi trở về nhà từ công ty, cho mèo ăn, tự thưởng vài miếng pizza, và muốn làm gì đó thú vị. Và còn điều gì thú vị hơn là một bộ phim cũ? Vì vậy, tôi đã vào “IMDB Top 500” để tìm kiếm. Sau đó điều này xảy ra:

Và tôi đã chọn ngẫu nhiên một bộ phim cho buổi tối của mình. Đó là “Sharknado”. Liệu đêm thứ 6 của tôi như thế là hết?

Thực ra, đây không phải là điều thường xảy ra khi bạn lướt web. Nhưng khi nó … Haiz, thật là khó chịu! Nó gây nhiều bực tức, nhưng chúng ta tò mò về nó, phải không? Và vì tò mò để được hài lòng, chúng ta sẽ tự xây dựng một web serve đơn giản. Nó sẽ giúp chúng ta nhìn thấy cách server hoạt động như thế nào (hay cách nó sẽ không hoạt động) từ bên trong.

Làm thế nào để có thể?

Chúng ta sẽ sử dụng Node.js cho dự án này. Node.js là một open source, cross-platform runtime environment nó cho phép bạn xây dựng server-side và networking applications.. Được viết bằng JavaScript và có thể chạy trong Node.js runtime trên bất kỳ nền tảng nào. Trước hết, tất nhiên, bạn cần phải cài đặt nó. Bạn nên xem qua trang tải để biết thêm chi tiết. Tôi sẽ đợi cho đến khi bạn kết thúc, vì vậy đừng lo lắng. Xong chưa? Tuyệt quá! Bây giờ bạn có thể tạo web server đầu tiên. Và đó là một trong những nhiệm vụ đơn giản nhất trong cuộc đời bạn.

Khá đơn giản, nhưng đó là một server !

Trước hết, chúng ta cần phải tạo một file JavaScript. Hãy đặt tên nó là server.js:

var http = require("http");

http.createServer(function(request, response) {
  response.writeHead(200, {"Content-Type": "text/plain"});
  response.write("It's alive!");
  response.end();
}).listen(3000);

var http = require ( "http" ) ;

http . createServer ( function ( request , response ) {

response . writeHead ( 200 , { "Content-Type" : "text/plain" } ) ;

response . write ( "It's alive!" ) ;

response . end ( ) ;

} ) . listen ( 3000 ) ;

Nó đơn giản và ngắn gọn. Nhưng đó là một server! Hãy chắc chắn rằng nó hoạt đông được. Chạy terminal như sau:

node server.js

node server . js

Sau đó kiểm tra nó trên trình duyệt. Địa chỉ server mới, bạn có thể đoán được là http://localhost:3000/ đang hoạt động. Của bạn thì sao? Hy vọng, nó cũng hoạt động.

Bây giờ, để đảm bảo rằng đó là web server và không phải là những đoạn code để trả lại một dòng văn bản, chúng ta sẽ sử dụng nó làm server! Bạn có thể kiểm tra bằng điện thoại. Hãy giả sử, địa chỉ IP máy tính xách tay trong local network của bạn là 192.168.1.101. Bạn có thể kết nối đến server của mình thông qua cổng 3000 (đối với ví dụ cụ thể này) bằng cách gõ http://192.168.1.101:3000/ trên trình duyệt. Trong trường hợp của tôi mọi thứ hoạt động tốt:

Tốt, nó đã là một server!. Những gì bạn có ở đây là mô hình client-server của riêng mình! Mang nó đến bất cứ nơi nào bạn muốn! Giờ ta sẽ triển khai server sang online, để mọi người có thể nhìn thấy nó.

Nhưng bạn nên chú ý đến một cái gì đó, trước khi chúng ta đi xa hơn. Hãy xem xét kỹ hơn ở server Node đầu tiên. Đây là một ví dụ về cách Node cung cấp cho bạn các hành vi non-blocking và event-driven. Hãy để tôi giải thích:

$.post('/some_requested_resource', function(data) {
  console.log(data);
});

$ . post ( '/some_requested_resource' , function ( data ) {

console . log ( data ) ;

} ) ;

Đoạn code này thực hiện một yêu cầu cho một số resource. Khi phản hồi trở lại, một hàm anonymous được gọi. Nó chứa dữ liệu argument , là dữ liệu nhận được từ yêu cầu đó.

Vì vậy, Node cho phép bạn sử dụng vòng lặp sự kiện, hoạt động nhanh hơn do hành vi non-blocking. Ví dụ, nginx sử dụng một vòng lặp sự kiện với I / O không đồng bộ. Đó là lý do tại sao nó rất nhanh!

Không khó để hiểu khái niệm này, vì vậy hãy tiếp tục.

Làm nó worldwide

Hoạt động được. Nhưng nó hoạt động tại cục bộ. WWW dành cho “World Wide Web” và chúng ta sẽ biến server cục bộ của bạn thành một server toàn thế giới. Chúng ta sẽ sử dụng Heroku cloud application platform cho việc này. Heroku là một nền tảng điện toán đám mây như là một dịch vụ (những người lập trình có kinh nghiệm gọi đó là những thứ “PaaS”). Nó cho phép triển khai web server, vì vậy mọi người có thể thấy các sản phẩm web của bạn. Trước hết, bạn cần phải tạo một tài khoản trên trang web của nhà phát triển và cài đặt Heroku. Nó đơn giản thôi. Chỉ cần làm theo các hướng dẫn. Ngoài ra còn có hướng dẫn trên Heroku có thể giải thích bạn làm thế nào để chạy server web đầu tiên , trả về chuỗi “Hello, World!” . Bạn có thể thử, nhưng tôi nghĩ rằng nó sẽ thú vị hơn nếu chúng ta xây dựng server web của riêng ngay từ đầu. Nghe thú vị phải không?

Nhìn kìa, mẹ ơi! Con đang lập trình!

Bước đầu tiên sau khi cài đặt Heroku là đăng nhập vào hệ thống từ máy tính :

heroku login

heroku login

Giờ hãy gác Heroku sang một bên. Nhưng chúng ta sẽ cần nó ngay sau khi chúng ta xây dựng được server.

Bây giờ, thử sáng tạo. Nó sẽ là một blog đơn giản đi kèm các chức năng cơ bản. Nó sẽ hiển thị cho bạn các trang web được yêu cầu và trang error trong trường hợp có lỗi.

Tạo folder project. Và sau đó tạo file server.js bên trong.

Trước hết, hãy khai báo một số biến:

var http = require("http");
var fs = require("fs");
var path = require("path");
var mime = require("mime");

var http = require ( "http" ) ;

var fs = require ( "fs" ) ;

var path = require ( "path" ) ;

var mime = require ( "mime" ) ;

Đầu tiên sẽ cung cấp cho bạn chìa khóa về chức năng HTTP của Node. Thứ hai là cho khả năng tương tác với hệ thống tập tin. Thứ ba cho phép bạn xử lý đường dẫn tập tin. Cuối cùng cho phép bạn xác định loại MIME của file. Và nó không phải là một phần của Node.js, vì vậy chúng ta cần phải cài đặt các dependencies của bên thứ ba trước khi sử dụng. Chúng ta cần phải tạo file package.json cho mục đích đó. Nó sẽ chứa thông tin liên quan đến dự án, chẳng hạn như tên, phiên bản, mô tả, v.v … Đối với dự án của chúng ta, sẽ sử dụng nhận dạng kiểu MIME, bởi vì nó không đủ để gửi nội dung của một file khi bạn sử dụng HTTP. Bạn cũng cần phải đặt tiêu đề loại nội dung phù hợp với loại MIME. Đó là lý do tại sao chúng ta cần có plug-in này.

Tạo file package.json và điền thông tin cần thiết. Đây là của tôi:

{
  "name" : "blog",
  "version" : "0.0.1",
  "description" : "My minimalistic blog",
  "dependencies" : {
    "mime" : "~1.2.7"
  }
}

{

"name" : "blog" ,

"version" : "0.0.1" ,

"description" : "My minimalistic blog" ,

"dependencies" : {

"mime" : "~1.2.7"

}

Có các trường “name”, “version”, “description” và “dependencies”. Cú pháp rất đơn giản, như bạn thấy. Chúng ta đã thêm plugin “mime” và bây giờ là lúc để tải xuống. Chúng ta sẽ sử dụng Built-in Node Package Manager. Chỉ cần chạy:

npm install

npm install

Nó sẽ tạo thư mục node_modules và đặt tất cả các file bên trong đó. Vì vậy, chúng ta đã giải quyết các dependencies và có thể tiếp tục code .

Bây giờ sẽ tạo ra chức năng send404 (). Nó sẽ xử lý việc gửi lỗi 404 , thường xuất hiện khi yêu cầu file không tồn tại:

function send404(response) {
  response.writeHead(404, {"Content-type" : "text/plain"});
  response.write("Error 404: resource not found");
  response.end();
}

function send404 ( response ) {

response . writeHead ( 404 , { "Content-type" : "text/plain" } ) ;

response . write ( "Error 404: resource not found" ) ;

response . end ( ) ;

}

Không có gì phức tạp cả. Trả về văn bản trắng khi server không thể tìm thấy một trang.

Bây giờ chúng ta sẽ xác định hàm sendPage (). Nó ghi tiêu đề đầu tiên và sau đó gửi nội dung của file:

function sendPage(response, filePath, fileContents) {
  response.writeHead(200, {"Content-type" : mime.lookup(path.basename(filePath))});
  response.end(fileContents);
}

function sendPage ( response , filePath , fileContents ) {

response . writeHead ( 200 , { "Content-type" : mime . lookup ( path . basename ( filePath ) ) } ) ;

response . end ( fileContents ) ;

}

Lưu ý cách chúng ta xử lý các loại MIME.

Bây giờ chúng ta sẽ xác định cách server sẽ xử lý các phản hồi như thế nào. Hàm này sẽ trả lại nội dung của file được yêu cầu hoặc lỗi 404:

function serverWorking(response, absPath) {
  fs.exists(absPath, function(exists) {
    if (exists) {
      fs.readFile(absPath, function(err, data) {
        if (err) {
          send404(response)
        } else {
          sendPage(response, absPath, data);
        }
      });
    } else {
      send404(response);
    }
  });
}

function serverWorking ( response , absPath ) {

fs . exists ( absPath , function ( exists ) {

if ( exists ) {

fs . readFile ( absPath , function ( err , data ) {

if ( err ) {

send404 ( response )

} else {

sendPage ( response , absPath , data ) ;

}

} ) ;

} else {

send404 ( response ) ;

}

} ) ;

}

Và bây giờ là lúc tạo ra máy chủ HTTP:

var server = http.createServer(function(request, response) {
  var filePath = false;

  if (request.url == '/') {
    filePath = "public/index.html";
  } else {
    filePath = "public" + request.url;
  }

  var absPath = "./" + filePath;
  serverWorking(response, absPath);
});

var server = http . createServer ( function ( request , response ) {

var filePath = false ;

if ( request . url == '/' ) {

filePath = "public/index.html" ;

} else {

filePath = "public" + request . url ;

}

var absPath = "./" + filePath ;

serverWorking ( response , absPath ) ;

} ) ;

Bây giờ chúng ta cần bắt đầu server của mình. Và đây là một phần không dễ. Bạn có nhớ cách chúng ta nói với server để lắng nghe cổng thứ 3000 trong ví dụ đầu tiên không? Không? Tôi sẽ nhắc lại:

http.createServer(<some code here>).listen(3000)

http . createServer ( < some code here > ) . listen ( 3000 )

Chúng ta có thể làm điều đó khi chúng ta chạy cục bộ server. Nhưng Heroku đặt một số cổng được chỉ định động cho ứng dụng của bạn. Đó là lý do tại sao chúng ta cần phải xử lý tất cả các mess này với các cổng như nó được hiển thị dưới đây:

var port_number = server.listen(process.env.PORT || 3000);

var port_number = server . listen ( process . env . PORT || 3000 ) ;

Bạn có thể sử dụng biến port_number sau. Ví dụ, trong chức năng console.log() để nói với người sử dụng, mà cổng được sử dụng.

Đó là tất cả chúng ta cần để chạy web server đơn giản. Bây giờ là lúc để tạo ra một số nội dung. Chúng ta sẽ tạo thư mục public và hai thư mục bên trong của nó: stylesheets và images. Chúng ta sẽ đặt tất cả các file HTML vào thư mục public. Folder stylesheets dành cho các file CSS. Và images cho hình ảnh.

Chúng ta cần tạo file index.html. Nó sẽ xác định “vẻ ngoài” của blog . Code:

<!DOCTYPE html>
<html>
    <head>
        <title>Blog</title>
        <link rel="stylesheet" type="text/css" href="/stylesheets/style.css">
    </head>
    <body>
        <div id="header">
            <span>My Simple Blog</span>
            <ul id="menu">
                <li>ABOUT</li>
                <li>ARTICLES</li>
                <li>VIDEOS</li>
                <li>SUBSCRIBE</li>
            </ul>
        </div>
        <div id="content">
            <h2><a href="/ui_libraries_comparison.html">JavaScript UI libraries comparison</a></h2>
            <p>It seems to be pretty easy to create a good-looking web page. Even your neighbor has one or two of them. It's for sure! For approximately two decades of World Wide Web existence hordes of web developers are trying to improve the way of how you interact with the Global Network. And how it interacts with you through different technologies such as JavaScript, for example... <a class="article" href="/ui_libraries_comparison.html">Read more</a></p>
            <h2><a href="/">Node.js for beginners. Building your own web server</a></h2>
            <p>We will use Node.js for our project. Node.js is an open source, cross-platform runtime environment, which allows you to build server-side and networking applications. It's written in JavaScript and can be run within the Node.js runtime on any platform. First of all, of course, you need to install it... <a class="article" href="/hode.html">Read more</a></p>
        </div>
    </body>
</html>

< ! DOCTYPE html >

< html >

< head >

< title > Blog < / title >

< link rel = "stylesheet" type = "text/css" href = "stylesheets/style.css" >

< /head>

<body>

<span>My Simple Blog</s pan >

< ul id = "menu" >

< li > ABOUT < / li >

< li > ARTICLES < / li >

< li > VIDEOS < / li >

< li > SUBSCRIBE < / li >

< / ul >

< / div >

< div id = "content" >

< h2 > < a href = "ui_libraries_comparison.html" > JavaScript UI libraries comparison < / a > < / h2 >

< p > It seems to be pretty easy to create a good - looking web page . Even your neighbor has one or two of them . It 's for sure! For approximately two decades of World Wide Web existence hordes of web developers are trying to improve the way of how you interact with the Global Network. And how it interacts with you through different technologies such as JavaScript, for example... <a class="article" href="/ui_libraries_comparison.html">Read more</a></p>

<h2><a href="/">Node.js for beginners. Building your own web server</a></h2>

<p>We will use Node.js for our project. Node.js is an open source, cross-platform runtime environment, which allows you to build server-side and networking applications. It' s written in JavaScript and can be run within the Node . js runtime on any platform . First of all , of course , you need to install it . . . < a class = "article" href = "hode.html" > Read more < / a > < / p >

< / div >

< / body >

< / html >

Tại đây bạn có thể thấy trang chính như thế này:

Bạn được tự do tạo fle CSS của riêng mình nếu bạn không thích thiết kế của tôi.

Điều chúng ta quan tâm bây giờ là làm thế nào để server xử lý lỗi 404. Đó là lý do tại sao chúng ta tạo ra hai liên kết “Read more”. Cái đầu tiên được kết nối với file HTML thực trong thư mục public. Cái thứ hai là cái bị lỗi. Hãy kiểm tra nó hoạt động như thế nào. Hãy khởi động server cục bộ:

node server.js

node server . js

Và sau đó nhấp vào liên kết đầu tiên:

Sau đó trở về trang chính và kiểm tra lần thứ hai:

Đây là trang 404 .

Chúng ta đã kiểm tra server tại cục bộ và bây giờ là thời gian để triển khai nó.

Đến lượt Heroku!

Mở terminal trong thư mục dự án. Đối với Linux nó là:

cd /path/to/my/project

cd / path / to / my / project

Và chạy:

git init

git init

Empty Git repository sẽ được khởi tạo trong .git / folder.

Sau đó chạy:

git add .

git add .

Lệnh này cho phép Git theo dõi các thay đổi của file.

Bây giờ commit các files của bạn với repo Git đã khởi tạo:

git commit -m "Simple server functionality added"

git commit - m "Simple server functionality added"

Chúng ta sẽ tạo ứng dụng Heroku đầu tiên:

heroku create

heroku create

Heroku sẽ tạo ra một tên ngẫu nhiên cho ứng dụng của bạn. Trong trường hợp của tôi, đó là enigmatic-citadel-9298. Đừng lo. Bạn có thể thay đổi nó sau.

Bây giờ chúng ta có thể triển khai dự án của mình. Mỗi ứng dụng Heroku bắt đầu không có branch và không có code. Vì vậy, lần đầu tiên triển khai dự án, chúng ta cần chỉ định một remote branch để push:

git push heroku master

git push heroku master

Ứng dụng bây giờ đã được triển khai. Đảm bảo rằng ít nhất một instance của ứng dụng đang chạy:

heroku ps:scale web=1

heroku ps : scale web = 1

Và bây giờ, trước khi chúng ta mở nó, đã đến lúc chọn một cái tên thích hợp cho lần tạo đầu tiên. Tôi gọi nó là myfirstserver:

heroku apps:rename myfirstserver

heroku apps : rename myfirstserver

Mọi thứ đã hoàn tất. Bạn có thể thử ngay bây giờ:

heroku open

heroku open

Lệnh này sẽ mở dự án Heroku của bạn trên trình duyệt web. Trong trường hợp cụ thể này, địa chỉ máy chủ là https://myfirstserver.herokuapp.com/. Bây giờ bạn có thể chia sẻ ứng dụng web đầu tiên của mình với bất kỳ người nào bạn muốn.

Tổng kết

Chúng ta đã xây dựng web server của riêng mình sử dụng ít hơn 50 dòng code. Không khó, nếu bạn hỏi tôi. Nó khá đơn giản. Nhưng bạn có thể thấy, server hoạt động như thế nào. Đó là một nhiệm vụ đơn giản. Bạn có thể kết hợp Node.js với các công nghệ khác nhau, chẳng hạn như CSS3 và HTML5, sau đó gia vị nó với một số chức năng JavaScript. Có rất nhiều library và Framework . Cá nhân tôi bắt đầu với Webix, đó là một thư viện tương đối mới và được phát triển bởi một công ty phần mềm nhỏ từ Đông Âu. Khuôn mẫu của ứng dụng được thực hiện với library và Node.js: CRM và task planner.

Và, Node.js như là một công nghệ …

… nó sẽ làm cho công việc DIRTy của bạn.

Có một từ viết tắt được tạo ra để mô tả các loại ứng dụng được tạo ra từ Node.js như vậy . Đó là DIRT. Nó có nghĩa là các ứng dụng Data-Intensive Real-Time. Node cho phép một server xử lý rất nhiều kết nối và làm việc với một số yêu cầu cùng một lúc. Và không cần nhiều bộ nhớ cho điều đó. Nó được thiết kế để đáp ứng và nhanh chóng. Giống như trình duyệt web của bạn! Vì vậy, nó rất hữu ích khi bạn cần tạo ra một ứng dụng mà sẽ có thể đáp ứng ngay lập tức cho một số lượng lớn người dùng. Node được xây dựng từ đầu để cung cấp cho bạn một chức năng như vậy. Vâng, đó là đủ cho ngày hôm nay. Hy vọng bạn thích nó.

howtonode.org

Có thể bạn chưa biết:

DVMS chuyên:
- Tư vấn, xây dựng, chuyển giao công nghệ Blockchain, mạng xã hội,...
- Tư vấn ứng dụng cho smartphone và máy tính bảng, tư vấn ứng dụng vận tải thông minh, thực tế ảo, game mobile,...
- Tư vấn các hệ thống theo mô hình kinh tế chia sẻ như Uber, Grab, ứng dụng giúp việc,...
- Xây dựng các giải pháp quản lý vận tải, quản lý xe công vụ, quản lý xe doanh nghiệp, phần mềm và ứng dụng logistics, kho vận, vé xe điện tử,...
- Tư vấn và xây dựng mạng xã hội, tư vấn giải pháp CNTT cho doanh nghiệp, startup,...

Vì sao chọn DVMS?
- DVMS nắm vững nhiều công nghệ phần mềm, mạng và viễn thông. Như Payment gateway, SMS gateway, GIS, VOIP, iOS, Android, Blackberry, Windows Phone, cloud computing,…
- DVMS có kinh nghiệm triển khai các hệ thống trên các nền tảng điện toán đám mây nổi tiếng như Google, Amazon, Microsoft,…
- DVMS có kinh nghiệm thực tế tư vấn, xây dựng, triển khai, chuyển giao, gia công các giải pháp phần mềm cho khách hàng Việt Nam, USA, Singapore, Germany, France, các tập đoàn của nước ngoài tại Việt Nam,…

Quý khách xem Hồ sơ năng lực của DVMS tại đây >>

Quý khách gửi yêu cầu tư vấn và báo giá tại đây >>