Hướng dẫn cài đặt ngrok và tích hợp n8n trên localhost A-Z

Khi bắt đầu tìm hiểu n8n, nhiều người thường muốn chạy thử trên máy tính cá nhân để tùy chỉnh các luồng công việc trước khi triển khai thực tế. Tuy nhiên, vì n8n hoạt động qua giao diện web, việc truy cập từ bên ngoài hoặc tích hợp với các API bên thứ ba đôi khi gặp giới hạn nếu chỉ chạy cục bộ (localhost).

Và đây chính là lúc ngrok trở thành công cụ “cứu cánh”. Với khả năng tạo “đường hầm” bảo mật từ máy tính của bạn ra Internet, ngrok giúp bạn mở truy cập công khai cho n8n local, dễ dàng test webhook, kết nối với các dịch vụ hoặc bất kỳ API nào. Cùng tìm hiểu cài đặt ngrok và tích hợp n8n trên localhost để khai thác tối đa sức mạnh của tự động hóa.

Tại sao cần sử dụng ngrok với n8n?

Vấn đề của việc phát triển n8n trên môi trường localhost

Khi bạn cài đặt và chạy n8n trên máy tính cá nhân, nó sẽ hoạt động tại một địa chỉ mặc định là http://localhost:5678. Địa chỉ localhost này là một tên gọi đặc biệt, chỉ có ý nghĩa bên trong máy tính của bạn. Nó giống như địa chỉ nhà của bạn, chỉ những người trong nhà mới biết và đi đến các phòng được. Bất kỳ ai ở bên ngoài (trên Internet) đều không thể “nhìn thấy” hay truy cập vào địa chỉ này.

Đây chính là lúc vấn đề lớn nhất phát sinh, đặc biệt là khi bạn làm việc với webhook.

Webhook là một cơ chế mà các dịch vụ bên ngoài chủ động gửi dữ liệu đến n8n của bạn ngay khi có một sự kiện xảy ra (ví dụ: có đơn hàng mới, một dòng mới được thêm vào trang tính…). Để làm được điều này, các dịch vụ đó cần một URL công khai – một địa chỉ mà chúng có thể truy cập được từ Internet.

Tuy nhiên, chúng không thể gửi dữ liệu đến http://localhost:5678 của bạn vì địa chỉ đó hoàn toàn “vô hình”. Điều này dẫn đến những rắc rối lớn:

• Bạn không thể nhận được dữ liệu webhook thật để xem workflow của mình có hoạt động đúng như mong đợi hay không.
• Bạn phải đoán mò cấu trúc dữ liệu, hoặc tệ hơn là phải triển khai workflow lên một máy chủ công khai chỉ để thực hiện một bài kiểm tra nhỏ, cực kỳ tốn thời gian và công sức.
• Không có dữ liệu thực tế, việc tìm và sửa lỗi trong logic xử lý của workflow trở nên vô cùng khó khăn.

Tóm lại, việc phát triển trên localhost giống như bạn đang xây dựng một trạm nhận thư nhưng lại không cho người đưa thư biết địa chỉ nhà của mình.

ngrok là gì? Giải quyết vấn đề này như thế nào?

ngrok là một công cụ nhỏ gọn nhưng cực kỳ mạnh mẽ, hoạt động như một “đường hầm” (tunnel) an toàn và thông minh. Nhiệm vụ chính của nó là tạo ra một địa chỉ URL công khai, có thể truy cập được từ bất kỳ đâu trên Internet, và chuyển tiếp (forward) toàn bộ dữ liệu từ địa chỉ đó đến một cổng dịch vụ đang chạy trên máy tính của bạn (trong trường hợp này là cổng 5678 của n8n).

Hãy tưởng tượng localhost:5678 là số điện thoại nội bộ trong văn phòng của bạn. Người bên ngoài không thể gọi trực tiếp được. ngrok chính là một dịch vụ chuyển tiếp cuộc gọi thông minh:

