Nếu bạn sử dụng webpack và gặp trục trặc khi không thể set proxy trỏ về một tên miền ảo (local virtual hosts), hướng dẫn này sẽ là điều bạn cần thực hiện.
Các khái niệm liên quan
webpack là công cụ đang nổi lên trong thời gian 2-3 năm gần đây được sử dụng trên môi trường NodeJS cho phép cung cấp khả năng compile và thực thi thông qua Javascript.
local virtual host là tên miền ảo được cấu hình và chỉ hoạt động trên máy tính của lập trình viên. Ví dụ thường ngày trước đặt tên là codetot.dev chẳng hạn, nhưng sau đợt tên miền .dev bị Google mua lại thì hầu hết lập trình viên đều chuyển qua dạng codetot.test vì đây là tên miền được coi là phù hợp nhất để lập trình local.
Bạn có thể tạo local virtual host bằng nhiều cách, thông dụng nhất thì dùng MAMP Pro (trên Mac) hoặc sử dụng uWAMP (trên Windows). Cả hai đều có chức năng tự động sửa file hosts trên máy để cập nhật luôn khi bạn thêm tên miền.
Giờ ta cùng tìm hiểu vấn đề gặp phải khi cài đặt webpack project cần sử dụng proxy kết hợp với virtual host nhé.
Webpack và proxy
webpack có cung cấp môi trường để tạo proxy nhưng là bind tới thư mục hiện đang chứa code, ví dụ như đoạn code sau trong file webpack.config.js
var path = require('path');
module.exports = {
//...
devServer: {
contentBase: path.join(__dirname, 'dist'),
compress: true,
port: 9000
}
};
Tuy vậy, nếu bạn đang lập trình WordPress trong thư mục giao diện, thì việc này sẽ chẳng dẫn tới đâu ngoài việc hiển thị cây thư mục của giao diện đó trên trình duyệt cả.
Bởi vậy, ta cần phải triển khai thiết lập BrowserSync để nó cho phép truy cập qua một lớp proxy.
Cài đặt BrowserSync hỗ trợ proxy cho webpack
Đầu tiên, bạn cần cài đặt các thư viện mới trong npm:
npm i -D browser-sync browser-sync-webpack-plugin webpack-dev-server
Thiết lập BrowserSync hỗ trợ proxy cho webpack
Trong webpack.config.js bạn thực hiện các bước sau:
Định nghĩa thư viện BrowserSync
const BrowserSyncPlugin = require('browser-sync-webpack-plugin')
Thêm cấu hình proxy của BrowserSync
Tiếp đến, trong plugins, bạn thêm đoạn code sau:
new BrowserSyncPlugin({
host: 'localhost',
port: 3000,
proxy: 'http://codetot.test'
})
Hãy thay bằng tên miền bạn đang chạy trên local.
Thêm command chạy lệnh
Cuối cùng, bạn cần kiểm tra trong package.json đã có dòng lệnh gọi đúng như này chưa
"scripts": {
"dev": "webpack-dev-server --progress --colors",
"start": "webpack && npm run dev"
}
Bước này có thể khác nhau nên bạn cần tự mình kiểm tra trong project nhé. Giờ thì hãy gõ npm run start và nếu bạn thực hiện thành công, bạn sẽ thấy:
+ 1 hidden module [Browsersync] Proxying: http://codetot.test [Browsersync] Access URLs: -------------------------------------- Local: http://localhost:3000 External: http://192.168.2.101:3000 -------------------------------------- UI: http://localhost:3001 UI External: http://localhost:3001 --------------------------------------
Vậy là cấu hình BrowserSync đã hoàn tất.
Giám đốc tại Công ty CP CODE TỐT. Quản lý ngôn ngữ bản địa tiếng Việt tại WordPress. Là tác giả chính tại codetot.net, Khôi muốn ghi lại một sốvấn đề kỹ thuật trong quá trình phát triển các dự án website với khách hàng.
