Chạy cục bộ, đường hầm HTTPS và khả dụng cho ChatGPT

1. localhost chỉ dành cho bạn, không dành cho ChatGPT

Bắt đầu từ điểm gây “vỡ mộng” lớn nhất của mô-đun này. Bạn mở http://localhost:3000 trong trình duyệt, mọi thứ chạy ngon, Next.js mỉm cười, widget render tốt. Có vẻ hợp lý: “Vì mình đã có URL, hãy đưa luôn cho ChatGPT”.

Vấn đề là localhost không phải là “tên miền kỳ diệu của máy tôi trên Internet”. Đó là một tên đặc biệt luôn trỏ về chính chiếc máy đang chạy trình duyệt hoặc client. Laptop của bạn đang gọi tới chính nó. Các máy chủ OpenAI nơi ChatGPT chạy cũng có thể gọi tới localhost… nhưng là của họ — ở trong trung tâm dữ liệu. Còn Next.js của bạn thì ẩn sau router tại nhà, NAT và có thể cả VPN của công ty.

Trong bài này, chúng ta sẽ:

• tìm hiểu vì sao localhost không thể truy cập từ ChatGPT;
• thiết lập đường hầm HTTPS qua cloudflared từ localhost:3000 tới URL công khai;
• kết nối URL đó vào ChatGPT Dev Mode;
• kiểm tra chuỗi “mã → đường hầm → ChatGPT” bằng một thay đổi đơn giản trong widget và bàn về các “cạm bẫy” điển hình.

Từ đây suy ra hai sự thật đơn giản:

1. ChatGPT không biết laptop của bạn ở đâu.
2. Ngay cả khi biết, nó cũng không thể kết nối trực tiếp — kết nối vào là bị chặn.

Ngoài ra, ChatGPT về nguyên tắc chỉ làm việc với các endpoint HTTPS công khai (điểm vào): cần có tên miền chuẩn và chứng chỉ TLS. Vì lý do bảo mật, máy chủ OpenAI không truy cập các địa chỉ HTTP tùy ý không được mã hóa, nên bắt buộc cần tên miền HTTPS với chứng chỉ hợp lệ. Chỉ đơn giản “đẩy” ra ngoài http://my‑public‑IP:3000 — không còn là phương án.

Vì vậy, ta cần một bên trung gian — một dịch vụ có thể:

1. Hiện diện trên Internet với tên miền HTTPS chuẩn.
2. Có thể chuyển tiếp an toàn các yêu cầu từ tên miền đó vào localhost:3000 của bạn.

Đó chính là đường hầm HTTPS.

2. Đường hầm HTTPS là gì: mô hình trực quan

Bỏ qua thuật ngữ đáng sợ, đường hầm là dịch vụ cấp cho bạn một URL công khai (tạm thời hoặc cố định) và chuyển tiếp mọi yêu cầu từ đó vào cổng cục bộ của bạn. Trong ngôn ngữ mạng, về bản chất đó là reverse proxy, giữ kết nối đi ra tới đám mây.

Ví dụ trực quan: bạn đang ngồi sau cánh cửa đóng (router ở nhà), còn đường hầm là một “người giao thư” đứng bên ngoài với tấm biển “tất cả thư gửi ở đây”, thỉnh thoảng tự đi vào bằng lối sau và chuyển thư tận tay cho bạn.

Sơ đồ đường đi của yêu cầu trông như sau:

sequenceDiagram
    participant ChatGPT as ChatGPT (đám mây)
    participant Tunnel as Đường hầm HTTPS
(Cloudflare / ngrok)
    participant Dev as Dev server của bạn
(localhost:3000)

    ChatGPT->>Tunnel: Yêu cầu HTTPS tới https://xyz.trycloudflare.com
    Tunnel->>Dev: Yêu cầu HTTP tới http://localhost:3000
    Dev-->>Tunnel: Phản hồi Next.js
    Tunnel-->>ChatGPT: Phản hồi HTTPS

Các điểm mấu chốt như sau.

Thứ nhất, bạn là bên khởi tạo kết nối tới dịch vụ đường hầm. Tiện ích (cloudflared, ngrok v.v.) tự thiết lập kết nối đi ra tới đám mây. Điều này hầu như luôn được phép ngay cả sau NAT/tường lửa.

Thứ hai, dịch vụ đường hầm cấp cho bạn tên miền HTTPS với chứng chỉ hợp lệ, nên bạn không cần tự dựng TLS tự ký.

