Hướng dẫn Cài Đặt Imgproxy Trên Ubuntu để Tối Ưu Hình Ảnh

22/06/2025 P T P Server 5 phút đọc

Quảng cáo

728x90 Banner Advertisement

Thay thế bằng mã Google AdSense

Hướng dẫn cài đặt imgproxy để tối ưu hình ảnh trên Ubuntu

Mở bài

Trong thế giới internet ngày nay, hình ảnh đóng vai trò quan trọng trong việc truyền tải thông tin và cảm xúc. Tuy nhiên, việc lưu trữ và hiển thị hình ảnh lớn có thể gây ra vấn đề về tốc độ tải và hiệu suất. Để giải quyết vấn đề này, chúng ta có thể sử dụng imgproxy - một công cụ tuyệt vời để tối ưu hóa hình ảnh. Trong bài viết này, chúng ta sẽ hướng dẫn từng bước cài đặt và sử dụng imgproxy trên Ubuntu để tối ưu hình ảnh.

Nội dung chính

1. Cài đặt libvips

Để sử dụng imgproxy hiệu quả, chúng ta cần thư viện libvips. Trên Ubuntu, thư viện libvips được lưu trữ trong kho phần mềm cũ, do đó chúng ta cần thêm nguồn cung cấp phần mềm mới (PPA) để có thể cài đặt phiên bản mới hơn.

### Bước 1: Thêm PPA

sh sudo add-apt-repository ppa:dhor/myway

### Bước 2: Cập nhật kho phần mềm

sh sudo apt-get update

### Bước 3: Cài đặt libvips

sh sudo apt-get install libvips-dev

### 2. Cài đặt Go

Imgproxy được viết bằng ngôn ngữ Go. Vì vậy, chúng ta cần cài đặt Go trên hệ thống.

markdown

Bước 1: Cập nhật kho phần mềm

sudo apt-get update

Bước 2: Cài đặt Go

sudo apt-get install golang-go

3. Tải dự án imgproxy

Sau khi cài đặt xong libvips và Go, chúng ta có thể tải mã nguồn của imgproxy từ GitHub.

### Bước 1: Tải mã nguồn

sh go get github.com/imgproxy/imgproxy

### 4. Cấu hình và build dự án

Chúng ta cần cấu hình và build dự án imgproxy.

Quảng cáo

300x250 In-Content Advertisement

markdown

Bước 1: Cấu hình

PKG_CONFIG_PATH="$(brew --prefix libffi)/lib/pkgconfig" 
CGO_LDFLAGS_ALLOW="-s|-w" 
CGO_CFLAGS_ALLOW="-Xpreprocessor" 
go build -o /usr/local/bin/imgproxy

Bước 2: Chạy imgproxy

imgproxy -config /path/to/your/config.yaml

5. Cấu hình imgproxy

Imgproxy cần cấu hình để hoạt động hiệu quả. Chúng ta có thể tạo một file cấu hình config.yaml để tùy chỉnh các tùy chọn.

resize:
  format: PNG
  quality: 90
  max_height: 1024
  max_width: 1024
  fit_strategy: inside

insecure_urls:
  • backend_url

proxy_config: backend_url: http://your-backend-service.com

6. Sử dụng imgproxy với backend

Để sử dụng imgproxy, chúng ta cần một backend để lưu trữ hình ảnh gốc. Sau đó, imgproxy sẽ lấy hình ảnh từ backend và resize lại theo các tùy chọn được cấu hình.

Cách sử dụng

  • Load ảnh: Từ frontend, chúng ta có thể load ảnh tới imgproxy để resize.

### Ví dụ URL

http://imgproxy:8080/insecure/resize:fit:20:0:no:0/plain/http://backend:3000/images/myimage.png

- http://imgproxy:8080 là server resize ảnh.
  • http://backend:3000 là Object storage bucket (backend nơi lưu ảnh gốc).
  • Map URL: Chuyển URL từ frontend tới imgproxy để thực hiện resize.

  • Ví dụ

    ### Tạo proxy config

    yaml proxy_config: backend_url: http://your-backend-service.com

    createProxyConfig(): ... url_map: "/images/tiny/myimage.png": "http://imgproxy:8080/insecure/resize:fit:20:0:no:0/plain/http://backend:3000/images/myimage.png" ```

    Kết luận

    Cài đặt và sử dụng imgproxy để tối ưu hóa hình ảnh trên Ubuntu là một quy trình đơn giản và hiệu quả. Bằng cách thêm PPA để cập nhật libvips, cài đặt Go và build dự án imgproxy, chúng ta có thể tùy chỉnh và sử dụng công cụ này để đảm bảo hình ảnh được tải và hiển thị nhanh chóng. Hãy đảm bảo rằng bạn đã có một backend để lưu trữ hình ảnh gốc và cấu hình imgproxy đúng cách để đạt được hiệu suất tối đa.

    Điểm nhấn quan trọng

    • Cài đặt libvips: Sử dụng PPA để cập nhật libvips.
    • Cài đặt Go: Cài đặt Go để xây dựng dự án.
    • Tải và build dự án: Tải mã nguồn và build dự án imgproxy.
    • Cấu hình imgproxy: Tạo file cấu hình để tùy chỉnh các tùy chọn.
    • Sử dụng imgproxy với backend: Load ảnh tới imgproxy để thực hiện resize.

    Hy vọng thông tin trong bài viết này sẽ giúp bạn cài đặt và sử dụng imgproxy hiệu quả trên Ubuntu

    Quảng cáo

    728x90 Bottom Advertisement

    Thay thế bằng mã Google AdSense

    Chia sẻ bài viết

    Facebook Twitter

    Bình luận

    Chia sẻ ý kiến của bạn về bài viết này

    Viết bình luận

    Bình luận của bạn sẽ được kiểm duyệt trước khi hiển thị

    Chưa có bình luận nào

    Hãy là người đầu tiên bình luận về bài viết này!