Cách triển khai ứng dụng của bạn lên web bằng Express.js và Heroku

Nếu bạn chưa quen với thế giới phát triển web, bạn sẽ dành rất nhiều thời gian để học cách xây dựng các trang tĩnh bằng HTML, CSS và JavaScript.

Sau đó, bạn có thể bắt đầu học cách sử dụng các framework phổ biến như React, VueJS hoặc Angular.

Nhưng sau khi thử một vài ý tưởng mới và chạy một số trang web cục bộ, bạn có thể tự hỏi làm thế nào để thực sự triển khai trang web hoặc ứng dụng của mình. Và hóa ra, đôi khi rất khó để biết bắt đầu từ đâu.

Cá nhân tôi thấy chạy một máy chủ Express được lưu trữ trên Heroku là một trong những cách đơn giản nhất để bắt đầu. Bài viết này sẽ hướng dẫn bạn cách thực hiện điều này.

Heroku là một nền tảng đám mây hỗ trợ một số ngôn ngữ lập trình và khuôn khổ khác nhau.

Đây không phải là một bài đăng được tài trợ - tất nhiên có nhiều giải pháp khác có sẵn, chẳng hạn như:

  • Đại dương kỹ thuật số
  • Dịch vụ web của Amazon
  • Azure
  • Nền tảng đám mây của Google
  • Netlify
  • ZEIT ngay

Kiểm tra tất cả chúng và xem cái nào phù hợp với nhu cầu của bạn nhất.

Cá nhân tôi thấy Heroku là nhanh nhất và dễ dàng nhất để bắt đầu sử dụng "out of the box". Cấp miễn phí có phần hạn chế về tài nguyên. Tuy nhiên, tôi có thể tự tin giới thiệu nó cho mục đích thử nghiệm.

Ví dụ này sẽ lưu trữ một trang web đơn giản bằng máy chủ Express. Dưới đây là các bước cấp cao:

  1. Thiết lập với Heroku, Git, npm
  2. Tạo máy chủ Express.js
  3. Tạo tệp tĩnh
  4. Triển khai đến Heroku

Tổng cộng sẽ mất khoảng 25 phút (hoặc lâu hơn nếu bạn muốn dành nhiều thời gian hơn cho các tệp tĩnh).

Bài viết này giả định bạn đã biết:

  • Một số khái niệm cơ bản về HTML, CSS và JavaScript
  • Sử dụng dòng lệnh cơ bản
  • Git cấp độ người mới bắt đầu để kiểm soát phiên bản

Bạn có thể tìm thấy tất cả mã trong kho này.

Đang cài đặt

Bước đầu tiên trong bất kỳ dự án nào là thiết lập tất cả các công cụ mà bạn biết mình sẽ cần.

Bạn sẽ cần phải có:

  • Đã cài đặt nút và npm trên máy cục bộ của bạn (đọc cách thực hiện việc này tại đây)
  • Git đã được cài đặt (đọc hướng dẫn này)
  • Heroku CLI đã được cài đặt (đây là cách thực hiện)

1. Tạo một thư mục mới và khởi tạo một kho lưu trữ Git

Từ dòng lệnh, tạo một thư mục dự án mới và chuyển vào đó.

$ mkdir lorem-ipsum-demo $ cd lorem-ipsum-demo

Bây giờ bạn đang ở trong thư mục dự án, hãy khởi tạo một kho lưu trữ Git mới.

⚠️Bước này rất quan trọng vì Heroku dựa vào Git để triển khai mã từ máy cục bộ của bạn lên các máy chủ đám mây của nó ⚠️

$ git init

Bước cuối cùng, bạn có thể tạo tệp README.md để chỉnh sửa ở giai đoạn sau.

$ echo "Edit me later" > README.md

2. Đăng nhập vào Heroku CLI và tạo một dự án mới

Bạn có thể đăng nhập vào Heroku bằng Heroku CLI (giao diện dòng lệnh). Bạn sẽ cần phải có một tài khoản Heroku miễn phí để thực hiện việc này.

