Hướng dẫn public localhost với Ngrok

Giới thiệu

Bạn đã bao giờ gặp tình huống này chưa? Bạn vừa code xong một tính năng trên localhost, muốn demo cho team hoặc khách hàng nhưng họ lại ở xa. Hoặc bạn cần test webhook, payment gateway mà các service này yêu cầu URL public? Làm thế nào để biến localhost thành một URL mà ai cũng có thể truy cập được? Ngrok chính là giải pháp hoàn hảo cho những tình huống này! Đây là một công cụ miễn phí cho phép bạn tạo một tunnel bảo mật từ internet public đến localhost của bạn. Chỉ với một câu lệnh đơn giản, bạn có thể biến localhost:3000 thành một URL như https://abc123.ngrok.io mà bất kỳ ai trên thế giới cũng có thể truy cập.

Ngrok hoạt động như thế nào?

Ngrok hoạt động theo mô hình tunnel, tạo ra một “đường hầm” bảo mật giữa internet và máy tính local của bạn:

1. Bạn chạy ngrok trên máy local
2. Ngrok tạo tunnel đến server của họ
3. Server ngrok cung cấp một URL public
4. Người dùng truy cập URL public này
5. Request được forward về localhost của bạn

Internet → ngrok.io → Your Computer → localhost:3000

Ưu điểm của Ngrok

1. Dễ sử dụng và setup nhanh

• Cài đặt trong vài phút
• Một câu lệnh là có thể chia sẻ ngay
• Không cần config phức tạp

2. Bảo mật cao

• Hỗ trợ HTTPS mặc định
• Tunnel được mã hóa
• Có thể set authentication

3. Tính năng mạnh mẽ

• Web interface để monitor traffic
• Replay requests để debug
• Custom subdomain (phiên bản trả phí)
• Multiple protocols (HTTP, HTTPS, TCP)

4. Cross-platform

• Windows, Mac, Linux
• Mobile apps available
• Docker support

5. Miễn phí với tính năng cơ bản

• Bandwidth không giới hạn
• 1 concurrent tunnel
• Random subdomain

Nhược điểm cần lưu ý

1. Giới hạn phiên bản miễn phí

• Chỉ 1 tunnel cùng lúc
• Subdomain random (không thể tùy chỉnh)
• Session timeout sau 8 giờ

2. Phụ thuộc vào internet

• Cần kết nối internet ổn định
• Có thể bị ảnh hưởng bởi tốc độ mạng

3. Vấn đề bảo mật

• Expose localhost ra internet
• Cần cẩn thận với sensitive data
• Không nên dùng cho production

Hướng dẫn cài đặt và sử dụng

Bước 1: Tải và cài đặt Ngrok

Windows:

1. Truy cập https://ngrok.com/download
2. Tải file .zip cho Windows
3. Giải nén và copy ngrok.exe vào thư mục PATH
4. Hoặc sử dụng Chocolatey: choco install ngrok

MAC:

# Sử dụng Homebrew
brew install ngrok

# Hoặc tải binary từ website
wget https://bin.equinox.io/c/bNyj1mQVY4c/ngrok-v3-stable-darwin-amd64.tgz
tar -xzf ngrok-v3-stable-darwin-amd64.tgz
sudo mv ngrok /usr/local/bin

Bước 2: Đăng ký tài khoản (Optional)

1. Truy cập https://dashboard.ngrok.com/signup
2. Đăng ký tài khoản miễn phí
3. Lấy authtoken từ dashboard
4. Authenticate ngrok:

ngrok config add-authtoken YOUR_AUTHTOKEN_HERE

Bước 3: Khởi chạy ứng dụng local

Trước khi sử dụng ngrok, bạn cần có một ứng dụng đang chạy trên localhost.

Bước 4: Tạo tunnel với Ngrok

Basic HTTP tunnel: 
 -> ngrok http 3000
HTTPS tunnel:
 -> ngrok http --subdomain=myapp 3000
Với custom subdomain (cần tài khoản trả phí):
 -> ngrok http --subdomain=myapp 3000

Bước 5: Truy cập và chia sẻ

Sau khi chạy lệnh ngrok, bạn sẽ thấy output như sau:

ngrok by @inconshreveable

Session Status    online
Account           your-email@example.com
Version           3.0.0
Region            United States (us)
Web Interface     http://127.0.0.1:4040
Forwarding        https://abc123.ngrok.io -> http://localhost:3000
Forwarding        http://abc123.ngrok.io -> http://localhost:3000

Connections       ttl     opn     rt1     rt5     p50     p90
                  0       0       0.00    0.00    0.00    0.00

Giờ bạn có thể chia sẻ URL https://abc123.ngrok.io với bất kỳ ai!

Use Cases thực tế

1. Demo cho khách hàng:

# Chạy app
npm start  # localhost:3000

# Ở terminal khác
ngrok http 3000

# Gửi URL cho khách hàng
"Hey, check out our new feature at https://abc123.ngrok.io"

2. Test webhook locally

// webhook-server.js
const express = require('express');
const app = express();

app.use(express.json());

app.post('/webhook', (req, res) => {
  console.log('Received webhook:', req.body);
  res.status(200).json({ status: 'success' });
});

app.listen(3000, () => {
  console.log('Webhook server running on port 3000');
});

node webhook-server.js
ngrok http 3000
# Dùng URL https://abc123.ngrok.io/webhook cho webhook config

Kết luận

Ngrok là một công cụ cực kỳ hữu ích cho mọi developer. Với khả năng biến localhost thành URL public chỉ trong vài giây.  Hãy tận dụng công cụ hữu ích này để phục vụ cho công việc của bạn.

https://ngrok.com