Ngrok – Con Đường Từ Localhost Ra Internet.

Bạn đang muốn demo một web application và muốn nhiều người test cùng để góp ý. Bạn muốn khoe độ ngầu của mình nhưng project của bạn chỉ nằm gói gọn trong localhost. Và việc bạn phải ôm laptop của mình đến gặp từng người và nhờ họ trải nghiệm từng tính năng là việc hết sức tốn công. Vậy thì hôm nay mình sẽ phần nào đó giúp các bạn tìm ra giải pháp với công cụ ngrok.

Ngrok là gì?

Ngrok là công cụ tạo đường hầm (tunnel) giữa localhost của bạn và internet. Giúp người khác mạng có thể truy cập được localhost thông qua custom domain của ngrok.

(có dạng <random>.ngrok.io => localhost:<port>)

Ngrok dùng để làm gi?

Giúp bạn chạy demo dự án cho khách hàng xem từ chính máy của bạn mà không cần deploy lên server

Bạn có thể test responsive trên mobile một cách dễ dàng thông qua URL mà ngrok cung cấp

Xây dựng webhook tới localhost của bạn một cách dễ dàng

Và hơn thế nữa….

Cài đặt

Các bạn vào đường link sau: dashboard.ngrok.com

Lựa chọn phiên bản tương thích với hệ điều hành và tải về. Ở đây mình sẽ tải phiên bản của Window10.

Sau khi cài đặt file zip và giải nén, các bạn sẽ có một file “ngrok.exe“. Chúng ta bắt đầu thôi.

Trong phạm vi của bài viết này, mình sẽ sử dụng phiên bản miễn phí của ngrok, và tất nhiên miễn phí thì sẽ bị giới hạn ở một số tính năng (đâu phải muốn ăn là ăn dễ vậy hihi)

Vậy thì ở phiên bản miễn phí, chúng ta sẽ bị giới hạn ở các điểm:

• Chỉ hỗ trợ HTTP và TCP
• Subdomain ngẫu nhiên
• Chỉ chạy được 1 proccess ngrok tại 1 thời điểm
• Giới hạn 4 tunnel / 1 process
• Giới hạn 40 connections / 1 phút

Bắt đầu nào

Tạo một project và đưa lên localhost.

Ở đây, mình sử dụng phương pháp truyền thống nhất là tạo một project java web đơn giản và deploy lên localhost bằng tomcat.

Đây là một trang web mô phỏng thư viện có kết nối với database, cho nên mọi hành động của người dùng như mượn sách, tạo mới tài khoản đều sẽ tác động vào data của mình.

Mình sẽ build thành file .war và tiến hành deploy lên localhost bằng Tomcat

Sau khi build và chạy thành công, trang web của bạn sẽ xuất hiện trên browser, khi ấy bạn chỉ cần nhớ port mà Tomcat (hay công cụ nào khác) đã deploy cho bạn. Ở đây các bạn có thể thấy trang web của mình xuất hiện ở cổng 8080.

Đưa em nó ra biển lớn thôi nào 😀

Bây giờ việc bạn cần làm chỉ đơn giản là mở ngrok.exe mà mình đã tải ban đầu lên.

Giao diện của ngrok tương tự cmd, và có hướng dẫn cũng như các mẫu code ví dụ cho các bạn

Sau khi mở ngrok mình sẽ tiến hành mở cổng 8080 ra với thế giới nhé

Cú pháp cmd: 

ngrok http 8080

Sau khi nhập lệnh thành công, cửa sổ sẽ hiển thị như sau:

Trong đó, Session status cho bạn biết localhost của bạn có đang mở hay không. Vì đây là phiên bản miễn phí nên mình chỉ được sử dụng tối đa 8 tiếng cho một domain. 2 đường link có dạng “http://6a4ab5b1d973.ngrok.io/” là link để các bạn chia sẻ với mọi người (nhìn cái link hơi đáng sợ đúng không nào 😛 nhưng biết sao giờ :v), HTTP Requests là log ghi lại quá trình gửi request của người dùng cũng như respone của server. Mình đã gửi yêu cầu login nên server trả về file login.html sau đó mình nhập id, pass gửi về MainController để thực hiện đăng nhập và phân quyền, cuối cùng trả về adminpage.jsp.

Và tất nhiên bạn cũng có thể mở bằng điện thoại để kiểm tra việc reponsive.

Xem đến đây các bạn đã có thể mở một domain “ngắn hạn” để demo các project ở trường cũng như host một trang web để tỏ tình với crush rồi 😀 Chúc các bạn thành công.

Tổng kết

Ngrok là công cụ miễn phí giúp bạn tạo một domain có thời hạn để host một trang web. Ngoài ra ngrok còn vô số chức năng thú vị nữa nhưng trong phạm vi bài viết này mình chỉ xin phép giới thiệu sơ về công cụ ngrok cho mọi người. Cảm ơn mọi người đã theo dõi bài viết này, mọi góp ý, nhận xét,… xin các bạn để lại dưới phần bình luận.