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

Rate this post

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.

Viết một bình luận


Chuyên gia về Web
Bạn muốn làm việc với dịch vụ website do chúng tôi triển khai?
Gọi tư vấn 0982.90.4343
Chuyên gia về Web
Bài viết liên quan

02/01/2024

Fix lỗi npm không thể cài các package devDependencies
Khi cài đặt dự án,  có lúc bạn sẽ cài mãi cũng không đủ các package npm, đặc biệt là...
Gọi file PHP trong WordPress

19/09/2023

Cài đặt và sử dụng WP-CLI trên môi trường Linux
Trên một số môi trường Hosting có thể cung cấp SSH hoặc Terminal access, song không có sẵn WP-CLI để...
Import database MySQL lớn trên môi trường Docker

06/08/2023

Import database MySQL lớn trên môi trường Docker
Mình sử dụng EasyPanel để quản lý các Docker và build môi trường app. Nay gặp tình huống phải import...

28/01/2023

Hướng dẫn cài đặt php extension mongodb trên Mac OS M1
Khi bạn muốn hỗ trợ MongoDB trên dòng Mac M1, phần cài đặt sẽ cần một chút lưu ý. Hướng...