Từ ứng dụng cục bộ đến trang web công cộng trong vài phút

Lập trình Từ ứng dụng cục bộ đến trang web công cộng trong vài phút Ba cách miễn phí để nhanh chóng triển khai một ứng dụng web tĩnh mà bất kỳ ai cũng có thể truy cập Thomas Reid Ngày 2/6/2026 12 phút đọc Chia sẻ Hình ảnh do tác giả cung cấp Trong bài viết này, tôi sẽ trình bày 3 cách hoàn toàn miễn phí để nhanh chóng triển khai một ứng dụng web đơn giản, giúp ứng dụng này có thể truy cập công khai trên internet. Với từ "đơn giản", tôi muốn nói đến một ứng dụng web tĩnh, tức là một ứng dụng không có cơ sở dữ liệu phụ trợ, tài khoản người dùng hoặc logic phía máy chủ. Mặc dù điều này có vẻ hơi hạn chế, nhưng vẫn có rất nhiều điều bạn có thể làm chỉ với HTML, CSS và JavaScript. Vì trọng tâm là các phương pháp triển khai khác nhau, tôi sẽ không dành nhiều thời gian cho bản thân ứng dụng web. Tôi muốn một dự án nhỏ, đơn giản nhưng đủ thực tế để triển khai và chia sẻ. Vì vậy, tôi đã nhờ Codex xây dựng một trò chơi trên trình duyệt, một trò chơi bắn súng kiểu Space Invaders đơn giản mà tác nhân này quyết định đặt tên là Starline Defender. Trò chơi rất dễ chơi. Bạn di chuyển một con tàu nhỏ sang trái và phải bằng các phím mũi tên, bắn những người ngoài hành tinh đang đến bằng phím cách, ẩn nấp sau lá chắn, mất mạng khi bị bắn và di chuyển qua các đợt nhanh hơn khi điểm số tăng lên. Trò chơi hoạt động với điều khiển bàn phím trên máy tính để bàn và điều khiển cảm ứng trên thiết bị di động. Tôi sẽ để lại liên kết đến cả ba URL ứng dụng mà tôi đã triển khai ở cuối bài, để bạn có thể tự chơi. Đây là lời nhắc tôi đã sử dụng. Tạo một ứng dụng web đơn giản chứa html, css và javascript là một trò chơi kiểu space invaders đơn giản Sau khoảng 16 phút, Codex đã đưa ra kết quả này. Hoạt động trong 16 phút 45 giây Tôi sẽ xây dựng ứng dụng này dưới dạng một tệp HTML độc lập duy nhất với CSS và JavaScript nhúng, sử dụng canvas để ứng dụng chạy ở bất cứ đâu mà không cần bước xây dựng. Tôi sẽ giữ nguyên tệp tải xuống hiện có và thêm một trang trò chơi mới. Tôi sẽ đưa toàn bộ trò chơi vào một tệp: kết xuất canvas, sóng người ngoài hành tinh, lá chắn, tính điểm, mạng, cấp độ, điều khiển bàn phím và điều khiển trên màn hình cho thiết bị cảm ứng. Sau đó, tôi sẽ mở ứng dụng cục bộ thông qua máy chủ localhost hiện có và thực hiện kiểm tra nhanh trực quan. Đã tạo 1 tệp Tệp trò chơi đã được đặt đúng vị trí. Tôi đang kiểm tra nó thông qua localhost ngay bây giờ để chúng ta có thể phát hiện các vấn đề về canvas trống, lỗi tập lệnh hoặc sự cố bố cục trước khi tôi bàn giao. Xác minh trang trò chơi Trang tải qua localhost. Kiểm tra trang chỉ đọc của trình duyệt không thể kiểm tra trực tiếp các pixel canvas, vì vậy tôi đang chuyển sang kiểm tra ảnh chụp màn hình và nhật ký console, đây là loại kiểm tra hợp lý cho trang nặng canvas này. Ảnh chụp màn hình trò chơi Ảnh chụp màn hình đã phát hiện một lỗi bố cục: trên khung nhìn ngắn, bảng trò chơi bị thu nhỏ nhưng ôm sát cạnh trái, để lại khoảng trống ở bên phải. Tôi đang căn giữa và giới hạn kích thước bảng để nó trông có chủ ý trên cả khung hình kích thước di động và máy tính để bàn. Đã chỉnh sửa 1 tệp Tôi đã vá lỗi kích thước đáp ứng. Tôi đang tải lại trang ngay bây giờ và thực hiện một lượt tương tác: bắt đầu trò chơi, xác nhận cập nhật canvas và kiểm tra xem không có lỗi console nào. Xác minh trò chơi đã cập nhật Hoàn tất. Tôi đã tạo SPA một tệp tại đây: starline-defenders.html Bạn có thể chơi nó trong trình duyệt trong ứng dụng tại: http://127.0.0.1:8765/starline-defenders.html Tôi cũng đã xác minh rằng nó tải, bắt đầu, hiển thị canvas và không có lỗi console của trình duyệt. Tôi đã thử nghiệm trò chơi cục bộ và nó hoạt động tốt. Vì vậy, bây giờ là lúc triển khai nó lên web để cả thế giới có thể chiêm ngưỡng sự tuyệt vời của nó! Các hệ thống triển khai chúng ta sẽ xem xét là: 1. GitHub Pages 2. here.now 3. Hugging Face Spaces Để tránh hiểu lầm, ngoài việc là người dùng các hệ thống này, tôi không có bất kỳ mối liên hệ, liên kết hay hợp tác nào với các công ty được đề cập ở trên. Các yêu cầu chung Hầu hết các máy chủ tĩnh đều mong đợi trang chủ được đặt tên là index.html, vì vậy điều đầu tiên cần làm là đổi tên tệp của chúng ta từ starline-defenders.html. Đối với dự án này, đó là tất cả những gì chúng ta cần, vì tất cả tài sản và mã của chúng ta đều nằm trong một tệp này. Tạo một thư mục trống trên hệ thống cục bộ của bạn, ví dụ: starline-defenders/ và sao chép tệp index.html vào đó. Phương pháp 1: Triển khai với GitHub Pages GitHub Pages là một lựa chọn cổ điển cho các trang web tĩnh nhỏ và ứng dụng web như thế này. Nếu dự án của bạn đã có trên GitHub, đây thường là cách triển khai vĩnh viễn đơn giản nhất. GitHub Pages có thể phục vụ HTML, CSS, JavaScript, hình ảnh và các tài sản tĩnh khác trực tiếp từ một kho lưu trữ. Đối với một trò chơi chỉ có một tệp như thế này, đó là tất cả cơ sở hạ tầng bạn cần. Những gì bạn cần Các điều kiện tiên quyết để cài đặt GitHub là: Một tài khoản GitHub Git Bash được cài đặt cục bộ Một kho lưu trữ GitHub công khai. Điều này rất cần thiết để triển khai miễn phí. Bước 1: Tạo tài khoản GitHub Truy cập https://github.com và nhấp vào nút Đăng ký ở góc trên bên phải màn hình. Bước 2: Cài đặt ứng dụng git bash Git, thông qua giao diện dòng lệnh Bash của nó, cho phép bạn tương tác với GitHub, ví dụ: sao chép tệp vào kho lưu trữ. Tải xuống bằng cách nhấp vào: https://git-scm.com/book/en/v2/Getting-Started-Installing-Git và làm theo hướng dẫn cài đặt phù hợp với hệ thống cục bộ của bạn. Bước 3: Tạo kho lưu trữ mới Đăng nhập vào tài khoản GitHub của bạn và tạo một kho lưu trữ mới có tên, ví dụ: starline-defenders Đảm bảo đó là một kho lưu trữ công khai. Bước 4: Đặt tệp index.html của bạn vào kho lưu trữ công khai Bạn thực hiện điều đó bằng cách mở thiết bị đầu cuối dòng lệnh Git Bash, sau đó thay đổi thư mục đến thư mục cục bộ chứa tệp index.html của bạn. Bây giờ hãy nhập các lệnh sau vào Git Bash. git init git config --global user.email "[email protected]" git config --global user.name "Your Name" git add index.html git commit -m "Add space invaders type game" git branch -M main git remote add origin https://github.com/YOUR_USERNAME/starline-defenders.git git push -u origin main Thay thế `YOUR_USERNAME` bằng tên người dùng GitHub của bạn. Bước 5: Bật GitHub Pages Mở kho lưu trữ mới trên GitHub, sau đó: 1. Truy cập Cài đặt (Settings). 2. Mở Trang (Pages) trong thanh bên trái. 3. Trong mục Xây dựng và triển khai (Build and deployment), chọn Triển khai từ một nhánh (Deploy from a branch). 4. Đặt nhánh nguồn (source branch) thành `main`. 5. Đặt thư mục (folder) thành `/root`. 6. Nhấp vào