Hướng dẫn thiết lập proxy cho local virtual host trong webpack

Webpack modules
Điểm bài viết
[Tổng cộng: 0 Trung bình: 0]

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.

avatar
  Subscribe  
Notify of