Thứ ba, với ChatGPT, App của bạn trông như một web service thông thường có tên miền HTTPS. Nó không hề biết rằng phía sau lưu lượng được chuyển tới laptop của ai đó.

3. Có những loại đường hầm nào và ta chọn gì trong khóa học

Trong hệ sinh thái web có vài giải pháp phổ biến cho tác vụ này:

• ngrok — kinh điển, lâu nay là chuẩn “làm sao đưa môi trường local ra ngoài”.
• Cloudflare Tunnel (cloudflared) — giải pháp miễn phí hiện đại từ Cloudflare, cấp miền dạng *.trycloudflare.com ngay cả khi không đăng ký; cũng có thể gắn miền riêng nếu muốn.
• LocalTunnel — tối giản, chỉ là gói npm cấp URL HTTPS tạm thời như https://something.loca.lt.

Tất cả đều giải quyết cùng một việc: cho máy chủ cục bộ một tên miền HTTPS công khai, phù hợp với ChatGPT.

Trong khóa học, để tránh phân tán, ta sẽ dùng Cloudflare Tunnel với tiện ích cloudflared làm công cụ “chính”. Lý do đơn giản: không cần đăng ký cho đường hầm nhanh, cấp HTTPS chuẩn, chạy dễ bằng một lệnh.

Nếu bạn đã quen ngrok — cũng không sao. Lệnh sẽ hơi khác, nhưng khái niệm y hệt: ngrok http 3000 thay cho cloudflared tunnel --url http://localhost:3000.

Để dễ so sánh, tóm tắt công cụ trong một bảng nhỏ.

https://*.trycloudflare.com

https://*.ngrok.app

https://*.loca.lt

Trong bài này, ta tập trung vào Cloudflare Tunnel ở chế độ “đường hầm nhanh dùng một lần”. Như vậy là quá đủ để “kết nối” Next.js của bạn với ChatGPT trong Dev Mode.

4. Kiểm tra Next.js cục bộ đang chạy

Trước khi đưa thứ gì đó ra ngoài qua đường hầm, cần chắc chắn máy chủ cục bộ thực sự đang chạy. Nếu không, bạn sẽ gỡ lỗi đường hầm trong khi vấn đề là Next.js chưa chạy.

Nhắc lại trình tự chuẩn:

# từ thư mục gốc của dự án với template Apps SDK
npm install      # nếu chưa chạy
npm run dev      # khởi động dev server của Next.js

Mặc định Next.js 16 sẽ chạy trên http://localhost:3000 (nếu cổng không bận). Trong terminal bạn sẽ thấy kiểu như:

ready - started server on 0.0.0.0:3000, url: http://localhost:3000

Mở trong trình duyệt http://localhost:3000 và chắc chắn trang template hiển thị. Đây là “phòng thí nghiệm cục bộ” của bạn. Nếu ở đây có lỗi (lỗi build, TypeScript cảnh báo, cổng bận) — hãy sửa cái này trước, rồi mới tới đường hầm.

5. Khởi chạy Cloudflare Tunnel: từ localhost tới HTTPS công khai

Giờ đến phần hấp dẫn — làm sao để bất kỳ ai trên Internet (kể cả ChatGPT) có thể mở Next.js của bạn bằng HTTPS‑URL.

Cài đặt cloudflared

Cách cài phụ thuộc HĐH. Nhanh nhất trên macOS — qua Homebrew:

brew install cloudflare/cloudflare/cloudflared

Trên Windows và Linux, bạn có thể tải binary sẵn hoặc dùng trình quản lý gói theo khuyến nghị trong tài liệu Cloudflare (liên kết có trong tài liệu bổ sung của mô-đun).

Kiểm tra cài đặt bằng lệnh:

cloudflared --version

Nếu tiện ích không tìm thấy, kiểm tra PATH hoặc khởi động lại terminal.

Đường hầm nhanh dùng một lần

Mục tiêu bây giờ — đường hầm chạy được tối thiểu, không tài khoản, không domain riêng, không cấu hình phức tạp. cloudflared có chế độ quick tunnel, cấp URL trên miền trycloudflare.com.

Khi npm run dev đang chạy, mở một terminal khác và thực thi:

cloudflared tunnel --url http://localhost:3000

Ghi nhớ quy tắc đơn giản: HTTPS — bên ngoài, HTTP — bên trong. cloudflared sẽ cấp tên miền HTTPS ở bên ngoài, nhưng tới localhost:3000 của bạn nó truy cập qua HTTP thường.