Có hai lựa chọn ở đây. Mặc định là Heroku cho phép bạn đăng nhập thông qua trình duyệt web. Thêm -icờ cho phép bạn đăng nhập thông qua dòng lệnh.

$ heroku login -i

Bây giờ, bạn có thể tạo một dự án Heroku mới. Tôi đã gọi cho tôi lorem-ipsum-demo.

$ heroku create lorem-ipsum-demo

Đặt tên cho dự án của bạn:

  • Heroku sẽ tạo một tên ngẫu nhiên cho dự án của bạn nếu bạn không chỉ định một tên trong lệnh.
  • Tên sẽ tạo thành một phần của URL mà bạn có thể sử dụng để truy cập dự án của mình, vì vậy hãy chọn một tên bạn thích.
  • Điều này cũng có nghĩa là bạn cần chọn một tên dự án duy nhất mà chưa ai sử dụng.
  • Có thể đổi tên dự án của bạn sau này (vì vậy đừng lo lắng quá nhiều về việc có được cái tên hoàn hảo ngay bây giờ).

3. Khởi tạo một dự án npm mới và cài đặt Express.js

Tiếp theo, bạn có thể khởi tạo một dự án npm mới bằng cách tạo tệp package.json. Sử dụng lệnh dưới đây để thực hiện việc này.

⚠️ Bước này rất quan trọng. Heroku dựa vào việc bạn cung cấp tệp package.json để biết đây là một dự án Node.js khi nó xây dựng ứng dụng của bạn ⚠️

$ npm init -y

Tiếp theo, cài đặt Express. Express là một khung máy chủ được sử dụng rộng rãi cho NodeJS.

$ npm install express --save

Cuối cùng, bạn đã sẵn sàng để bắt đầu viết mã!

Viết một máy chủ Express đơn giản

Bước tiếp theo là tạo một tệp có tên app.js, tệp này chạy cục bộ máy chủ Express.

$ touch app.js

Tệp này sẽ là điểm nhập cho ứng dụng khi nó sẵn sàng. Điều đó có nghĩa là, một lệnh cần thiết để khởi chạy ứng dụng sẽ là:

$ node app.js

Nhưng trước tiên, bạn cần viết một số mã trong tệp.

4. Chỉnh sửa nội dung của app.js

Mở app.jstrong trình soạn thảo yêu thích của bạn. Viết mã hiển thị bên dưới và nhấp vào lưu.

// create an express app const express = require("express") const app = express() // use the express-static middleware app.use(express.static("public")) // define the first route app.get("/", function (req, res) { res.send("

Hello World!

") }) // start the server listening for requests app.listen(process.env.PORT || 3000, () => console.log("Server is running..."));

Các nhận xét sẽ giúp chỉ ra những gì đang xảy ra. Nhưng hãy nhanh chóng chia nhỏ mã để hiểu thêm về nó:

  • The first two lines simply require the Express module and create an instance of an Express app.
  • The next line requires the use of the express.static middleware. This lets you serve static files (such as HTML, CSS and JavaScript) from the directory you specify. In this case, the files will be served from a folder called public.
  • The next line uses app.get() to define a URL route. Any URL requests to the root URL will be responded to with a simple HTML message.
  • The final part starts the server. It either looks to see which port Heroku will use, or defaults to 3000 if you are running locally.

⚠️The use of process.env.PORT || 3000 in the last line is important for deploying your app successfully ⚠️

If you save app.js and start the server with:

$ node app.js

You can visit localhost:3000 in your browser and see for yourself the server is running.

Create your static files

The next step is to create your static files. These are the HTML, CSS and JavaScript files you will serve up whenever a user visits your project.

Remember in app.js you told the express.static middleware to serve static files from the public directory.

The first step is of course to create such a directory and the files it will contain.

$ mkdir public $ cd public $ touch index.html styles.css script.js

5. Edit the HTML file

Open index.html in your preferred text editor. This will be the basic structure of the page you will serve to your visitors.

The example below creates a simple landing page for a Lorem Ipsum generator, but you can be as creative as you like here.

Lorem Ipsum generator

How many paragraphs do you want to generate?

Generate Copy!

6. Edit the CSS file

