Chia Sẻ Local Website (localhost) Ra Bên Ngoài - Thao Tran

Giả sử bạn đang phát triển một website nào đó ở máy tính cá nhân và muốn chia sẻ cho ai đó bên ngoài trải nghiệm, sử dụng thử hoặc là muốn test nó ở một môi trường, thiết bị nào khác như trên thiết bị di động chẳng hạn thì làm sao chúng ta sẽ truy cập vào trang web đó đây?

• Deploy nó lên 1 host nào đó?
• Ây chà… nếu thế thì sẽ tốn tiền mua host… Mình nghèo T_T
• Deploy lên Azure?
• Ừa, up trực tiếp bằng cách publish từ Visual Studio hay FTP hay Filezilla hoặc pla pla gì đó cũng được. Hoặc up bằng kudu thì tham khảo bài của mình ở đây nè: Publish angular app lên Azure bằng Kudu
• Mà mình ko có Azure T_T
• Vậy đọc bài blog của mình tiếp nha

Trong bài này mình sẽ hướng dẫn các bạn 2 cách theo thứ tự từ khó đến dễ (chỉ vậy cho mọi người đọc hết bài blog :P) để thiết lập cho bên ngoài (mạng khác) truy cập vào trang web local (localhost) của chúng ta: tạo thủ công hoặc tạo localtunnel.

Giả sử là bạn đã có sẵn một trang web đã host trên IIS với port 80 dành cho http và port 443 dành cho https

Cách 1: Tạo Thủ Công

Với bước này chúng ta sẽ public IP của máy tính hiện tại của chúng ta ra bên ngoài

Bước 1: Xem IP hiện tại của máy

Vào cmd gõ ipconfig, lúc này chúng ta sẽ thấy tại dòng IPv4 Address là địa chỉ IP hiện tại của máy mình

Bước 2: Truy cập vào trang quản lý router

Thông thường chúng ta sẽ vào bằng địa chỉ 192.168.1.1 hoặc 192.168.0.1 rồi nhập thông tin tài khoản admin vào

Bước 3: Tuỳ chỉnh Port Forwarding

Sau khi đăng nhập thành công, chúng ta chọn đến mục nào có chữ Port Forwarding. Rồi lần lượt điền thông tin vào tương tự như hình bên dưới.

Tại ô nào có chữ Start Port/End Port thì bạn điền số port mà bạn đã thiết lập trên IIS trước đó. Chẳng hạn như ở đây mình muốn public trang https mà mình đã host với port 443 ra thì trong các ô này mình sẽ điền 443.

Ở ô LAN Host IP Address thì bạn bỏ cái địa chỉ ip hiện tại của máy mình đã lấy được ở bước 1 vào

Rồi save lại là xong. Nếu trường hợp máy bạn bị thay đổi ip thì cứ vào đây mà chỉnh lại là được.

Bước 4: Xem địa chỉ IP hiện tại của router

Trong trang quản trị router đâu đó bạn sẽ tìm thấy địa chỉ IP hiện tại của router, nếu ko biết bạn có thể vào trang https://whatismyipaddress.com/ hoặc là lên google tìm đại 1 trang what is my ip address nào đó rồi vào xem sẽ thấy được địa chỉ IPv4 hiện tại của router

Bước 5: Truy cập vào trang localhost

Lúc này, bạn đã có thể chia sẻ hoặc truy cập vào trang localhost của mình bằng một mạng khác hoặc một thiết bị khác rồi đó. Khi đó địa chỉ chúng ta cần gõ vào sẽ là địa chỉ IPv4 đã lấy ở bước 4.

Để đảm bảo chắc chắn là bên ngoài có thể truy cập vào, bạn có thể test bằng cách dùng 3G trên điện thoại để truy cập vào trang web.

Bạn lưu ý là với cách này, nếu địa chỉ IP hiện tại của máy thay đổi thì chúng ta phải truy cập vào trang quản lý router để thay đổi lại địa chỉ IP đó nhé! Hoặc chúng ta cũng có thể set IP tĩnh cho máy tính hiện tại của chúng ta luôn cũng được.

Cách 2: Tạo Localtunnel

Ví dụ trường hợp bạn quên hoặc ko biết mật khẩu router thì có thể dùng tạm bằng cách này.

Đây là một cách có tên gọi là Localtunnel.

Localtunnel là một “loại công cụ” cung cấp đường hầm (tunnel) liên kết localhost của bạn và mạng internet để bạn có thể truy cập vào localhost giống như một server bình thường.

Bước 1: Đăng ký tài khoản

Chúng ta truy cập vào trang https://ngrok.com/ để đăng ký tài khoản

Bước 2: Tải ngrok

Truy cập vào trang https://dashboard.ngrok.com/get-started để tải ngrok

Bước 3: Giải nén

Giải nén thư mục đã tạo bằng cách thủ công hoặc dùng lệnh unzip /path/to/ngrok.zip để giải nén

Bước 4: Kết nối tài khoản

Sau khi giải nén thành công, chúng ta dùng cmd rồi gõ lệnh ./ngrok authtoken <mã token của bạn>

Để lấy được đoạn mã token đó, tại trang Setup & Installation ở bước 2 ở trên, trong đó có phần Connect your account. Bạn cứ copy dòng lệnh đó rồi dán vào cmd là được

Bước 5: Khởi tạo tunnel

Sau khi liên kết xác thực tài khoản xong chúng ta dùng lệnh ./ngrok http <số port> để tạo tunnel cho trang web

Lúc này ngrok sẽ sinh ra cho chúng ta 1 địa chỉ có dạng là <a href=”https://https://<mã bất kỳ gì đó>.ngrok.io, chúng ta copy đường link đó và truy cập vào là được

Ngoài Ngrok ra thì chúng ta sẽ còn 1 số công cụ phổ biến khác để hỗ trợ tạo localtunnel này là Serveo hoặc localtunnel. Đối với Serveo thì bạn không cần phải tải hay đăng ký tài khoản gì luôn

Chia sẻ:

• Bấm để chia sẻ trên Twitter (Mở trong cửa sổ mới)
• Nhấn vào chia sẻ trên Facebook (Mở trong cửa sổ mới)
• Thêm

• Bấm để chia sẻ lên LinkedIn (Mở trong cửa sổ mới)

Thích Đang tải...

Có liên quan