Public website từ Localhost lên Internet bằng Ngrok

Mở đầu

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 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.

• 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 và phát triển webhook với cấu hình dễ dàng
• Giao diện dashboard thân thiện dễ sử dụng với mọi người
• Có thể sử dụng custom domain, tạo config chạy tự động mà không cần tới command line
• Được mã hoá SSL https đầy đủ

Cài đặt

Đầu tiên đăng ký 1 tài khoản ngrok tại https://dashboard.ngrok.com, sau đó tải về phiên bản phù hợp với hệ điều hành của bạn.

Với Windows, sau khi giải nén ra sẽ có 1 file ngrok.exe để sử dụng.

Xuống phần Your Authtoken, chạy file ngrok.exe và nhập theo hướng dẫn:

ngrok config add-authtoken <token của bạn>

Cách sử dụng

Như vậy là đã xong bước chuẩn bị, bây giờ bạn muốn public cổng nào thì chỉ cần gõ:

ngrok http <cổng muốn public>

Ví dụ mình public cổng localhost:8080 thì gõ

ngrok http 8080

Ở phần Forwarding, bạn có thể dùng link https://<random>.ap.ngrok.io để gửi cho bạn bè xem được rồi đó.

Nếu bạn chạy Live Server trên Visual Studio Code thì cổng sẽ là 127.0.0.1:5500, bạn gõ:

ngrok http 5500

Lưu ý: tunnel sẽ dừng nếu bạn đóng ngrok hoặc ấn Ctrl+C.

Nâng cao

Như vậy chúng ta đã public thành công port từ local ra internet với https. Từ đây chúng ta có thể test nhanh qua ứng dụng, lỗi reponsive trên điện thoại, hay test webhook… rất tiện lợi. Và xem được các request, response trực tiếp trên dashboard của ngrok.

Ở phần Web Interface, bạn truy cập 127.0.0.1:4040 (như hình trên)