Tạo một máy chủ cục bộ có thể truy cập từ một địa chỉ công cộng

Tôi đã phát triển các trang web trong 10 năm tốt hơn và một trong những vấn đề lớn nhất của tôi luôn là phát triển cục bộ và đồng bộ hóa các trang web địa phương để thử nghiệm trực tiếp. Sử dụng một môi trường cục bộ là rất tốt vì nó nhanh, nhưng không thể xem được từ xa và chuyển đi đâu đó có nghĩa là hoạt động cơ sở dữ liệu, đổi tên bảng, giá trị, v.v..

Trong bài viết này, tôi sẽ chỉ cho bạn một cách dễ dàng để chạy một máy chủ cục bộ mà bạn có thể truy cập từ điện thoại của bạn và các thiết bị di động khác nguyên bản, và cũng phát sóng qua Internet, có nghĩa là chia sẻ công việc của bạn với khách hàng, mà không để lại localhost tốt.

Sử dụng Vagrant để tạo môi trường địa phương

Cách đây không lâu, tôi đã viết một bài báo ở đây trên Hongkiat về việc sử dụng Vagrant vì vậy tôi sẽ chỉ đi qua những điều cơ bản ở đây. Để biết thêm thông tin, hãy xem bài viết!

Để bắt đầu, bạn sẽ cần lấy và cài đặt VirtualBox và Vagrant. Cả hai đều miễn phí và được sử dụng để tạo một máy ảo sẽ chạy máy chủ của bạn.

Bây giờ, hãy tạo một thư mục để lưu trữ các trang web của bạn. Hãy sử dụng một thư mục có tên “Trang web” trong thư mục người dùng chính của chúng tôi. Đó sẽ là / Người dùng / [tên người dùng] / Trang web trên OS X và C: / Người dùng / [tên người dùng] / Trang web trên Windows.

Tạo một thư mục mới có tên wordpress. Đây là nơi tôi sẽ tạo ra máy ảo. Ý tưởng là mỗi thư mục trong Trang web nhà ở một máy ảo riêng biệt. Trong khi bạn có thể đặt nhiều trang web trên một máy ảo như bạn muốn, tôi muốn nhóm chúng ra theo các nền tảng - ví dụ: WordPress, Laravel, Custom

Với mục đích của hướng dẫn này, tôi sẽ tạo một trang web WordPress.

Bên trong WordPress thư mục chúng ta sẽ cần tạo hai tập tin, Vagrantfile và cài đặt. Chúng sẽ được sử dụng để thiết lập các máy ảo của chúng tôi. Jeffrey Way đã tạo ra hai tập tin khởi đầu tuyệt vời; bạn có thể lấy các tệp Vagrantfile và install.sh của anh ấy.

Tiếp theo, sử dụng thiết bị đầu cuối, điều hướng đến WordPress thư mục và loại mơ hồ lên. Điều này sẽ mất một lúc, vì hộp cần phải được tải xuống và sau đó cài đặt. Lấy một tách cà phê và xem bài đăng này trên 50 mẹo WordPress trong khi bạn chờ đợi.

Khi quá trình hoàn tất, bạn sẽ có thể đi đến 192.168.33,21 và xem một trang được phục vụ đúng cách. Thư mục nội dung của bạn phải là thư mục html trong thư mục WordPress. Bây giờ bạn có thể bắt đầu thêm tệp, cài đặt WordPress hoặc bất cứ thứ gì bạn muốn.

Đừng quên đọc hướng dẫn đầy đủ của Vagrant để biết thêm thông tin về cách tạo máy chủ ảo, ánh xạ các miền như mytest.dev và v.v..

Mở các trang web địa phương trên cùng một mạng bằng Gulp

Trong khi xây dựng một trang web, bạn nên suy nghĩ về khả năng đáp ứng. Màn hình nhỏ có thể được mô phỏng ở một mức độ nào đó bằng cách thu hẹp cửa sổ trình duyệt, nhưng đó không phải là cùng một trải nghiệm, đặc biệt là nếu bạn ném màn hình võng mạc vào hỗn hợp.

Lý tưởng nhất là bạn sẽ muốn mở trang web địa phương của bạn trên thiết bị di động của bạn. Điều này không quá khó để thực hiện, miễn là các thiết bị của bạn nằm trên cùng một mạng.

Để thực hiện điều này, chúng tôi sẽ sử dụng Gulp và Browseersync. Gulp là một công cụ để tự động hóa phát triển, Browseersync là một công cụ tuyệt vời không chỉ có thể tạo một máy chủ cục bộ mà còn đồng bộ hóa cuộn, nhấp chuột, biểu mẫu và hơn thế nữa trên các thiết bị.

Cài đặt Gulp

Cài đặt Gulp rất dễ dàng. Đi đến trang Bắt đầu để được hướng dẫn. Một điều kiện tiên quyết là NPM (Trình quản lý gói Node). Cách dễ nhất để có được điều này là cài đặt Node chính nó. Truy cập trang web Node để được hướng dẫn.

Khi bạn đã sử dụng cài đặt npm - glop gulp lệnh để cài đặt gulp trên toàn cầu, bạn cần thêm nó vào dự án của bạn. Cách để làm điều này là chạy cài đặt npm --save-dev gulp trong thư mục gốc của dự án của bạn, sau đó thêm một gulpfile.js tập tin ở đó.

Hiện tại, hãy thêm một dòng mã bên trong tệp đó cho biết rằng chúng tôi sẽ sử dụng chính Gulp.

var gulp = Yêu cầu ('gulp');

Nếu bạn quan tâm đến tất cả những điều hay ho, Gulp có thể làm như ghép các tập lệnh, biên dịch Sass và LESS, tối ưu hóa hình ảnh, v.v., hãy đọc Hướng dẫn về Gulp của chúng tôi. Trong bài viết này, chúng tôi sẽ tập trung vào việc tạo một máy chủ.