• Bạn “bảo” ngrok: “Hãy tạo một số điện thoại công khai cho tôi.“
• ngrok cung cấp cho bạn một số công khai duy nhất (ví dụ: https://abcd-1234.ngrok-free.app).
• Bạn đưa số điện thoại công khai này cho các đối tác (Shopify, GitHub…).
• Khi đối tác gọi vào số này, ngrok sẽ ngay lập tức chuyển cuộc gọi đến đúng số nội bộ localhost:5678 của bạn.

Cách ngrok giải quyết vấn đề:

Bằng cách chạy một lệnh đơn giản, ngrok sẽ tạo ra một URL công khai (https://tên-ngẫu-nhiên.ngrok-free.app). Bạn chỉ cần sao chép URL này và dán vào phần cấu hình webhook của các dịch vụ bên ngoài. Ngay lập tức, mọi dữ liệu mà các dịch vụ đó gửi đến URL của ngrok sẽ được chuyển thẳng đến n8n trên máy tính của bạn. Vấn đề “vô hình” của localhost đã được giải quyết triệt để.

Lợi ích chính khi kết hợp n8n và ngrok

Việc kết hợp n8n và ngrok không chỉ là một giải pháp tình thế, mà nó còn mang lại những lợi ích vô giá cho quá trình phát triển tự động hóa của bạn.

• Kiểm thử và gỡ lỗi theo thời gian thực: Đây là lợi ích lớn nhất. Bạn có thể kích hoạt một sự kiện thật (ví dụ: tạo một đơn hàng thử nghiệm trên Shopify) và ngay lập tức thấy dữ liệu thực tế chảy vào workflow n8n trên máy tính của mình. Việc này giúp bạn hiểu chính xác cấu trúc dữ liệu và gỡ lỗi logic nhanh hơn gấp nhiều lần.
• Tăng tốc độ phát triển vượt trội: Thay vì phải liên tục triển khai lên máy chủ để kiểm tra mỗi khi có thay đổi nhỏ, bạn có thể chỉnh sửa, lưu và kiểm thử workflow ngay lập tức. Vòng lặp phát triển được rút ngắn đáng kể, giúp bạn hoàn thành công việc nhanh hơn và hiệu quả hơn.
• Tiết kiệm chi phí: Bạn không cần phải thuê một máy chủ (VPS) hay bất kỳ dịch vụ hosting nào trong giai đoạn phát triển và thử nghiệm ban đầu. Mọi thứ đều có thể được hoàn thiện ngay trên chiếc máy tính cá nhân của bạn.
• Dễ dàng demo sản phẩm: Bạn có thể dễ dàng trình diễn một quy trình tự động hóa đang hoạt động cho khách hàng hoặc đồng nghiệp mà không cần thiết lập môi trường phức tạp. Chỉ cần chạy n8n và ngrok trên laptop là bạn đã có một bản demo trực tiếp và đầy thuyết phục.
• Giao diện giám sát tiện lợi: ngrok cung cấp một giao diện web (http://localhost:4040) cho phép bạn theo dõi, kiểm tra và “phát lại” (replay) tất cả các yêu cầu webhook đã được gửi qua đường hầm. Đây là một công cụ gỡ lỗi cực kỳ hữu ích.

Hướng dẫn cài đặt ngrok và tích hợp n8n trên localhost

Chuẩn bị

Trước khi chúng ta xây dựng “cây cầu” kết nối, hãy đảm bảo bạn đã chuẩn bị đầy đủ các “vật liệu” cần thiết. Quá trình này rất nhanh chóng và đơn giản.

• Cài đặt n8n trên máy tính cá nhân: Nếu bạn chưa cài đặt, hãy tham khảo bài viết: Hướng dẫn cách cài đặt n8n trên máy tính PC bằng Docker Desktop
• Tài khoản ngrok (Miễn phí là đủ): Bạn sẽ cần một tài khoản ngrok để lấy mã xác thực (Authtoken), giúp kết nối công cụ ngrok trên máy tính với tài khoản của bạn. Hãy truy cập ngrok.com và đăng ký tài khoản nếu bạn chưa có.
• Cửa sổ dòng lệnh (Terminal, PowerShell, hoặc CMD): Đây là công cụ để bạn “giao tiếp” và ra lệnh cho ngrok. Tùy thuộc vào hệ điều hành bạn đang sử dụng, hãy mở công cụ tương ứng:
  • Windows: PowerShell hoặc Command Prompt (CMD).
  • macOS/Linux: Terminal.

Hướng dẫn cài đặt ngrok

Bước 1: Truy cập trang dashboard của ngrok sau khi đăng nhập. Tại mục Setup & Installation, hệ thống sẽ tự động nhận diện hệ điều hành của bạn. Hãy nhấn nút Download để tải về file .zip.

Bước 2: Sau khi tải về, hãy giải nén file .zip. Bạn sẽ nhận được một file duy nhất là ngrok.exe (trên Windows) hoặc ngrok (trên macOS/Linux).

Để có thể gọi lệnh ngrok từ bất kỳ đâu, bạn nên di chuyển file này vào một thư mục hệ thống.

• Với macOS/Linux: Mở Terminal và chạy lệnh sudo mv /path/to/your/ngrok /usr/local/bin/.
• Với Windows: Tạo một thư mục mới, ví dụ C:\ngrok, sao chép file ngrok.exe vào đó. Sau đó, bạn cần thêm C:\ngrok vào biến môi trường Path của hệ thống.

Bước 3: Đây là bước quan trọng nhất để kích hoạt các tính năng của ngrok.

Trên trang dashboard của ngrok, hãy tìm và sao chép dòng lệnh có dạng:

ngrok config add-authtoken <YOUR_AUTH_TOKEN>

Bước 4: Mở cửa sổ dòng lệnh của bạn (Terminal/PowerShell).

Dán toàn bộ dòng lệnh vừa sao chép vào và nhấn Enter.

Một thông báo xác nhận thành công sẽ hiện ra. Giờ đây ngrok đã sẵn sàng hoạt động.

Cách tích hợp ngrok với n8n để nhận webhook

Bây giờ là lúc kết nối Internet với n8n trên máy bạn.

Bước 1: Hãy mở ứng dụng n8n và đảm bảo nó đang hoạt động và lắng nghe ở cổng 5678.

Bước 2: Trong cửa sổ dòng lệnh, gõ lệnh sau và nhấn Enter:

ngrok http 5678

Lệnh này yêu cầu ngrok tạo một đường hầm công khai sử dụng giao thức http và chuyển tiếp tất cả truy cập đến cổng 5678 trên máy của bạn.

Bước 3: Sau khi chạy lệnh, giao diện của ngrok sẽ hiện ra trong terminal. Hãy tìm dòng Forwarding và sao chép URL có dạng:

 https://<random-string>.ngrok-free.dev (hoặc .app)

Đây chính là địa chỉ công khai mà thế giới bên ngoài có thể dùng để truy cập n8n của bạn.

Thử nghiệm xây dựng workflow n8n lắng nghe Webhook qua ngrok

Lý thuyết là vậy, bây giờ, hãy cùng thực hành để kiểm chứng.

Lấy URL công khai từ ngrok

Trên màn hình PowerShell của bạn, hệ thống đã tạo ra một địa chỉ công khai. Ví dụ:

https://unhectic-unfried-pearly.ngrok-free.dev

Hãy sao chép chính xác địa chỉ này. Lưu ý: giữ nguyên cửa sổ PowerShell này, không được tắt nó đi!

Tạo workflow và lấy URL webhook từ n8n

Mở ứng dụng n8n và tạo một workflow mới và thêm vào node Webhook.

Trong node Webhook, bạn sẽ thấy một URL ở mục “Test URL”. URL này sẽ có dạng:

http://localhost:5678/webhook-test/xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx

Chọn phương thức POST rồi nhấp vào nút “Listen for test event”. n8n bây giờ sẽ ở trong trạng thái chờ dữ liệu.

Ghép nối và tạo URL cuối cùng

Bây giờ, chúng ta sẽ kết hợp 2 URL ở trên. Bạn sẽ lấy URL từ ngrok và gắn phần đuôi của URL từ n8n vào.

• URL từ ngrok của bạn: https://unhectic-unfried-pearly.ngrok-free.dev
• Phần đuôi URL từ n8n (ví dụ): /webhook-test/xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx

=> URL cuối cùng để thử nghiệm của bạn sẽ là: https://unhectic-unfried-pearly.ngrok-free.dev/webhook-test/xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx

Gửi yêu cầu thử nghiệm với Postman

1. Mở ứng dụng Postman.
2. Tạo một request mới chọn phương thức là POST.
3. Dán URL cuối cùng mà bạn vừa tạo ở bước “Ghép nối và tạo URL cuối cùng“
   vào thanh địa chỉ.
4. Chuyển sang tab “Body”, chọn “raw” và định dạng “JSON”.
5. Dán đoạn mã JSON sau vào phần nội dung:

Ví dụ:

{

"event": "new_user_signup",

"user_id": "usr_12345",

"name": "Dong Tung Huynh",

"status": "success"

}

Nhấn nút “Send“

Kiểm tra kết quả trong n8n

Quay lại cửa sổ n8n. Nếu mọi thứ chính xác, trạng thái “Listening…” sẽ biến mất và node Webhook sẽ hiển thị dữ liệu bạn vừa gửi từ Postman tại phần Body.

Chúc mừng, bạn đã kết nối thành công Internet với n8n trên máy tính của mình!

Kết luận

Vậy là bạn đã hoàn toàn chinh phục được một trong những kỹ năng quan trọng nhất khi phát triển workflow n8n trên máy tính cá nhân. Rào cản localhost giờ đây đã không còn là trở ngại. Với “cây cầu” ngrok, bạn đã có thể tự tin nhận và gỡ lỗi webhook trong thời gian thực, giúp đẩy nhanh tốc độ sáng tạo và hoàn thiện các quy trình tự động hóa một cách chuyên nghiệp.

Hãy áp dụng kỹ năng này vào các dự án tiếp theo và chứng kiến sự khác biệt mà nó mang lại. Chúc bạn thành công trên hành trình làm chủ n8n!

Những câu hỏi thường gặp