Next up is editing the CSS file styles.css. Make sure this is linked in your HTML file.

The CSS below is for the Lorem Ipsum example. But again, feel free to be as creative as you want.

h1 { font-family: 'Alegreya' ; } body { font-family: 'Source Sans Pro' ; width: 50%; margin-left: 25%; text-align: justify; line-height: 1.7; font-size: 18px; } input { font-size: 18px; text-align: center; } button { font-size: 18px; color: #fff; } #generate { background-color: #09f; } #copy { background-color: #0c6; }

7. Edit the JavaScript file

Finally, you might want to edit the JavaScript file script.js. This will let you make your page more interactive.

The code below defines two basic functions for the Lorem Ipsum generator. Yes, I used JQuery - it's quick and easy to work with.

$("#generate").click(function(){ var lorem = $("#lorem"); lorem.html(""); var quantity = $("#quantity")[0].valueAsNumber; var data = ["Lorem ipsum", "quia dolor sit", "amet", "consectetur"]; for(var i = 0; i < quantity; i++){ lorem.append("

"+data[i]+"

"); } }) $("#copy").click(function() { var range = document.createRange(); range.selectNode($("#lorem")[0]); window.getSelection().removeAllRanges(); window.getSelection().addRange(range); document.execCommand("copy"); window.getSelection().removeAllRanges(); } )

Note that here, the data list is truncated to make it easier to show. In the actual app, it is a much longer list of full paragraphs. You can see the entire file in the repo, or look here for the original source.

Deploying your app

After writing your static code and checking it all works as expected, you can get ready to deploy to Heroku.

However, there are a couple more things to do.

8. Create a Procfile

Heroku will need a Procfile to know how to run your app.

A Procfile is a "process file" which tells Heroku which command to run in order to manage a given process. In this case, the command will tell Heroku how to start your server listening on the web.

Use the command below to create the file.

⚠️This is an important step, because without a Procfile, Heroku cannot put your server online. ⚠️

$ echo "web: node app.js" > Procfile

Notice that the Procfile has no file extension (e.g., ".txt", ".json").

Also, see how the command node app.js is the same one used locally to run your server.

9. Add and commit files to Git

Remember you initiated a Git repository when setting up. Perhaps you have been adding and committing files as you have gone.

Before you deploy to Heroku, make sure to add all the relevant files and commit them.

$ git add . $ git commit -m "ready to deploy"

The final step is to push to your Heroku master branch.

$ git push heroku master

You should see the command line print out a load of information as Heroku builds and deploys your app.

The line to look for is: Verifying deploy... done.

This shows that your build was successful.

Now you can open the browser and visit your-project-name.herokuapp.com. Your app will be hosted on the web for all to visit!

Quick recap

Below are the steps to follow to deploy a simple Express app to Heroku:

  1. Create a new directory and initialise a Git repository
  2. Login to the Heroku CLI and create a new project
  3. Initialise a new npm project and install Express.js
  4. Edit the contents of app.js
  5. Edit the static HTML, CSS and JavaScript files
  6. Create a Procfile
  7. Add and commit to Git, then push to your Heroku master branch

Things to check if your app is not working

Sometimes, despite best intentions, tutorials on the Internet don't work exactly as you expected.

The steps below should help debug some common errors you might encounter:

  • Did you initialise a Git repo in your project folder? Check if you ran git init earlier. Heroku relies on Git to deploy code from your local machine.
  • Did you create a package.json file? Check if you ran npm init -y earlier. Heroku requires a package.json file to recognise this is a Node.js project.
  • Is the server running? Make sure your Procfile uses the correct file name to start the server. Check you have web: node app.js and not web: node index.js.
  • Does Heroku know which port to listen on? Check you used app.listen(process.env.PORT || 3000) in your app.js file.
  • Các tệp tĩnh của bạn có bất kỳ lỗi nào trong đó không? Kiểm tra chúng bằng cách chạy cục bộ và xem có lỗi nào không.

Cảm ơn bạn đã đọc - nếu bạn đã làm được điều này, bạn có thể muốn xem phiên bản hoàn chỉnh của dự án demo.