Sử dụng Browseersync

Browseersync có tiện ích mở rộng Gulp mà chúng ta có thể cài đặt theo hai bước. Đầu tiên, hãy sử dụng npm để tải xuống, sau đó chúng tôi thêm nó vào Gulpfile của chúng tôi.

Phát hành npm cài đặt gulp đồng bộ hóa trình duyệt --save-dev lệnh trong gốc dự án trong thiết bị đầu cuối; Điều này sẽ tải về phần mở rộng. Sau đó, mở Gulpfile và thêm dòng sau vào nó:

var browserSync = Yêu cầu ('đồng bộ hóa trình duyệt'). created ();

Điều này cho Gulp biết rằng chúng tôi sẽ sử dụng Browseersync. Tiếp theo, chúng tôi sẽ xác định một tác vụ kiểm soát cách Trình duyệt sẽ hoạt động.

gulp.task ('đồng bộ hóa trình duyệt', function () browserSync.init (proxy: "192.168.33.21"););

Sau khi thêm, bạn có thể gõ đồng bộ hóa trình duyệt vào thiết bị đầu cuối để khởi động một máy chủ. Bạn sẽ thấy một cái gì đó giống như hình ảnh dưới đây.

Có bốn URL riêng biệt ở đây, đây là ý nghĩa của chúng:

• Địa phương: URL cục bộ là nơi bạn có thể truy cập máy chủ trên máy bạn đang chạy. Trong trường hợp của chúng tôi, bạn có thể sử dụng 192.168.33,21 hoặc bạn có thể sử dụng cái được cung cấp bởi Borwsersync.
• Bên ngoài: Đây là URL bạn có thể sử dụng trên bất kỳ thiết bị nào được kết nối với mạng để truy cập trang web. Nó sẽ hoạt động trên máy cục bộ, điện thoại, máy tính bảng của bạn, v.v..
• Giao diện người dùng: URL này trỏ đến các tùy chọn cho máy chủ hiện đang chạy. Bạn có thể xem các kết nối, thiết lập điều chỉnh mạng, xem lịch sử hoặc tùy chọn đồng bộ hóa.
• Giao diện người dùng bên ngoài: Điều này giống như UI, nhưng có thể truy cập từ bất kỳ thiết bị nào trên mạng.

Tại sao nên sử dụng Browseersync?

Bây giờ chúng ta đã hoàn thành giai đoạn này, bạn có thể nghĩ: tại sao lại sử dụng Browseersync? URL 192.168.33.21 cũng có thể được truy cập từ bất kỳ thiết bị nào. Trong khi điều này là như vậy, bạn sẽ cần phải cài đặt WordPress vào URL này.

Tôi thường sử dụng virtualhost và có các tên miền như wordpress.local hoặc myproject.dev. Các giải pháp này giải quyết cục bộ để bạn không thể truy cập wordpress.local trên điện thoại di động của mình và xem kết quả tương tự như trên máy tính cục bộ của bạn.

Cho đến nay rất tốt, chúng tôi hiện có một trang web thử nghiệm có thể được truy cập từ bất kỳ thiết bị nào trên mạng. Bây giờ là lúc để đi toàn cầu và phát sóng công việc của chúng tôi qua internet.

Sử dụng ngrok để chia sẻ Localhost của chúng tôi

ngrok là một công cụ bạn có thể sử dụng để tạo các đường hầm an toàn đến localhost của mình. Nếu bạn đăng ký (vẫn miễn phí), bạn sẽ nhận được các đường hầm được bảo vệ bằng mật khẩu, TCP và nhiều đường hầm đồng thời.

Cài đặt ngrok

Đến trang tải xuống ngrok và lấy phiên bản bạn cần. Bạn có thể chạy nó từ thư mục mà nó đang ở hoặc di chuyển nó đến một vị trí cho phép bạn chạy nó từ bất cứ đâu. Trên Mac / Linux, bạn có thể chạy lệnh sau:

sudo mv ngrok / usr / local / bin / ngrok

Nếu bạn gặp lỗi mà vị trí này không tồn tại, chỉ cần tạo các thư mục bị thiếu.

Sử dụng ngrok

Rất may phần này cực kỳ đơn giản. Khi bạn đang chạy máy chủ của mình thông qua Gulp, hãy xem cổng mà nó đang sử dụng. Trong ví dụ trên, máy chủ cục bộ đang chạy tại http: // localhost: 3000 có nghĩa là nó đang sử dụng cổng 3000. Trong tab thiết bị đầu cuối mới, hãy chạy lệnh sau:

ngrok http 3000

Điều này sẽ tạo ra một đường hầm có thể truy cập vào localhost của bạn, kết quả sẽ giống như thế này:

URL bạn thấy bên cạnh “Chuyển tiếp” là những gì bạn có thể sử dụng để truy cập trang web của bạn từ bất cứ đâu.

Phần kết luận

Vào cuối ngày, chúng ta có thể làm ba việc:

• Xem và làm việc trên dự án của chúng tôi tại địa phương
• Xem trang web của chúng tôi thông qua bất kỳ thiết bị nào trên mạng
• Hãy để người khác xem công việc của chúng tôi ở bất cứ đâu với một liên kết đơn giản

Điều này sẽ cho phép bạn tập trung vào phát triển thay vì chạy đua để giữ cho các máy chủ thử nghiệm và cục bộ đồng bộ hóa, di chuyển cơ sở dữ liệu và các nhiệm vụ đáng lo ngại khác.

Nếu bạn có một phương pháp làm việc khác tại địa phương và chia sẻ kết quả, hãy cho chúng tôi biết!