Sau vài dòng log ngắn, bạn sẽ thấy dòng kiểu:

INF +-------------------------------------------------------------+
INF |  Your quick Tunnel has been created!                        |
INF |  https://giftgenius-1234.trycloudflare.com                  |
INF +-------------------------------------------------------------+

https://giftgenius-1234.trycloudflare.com chính là địa chỉ công khai mới cho ứng dụng cục bộ của bạn. Đường hầm nhận yêu cầu HTTPS ở miền này và chuyển tiếp tới http://localhost:3000.

Vài điểm quan trọng.

Thứ nhất, terminal chạy cloudflared phải được giữ mở trong suốt thời gian cần đường hầm. Khi bạn đóng nó (hoặc bấm Ctrl+C), đường hầm tắt, URL ngừng hoạt động.

Thứ hai, mỗi lần chạy quick tunnel có thể ra URL mới. Với môi trường học tập hiện tại điều này là bình thường: mục tiêu là cho ChatGPT truy cập Next.js của bạn qua bất kỳ địa chỉ HTTPS nào đang hoạt động. Nhưng điều đó nghĩa là đôi khi bạn phải cập nhật URL trong ChatGPT Dev Mode. Trong mô‑đun 7, ta sẽ quay lại chủ đề đường hầm và cấu hình một dev domain ổn định để khỏi phải đổi địa chỉ.

Kiểm tra đường hầm như một website bình thường

Trước khi nối vào ChatGPT, hãy kiểm tra đường hầm có thể mở từ Internet hay không.

1. Mở https://...trycloudflare.com bạn vừa nhận trong trình duyệt.
2. Bạn phải thấy cùng giao diện như tại http://localhost:3000.
3. Trong console nơi chạy npm run dev, bạn sẽ thấy yêu cầu mới — nghĩa là Next.js thực sự đang phục vụ truy cập từ bên ngoài.

Nếu trang không mở được hoặc báo lỗi, hãy kiểm tra trước:

• npm run dev có đang chạy không.
• Bạn có gõ đúng URL cục bộ khi chạy đường hầm không (http://localhost:3000, không phải https:// và không phải cổng 3001).
• Có thứ gì đó chặn kết nối đi ra hay không (hiếm nhưng có thể trong mạng công ty nghiêm ngặt).

6. Truyền URL này vào ChatGPT Dev Mode

Giờ chúng ta đã có đủ để kết nối chuỗi:

ChatGPT (đám mây) → đường hầm HTTPS của bạn → Next.js cục bộ.

Phần giao diện Dev Mode bạn đã thấy ở bài trước, giờ chỉ lặp lại điều tương tự nhưng với HTTPS‑URL thật, không phải lý thuyết.

Trình tự chung trong ChatGPT như sau.

Trước tiên mở ChatGPT trong trình duyệt và đi tới khu vực dành cho nhà phát triển (thường là “Developer”, “Apps”, “My apps” — tên cụ thể có thể đổi theo UI).

Tạo ứng dụng mới hoặc chỉnh sửa ứng dụng dev đã có (nếu bạn đã tạo).

Trong ô nhập URL App của bạn, điền địa chỉ gốc của đường hầm, ví dụ:

https://giftgenius-1234.trycloudflare.com/mcp

Điểm vào là /route/mcp.ts. Khi kết nối, ChatGPT sẽ bắt đầu từ đây và lấy toàn bộ thông tin cần thiết. Trong README của template có thể nêu đường dẫn khác nếu có nhiều ứng dụng; còn hiện tại, cứ xem URL gốc của đường hầm + /mcp là thứ bạn cần.

Lưu cấu hình ứng dụng. Lúc này ChatGPT sẽ gửi vài yêu cầu tới ứng dụng của bạn qua đường hầm:

• Đọc manifest của App (metadata, công cụ, v.v.).
• Kiểm tra khả dụng của endpoint MCP.
• Lấy danh sách tất cả tools và resources.
• Cache mã HTML của mọi widget(!)

Nếu mọi thứ ổn, bạn sẽ thấy ứng dụng trong danh sách Dev‑Apps. Nếu có lỗi (manifest không hợp lệ, máy chủ không phản hồi, đường hầm tắt), ChatGPT sẽ báo lỗi kiểu “App unavailable” hoặc tương tự.

Quan trọng: cùng một HTTPS‑URL của đường hầm sẽ được ChatGPT dùng cho cả gọi công cụ (MCP) và để tải widget và static. Phần tiếp theo ta sẽ tách bạch hai vai trò này.

7. Luồng yêu cầu hoạt động ra sao: hai vai trò của đường hầm

Cần hiểu rõ ChatGPT làm gì với URL này. Trong kiến trúc Apps SDK có hai điểm vào chính: endpoint MCP và UI‑widget.

Chuỗi đơn giản như sau:

flowchart LR
    ChatGPT["ChatGPT (mô hình)"] 
    subgraph Internet
        Tunnel[Đường hầm HTTPS
giftgenius-1234.trycloudflare.com]
    end
    Local["Next.js dev server http://localhost:3000"]

    ChatGPT -- HTTP(S) yêu cầu tới /mcp --> Tunnel
    ChatGPT -- Tải iframe /widget --> Tunnel
    Tunnel --> Local

Đường hầm thực tế có hai vai trò chính:

• Vai trò 1: Endpoint MCP (công cụ). Khi mô hình quyết định gọi một công cụ (tool), nó gửi HTTP POST tới endpoint MCP (trong template là route app/mcp/route.ts của Next.js) trên cùng miền của đường hầm.
• Vai trò 2: UI‑widget và static. Khi mô hình quyết định hiển thị widget, nó nhúng iframe với URL của bạn (thường là /widget hoặc theo manifest), và việc tải cũng thông qua đường hầm.

Theo nghĩa này, đường hầm không “chỉ cho một thứ”, mà là cánh cửa thống nhất tới App cục bộ của bạn: UI, MCP, static — tất cả đi qua cùng một miền HTTPS công khai.

8. Thực hành: kiểm tra chuỗi “mã → đường hầm → ChatGPT”

Để chắc chắn mọi thứ thực sự hoạt động, không chỉ đẹp trên sơ đồ, hãy làm kịch bản tối thiểu sau.

Thứ nhất, chạy npm run dev và đảm bảo http://localhost:3000 mở được trong trình duyệt.

Thứ hai, chạy cloudflared tunnel --url http://localhost:3000 để lấy HTTPS‑URL công khai. Kiểm tra nó trong một trình duyệt khác hoặc thậm chí trên thiết bị khác (ví dụ điện thoại qua mạng di động) — như vậy bạn chắc chắn rằng yêu cầu đi qua Internet chứ không chỉ vòng quanh máy bạn.

Thứ ba, mở ChatGPT, vào Dev Mode và đảm bảo App của bạn được kết nối với URL này. Trong Composer của ChatGPT, chọn App của bạn, bắt đầu hội thoại và xem ChatGPT có chèn widget, tải UI của bạn không.

Để thấy rõ đó chính là mã của bạn, hãy sửa một thứ rất đơn giản trong widget, ví dụ tiêu đề:

// app/widget/page.tsx (ví dụ)
'use client';

export default function GiftGeniusWidget() {
  return <h1>GiftGenius qua đường hầm 🚇</h1>;
}

Sau khi lưu file:

1. Đợi Next.js chạy fast refresh,
2. Vào phần ChatGPT nơi bạn đã thêm ứng dụng của mình và refresh nó.
3. Mở/cập nhật phiên làm việc với App trong ChatGPT
4. Nhập yêu cầu mới đề nghị ChatGPT hiển thị widget của bạn
5. Đảm bảo văn bản tiêu đề mới đã xuất hiện ngay trong ChatGPT.

Đó là khoảnh khắc “xác thực”: bạn vừa thay đổi code trên máy mình, và thay đổi đó đã hiển thị trên giao diện đám mây của ChatGPT qua đường hầm.

9. Một chút về bảo mật và “bạn thật sự đang phơi gì ra ngoài”

Bất kỳ đường hầm nào cũng không phải đồ chơi, mà là cửa vào công khai thực sự tới máy của bạn. Trong kịch bản học tập, ta chỉ chuyển tiếp localhost:3000 nơi ứng dụng Next.js chạy. Tương đối an toàn nếu:

• cổng đó không dùng cho thứ gì khác;
• bạn không có “ứng dụng quái vật” nhúng admin DB, phpMyAdmin và bốn dịch vụ demo khác vào cùng cổng.

Vài quy tắc thực tế quan trọng.

Đường hầm là công cụ phát triển, không phải hạ tầng production. Ta dùng nó có chủ đích trong Dev Mode, không dành cho người dùng thật và càng không để nhận thanh toán.

Đừng chạy các bảng điều khiển quản trị, DB không mật khẩu hay thứ tương tự trên cùng cổng (3000). Mọi thứ lắng nghe trên cổng đó sẽ hiển thị ra Internet khi đường hầm đang hoạt động.

Đừng phát tán URL trycloudflare.com của bạn bừa bãi. Xác suất ai đó quét mạnh trong lúc bạn làm bài tập có thể thấp. Nhưng thói quen “quăng link dev server đi khắp nơi” có thể trả giá ở production.

Sau này, khi tới chủ đề Vercel và môi trường production, ta sẽ dùng hosting chuẩn với miền ổn định và bảo mật production, còn đường hầm chỉ là công cụ dev.

10. Lỗi điển hình khi làm việc với chạy cục bộ và đường hầm

Giả sử giờ bạn đã có Next.js cục bộ, đường hầm HTTPS hoạt động và Dev Mode trong ChatGPT đã kết nối. Cuối cùng — vài lỗi điển hình gần như ai cũng gặp ở những lần đầu, và cách chẩn đoán nhanh.

Lỗi số 1: cố dùng http://localhost:3000 trực tiếp trong ChatGPT.
Đôi khi người mới chỉ việc dán URL này vào cấu hình Dev Mode và thắc mắc vì sao ChatGPT báo không truy cập được App. Nhắc lại: localhost là “bản thân tôi” đối với bên gửi yêu cầu. Với ChatGPT đó là máy chủ OpenAI, không phải laptop của bạn. Bạn sẽ không thấy log gì đặc biệt trên máy, vì yêu cầu chưa từng đến máy bạn.

Lỗi số 2: chạy đường hầm tới cổng không tồn tại hoặc sai.
Kịch bản thường gặp: bạn từng chạy npm run dev trên cổng 3000, máy chủ đã tắt, nhưng ở terminal khác theo thói quen bạn vẫn chạy cloudflared tunnel --url http://localhost:3000. Cloudflare cấp tên miền HTTPS đẹp, nhưng mở lên thì lỗi. Chẩn đoán: máy chủ cục bộ không chạy. Luôn kiểm tra http://localhost:3000 trong trình duyệt trước, rồi mới bật đường hầm.

Lỗi số 3: nhầm giữa http:// và https:// khi chạy đường hầm.
Đường hầm tự cấp HTTPS ở bên ngoài, nhưng tới máy chủ cục bộ nó phải đi bằng HTTP, ví dụ http://localhost:3000. Cố gắng dùng https://localhost:3000 thường gây lỗi TLS kỳ lạ bên trong hoặc không truy cập được. Nhớ quy tắc: HTTPS — bên ngoài, HTTP — bên trong.

Lỗi số 4: đóng terminal chạy đường hầm khi vẫn đang test trong ChatGPT.
Một trường hợp kinh điển khác: cấu hình xong, App chạy trong ChatGPT, rồi bạn vô tình đóng cửa sổ terminal có cloudflared. Mười phút sau quay lại ChatGPT — thấy “App unavailable”. Lý do đơn giản: URL vẫn nằm trong cấu hình App, nhưng đường hầm đã tắt. Ghi nhớ: khi đang test App trong Dev Mode, luôn giữ một terminal chạy đường hầm bên cạnh.

Lỗi số 5: không để ý URL mới sau khi khởi động lại đường hầm.
Trong chế độ quick tunnel, Cloudflare mỗi lần chạy sẽ cấp một *.trycloudflare.com mới. Nếu bạn dừng và chạy lại cloudflared nhưng trong ChatGPT vẫn là URL cũ, ChatGPT sẽ tiếp tục gọi vào đó và nhận timeout hoặc dịch vụ của ai khác. Khi URL đường hầm thay đổi, luôn cập nhật nó trong cấu hình Dev Mode. Sau này ta sẽ bàn cách có dev domain ổn định để không phải chạy theo URL.

Lỗi số 6: chuyển tiếp thêm dịch vụ thừa hoặc nguy hiểm trên cùng cổng.
Đôi khi vì tiện, nhà phát triển chạy trên cổng 3000 không chỉ Next.js mà cả “công cụ phụ”: bảng debug, API thử nghiệm không xác thực, v.v. Khi bạn chuyển tiếp cổng này qua đường hầm, tất cả sẽ lộ ra ngoài. Với bài học, có thể không sao, nhưng thói quen này trong dự án thực tăng rủi ro rò rỉ và tấn công. Luôn ghi nhớ: mọi thứ trả lời trên cổng được nêu trong đường hầm đều “nhìn” ra Internet.