설명서Commerce구성 안내서

원격 스토리지에 대한 이미지 크기 조정 구성

Last update: Mon Jul 15 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

작성 대상:

  • 경험
  • 관리자
  • 개발자

기본적으로 Adobe Commerce은 응용 프로그램 쪽에서 이미지 크기 조정을 지원합니다. 그러나 원격 스토리지 모듈을 활성화하면 Ngix 를 사용하여 이미지 크기 조정을 서버 측으로 오프로드할 수 있으므로 디스크 자원을 절약하고 디스크 사용을 최적화할 수 있습니다.

다음 다이어그램은 Nginx가 캐시에 이미지를 검색, 크기 조정 및 저장하는 방법을 보여 줍니다. 크기 조정은 높이 및 폭과 같이 URL에 포함된 매개 변수에 의해 결정됩니다.

이미지 크기 조정

TIP
클라우드 인프라 프로젝트의 Adobe Commerce에 대해서는 클라우드 인프라의 Commerce에 대한 원격 저장소 구성을 참조하십시오.

Adobe Commerce에서 URL 형식 구성

서버측에서 이미지 크기를 조정하려면 이미지의 높이, 너비 및 위치(URL)에 대한 인수를 제공하도록 Adobe Commerce을 구성해야 합니다.

서버측 이미지 크기 조정을 위해 Commerce을 구성하려면:

  1. 관리자 패널에서 Stores > Settings > Configuration > General > Web ​을(를) 클릭합니다.

  2. 오른쪽 창에서 Url options ​을(를) 확장합니다.

  3. 카탈로그 미디어 URL 형식 섹션에서 Use system value ​을(를) 지웁니다.

  4. 카탈로그 미디어 URL 형식 필드에서 Image optimization based on query parameters URL을 선택합니다.

  5. Save Config ​을(를) 클릭합니다.

  6. Nginx 구성을 계속합니다.

Nginx 구성

서버측 이미지 크기 조정을 계속 구성하려면 nginx.conf 파일을 준비하고 선택한 어댑터에 대해 proxy_pass 값을 제공해야 합니다.

Nginx에서 이미지 크기를 조정하려면:

  1. Nginx 이미지 필터 모듈을 설치하십시오.

    code language-shell 
    load_module /etc/nginx/modules/ngx_http_image_filter_module.so;

  2. 포함된 템플릿 nginx.conf.sample 파일을 기반으로 nginx.conf 파일을 만듭니다. For example:

    code language-conf 
    location ~* \.(jpg|jpeg|png|gif|webp)$ {
    set $width "-";
    set $height "-";
    if ($arg_width != '') {
        set $width $arg_width;
    }
    if ($arg_height != '') {
        set $height $arg_height;
    }
    image_filter resize $width $height;
    image_filter_jpeg_quality 90;
}

  3. [선택 사항] 특정 어댑터에 대해 proxy_pass 값을 구성합니다.

recommendation-more-help
386822bd-e32c-40a8-81c2-ed90ad1e198c