В статье мы опишем процедуру установки и настройки imgproxy в KaaS, а также расскажем, как этот сервис поможет ускорить работу сайта.
imgproxy: что это
imgproxy — это сервис для конвертации, обработки и масштабирования изображений в режиме «on the fly». Он написан на языке Golang и распространяется с открытым исходным кодом. Несмотря на то, что сервис не позволяет загрузить изображение в облако, его можно использовать для раздачи картинок.
Какие задачи поможет решить imgproxy:
- оптимизация изображений на сайте: сервис позволяет менять формат изображений, их размер и качество, что сказывается на итоговом объеме графики;
- ускорение загрузки изображений и, как следствие, ускоренная загрузка сайта.
Подготовка к установке imgproxy
В первую очередь вам необходимо создать кластер Kubernetes:
Как установить imgproxy в Kubernetes
Работа с Kubernetes требует установки определенных инструментов. Процедура их установки может отличаться в зависимости от ОС, установленной на вашем устройстве. В качестве примера мы рассмотрим установку на Ubuntu.
- 1 Подключитесь к кластеру Kubernetes.
-
2
Проверьте работу файла конфигурации. Для этого запросите количество нод:
kubectl get nodes
Вывод должен иметь следующий вид:
Затем запросите неймспейсы:
kubectl get namespaces
Вывод команды должен иметь следующий вид:
Устанавливаем imgproxy и ускоряем загрузку изображений с его помощью
После этого запросите перечень подов:
kubectl get pods -A
Вывод должен быть подобным:
Какой сервис поможет ускорить загрузку изображений на сайте
Если все ресурсы отобразились после запроса, значит настройка kubectl прошла успешно.
-
3
По необходимости установите helm с помощью команды:
snap install helm
-
4
Установите ingress-контроллер Nginx. Для этого поочередно добавьте строки и выполните команду целиком:
helm \ upgrade \ --install ingress-nginx ingress-nginx/ingress-nginx \ --namespace ingress-nginx \ --create-namespace \ --set controller.kind=DaemonSet
Проверьте, запущен ли контроллер:
kubectl get pods -n ingress-nginx
Вывод команды должен иметь следующий вид:
Как ускорить загрузку сайта с помощью imgproxy
-
6
Проверьте, создан ли балансировщик:
kubectl get svc -n ingress-nginx
Вывод будет иметь следующий вид:
-
7
Загрузите Custom Resource Definitions (или CRDs) — это потребуется для корректной работы cert-manager:
kubectl apply -f https://github.com/cert-manager/cert-manager/releases/download/v1.16.1/cert-manager.crds.yaml
-
8
Установите cert-manager. Для этого поочередно добавьте строки и выполните команду целиком:
helm \ upgrade \ --install cert-manager jetstack/cert-manager \ --namespace cert-manager \ --create-namespace \ --set crds.enabled=true
-
9
Создайте файл clusterissuer.yaml:
cat <<EOF > clusterissuer.yaml --- apiVersion: cert-manager.io/v1 kind: ClusterIssuer metadata: name: letsencrypt-prod spec: acme: # The ACME server URL server: https://acme-v02.api.letsencrypt.org/directory # Email address used for ACME registration email: user@example.com # Name of a secret used to store the ACME account private key privateKeySecretRef: name: letsencrypt-prod # Enable the HTTP-01 challenge provider solvers: - http01: ingress: ingressClassName: nginx EOF
Затем выполните команду:
kubectl apply -f clusterissuer.yaml
- 10 Привяжите к IP-адресу балансировщика доменное имя или поддомен. В качестве IP-адреса укажите значение из шага 6 (строка service/ingress-nginx-controller, столбец EXTERNAL-IP).
-
11
Создайте файл deployment.yaml:
cat <<EOF > deployment.yaml --- apiVersion: apps/v1 kind: Deployment metadata: name: imgproxy labels: app.kubernetes.io/name: imgproxy app.kubernetes.io/app: imgproxy spec: replicas: 1 strategy: type: RollingUpdate revisionHistoryLimit: 3 selector: matchLabels: app.kubernetes.io/name: imgproxy app.kubernetes.io/app: imgproxy template: metadata: labels: app.kubernetes.io/name: imgproxy app.kubernetes.io/app: imgproxy spec: affinity: podAntiAffinity: requiredDuringSchedulingIgnoredDuringExecution: - labelSelector: matchExpressions: - key: app.kubernetes.io/app operator: In values: - imgproxy topologyKey: "kubernetes.io/hostname" terminationGracePeriodSeconds: 30 automountServiceAccountToken: false containers: - name: imgproxy image: darthsim/imgproxy:latest imagePullPolicy: IfNotPresent env: # the maximum duration (in seconds) for processing the response. # Default: 10 - name: IMGPROXY_WRITE_TIMEOUT value: '30' # the maximum duration (in seconds) to wait for the next request # before closing the connection. When set to 0, keep-alive is # disabled. Default: 10 - name: IMGPROXY_KEEP_ALIVE_TIMEOUT value: '30' # the maximum duration (in seconds) to wait for the next request # before closing the HTTP client connection. The HTTP client is # used to download source images. When set to 0, keep-alive is # disabled. Default: 90 - name: IMGPROXY_CLIENT_KEEP_ALIVE_TIMEOUT value: '40' # the maximum duration (in seconds) for downloading the source # image. Default: 5 - name: IMGPROXY_DOWNLOAD_TIMEOUT value: '30' # when set to true, enables using the ETag HTTP header for HTTP # cache control. Default: false - name: IMGPROXY_USE_ETAG value: 'true' # when set to true, enables using the Last-Modified HTTP header # for HTTP cache control. Default: false - name: IMGPROXY_USE_LAST_MODIFIED value: 'true' # when set to true, imgproxy will add debug headers to the response. # Default: false. The following headers will be added: # # X-Origin-Content-Length: the size of the source image # X-Origin-Width: the width of the source image # X-Origin-Height: the height of the source image # X-Result-Width: the width of the resultant image # X-Result-Height: the height of the resultant image - name: IMGPROXY_ENABLE_DEBUG_HEADERS value: 'true' # the maximum resolution of the source image, in megapixels. # Images with larger actual size will be rejected. Default: 50 - name: IMGPROXY_MAX_SRC_RESOLUTION value: '70' # the maximum size of the source image, in bytes. Images with # larger file size will be rejected. When set to 0, file size # check is disabled. Default: 0 - name: IMGPROXY_MAX_SRC_FILE_SIZE value: '104857600' # the default quality of the resultant image, percentage. # Default: 80 - name: IMGPROXY_QUALITY value: '90' # default quality of the resulting image per format, separated # by commas. Example: jpeg=70,avif=40,webp=60. When a value for # the resulting format is not set, the IMGPROXY_QUALITY value is # used. Default: avif=65 - name: IMGPROXY_FORMAT_QUALITY value: 'jpeg=90' ports: - name: http containerPort: 8080 protocol: TCP resources: requests: cpu: 10m memory: 32Mi limits: memory: 1Gi securityContext: allowPrivilegeEscalation: false readOnlyRootFilesystem: true EOF
-
12
Создайте файл service.yaml:
cat <<EOF > service.yaml --- apiVersion: v1 kind: Service metadata: name: imgproxy labels: app.kubernetes.io/name: imgproxy app.kubernetes.io/app: imgproxy spec: ports: - name: http port: 8080 protocol: TCP targetPort: 8080 selector: app.kubernetes.io/name: imgproxy app.kubernetes.io/app: imgproxy type: ClusterIP EOF
-
13
Создайте файл ingress.yaml:
cat <<EOF > ingress.yaml --- apiVersion: networking.k8s.io/v1 kind: Ingress metadata: annotations: ingress.kubernetes.io/ssl-redirect: "true" nginx.ingress.kubernetes.io/ssl-redirect: "true" kubernetes.io/ingress.class: nginx kubernetes.io/tls-acme: "true" cert-manager.io/cluster-issuer: letsencrypt-prod nginx.ingress.kubernetes.io/proxy-read-timeout: "3600" nginx.ingress.kubernetes.io/proxy-send-timeout: "3600" nginx.ingress.kubernetes.io/client-body-buffer-size: 256m nginx.ingress.kubernetes.io/proxy-body-size: 256m labels: app.kubernetes.io/name: imgproxy app.kubernetes.io/app: imgproxy name: imgproxy spec: ingressClassName: nginx rules: - host: example.com http: paths: - backend: service: name: imgproxy port: number: 8080 path: / pathType: Prefix tls: - hosts: - example.com secretName: example.com EOF
Вместо example.com в ingress.yaml укажите ваше доменное имя.
-
14
Примените изменения:
kubectl apply -f deployment.yaml -f service.yaml -f ingress.yaml
-
15
Откройте браузер. В адресную строку вставьте ссылку:
https://example.com/unsafe/resize:fit:300:300/plain/https:%2F%2Fmars.nasa.gov%2Fsystem%2Fdownloadable_items%2F40368_PIA22228.jpg
Вместо example.com укажите ваш домен. Если установка прошла корректно, на экране вы увидите картинку с изображением спутника:
Оптимизация изображений для сайта: тестовая картинка
Готово, вы развернули imgproxy в Kubernetes.
Помогла ли вам статья?
Спасибо за оценку. Рады помочь 😊