일부 페이지에서 S3에 저장된 에셋을 사용하는 커스텀 이모지가 CDN을 사용하지 않음

제품 지원
1

최근 discourse 설치 환경을 CDN을 사용하도록 구성하고, 업로드 파일과 사이트 자산을 S3 호환 서비스에 저장하도록 설정했습니다. 지금까지는 다른 모든 기능이 정상적으로 작동했지만, 커스텀 이모지 이미지가 로드되지 않습니다.

HTML을 확인해 보니, 이모지 중 하나의 URL이 다음과 같이 표시되었습니다: //thrivecommunityforum.s3.eu-central-1.wasabisys.com/original/2X/6/6b7f95a2cfc7810d26c7e170ebf926ba8634261b.png
(파일 관리자에서 파일에 대한 공개 쓰기(public write)가 활성화되어 있다는 경고 메시지를 확인한 후, 버킷에 대한 공개 접근을 방지하기 위해 오버라이드를 설정했기 때문에 이 URL은 로드되지 않습니다.)

반면, 다른 모든 업로드된 이미지와 사이트 자산을 위해 설정한 CDN을 올바르게 참조하고 있습니다: https://thrivecommunity-uploads.b-cdn.net/original/2X/6/62f6697da0e3cd71a7d4f1eed518641f8428150b.jpeg

내장 이모지 URL은 다음과 같은 형태를 띱니다: https://thrivecommunity-cdn.b-cdn.net/images/emoji/twitter/thinking.png?v=9

따라서 제 결론은, 이미지 링크를 생성할 때 커스텀 이모지 처리에 버그가 있을 수 있다는 것입니다. 이 버그는 S3에 저장된 파일 앞에 배치하도록 구성된 CDN 사용을 건너뛰게 만듭니다.

관련된 주제를 찾아보았지만, 다음 항목만 발견했습니다: Custom Emoji does not use Amazon S3 이 주제는 오래된 것으로 보이며, 제 사이트에서는 discourse가 커스텀 이모지를 서빙하기 위해 S3를 사용하려고 시도하고 있기 때문입니다.

2

테스트용 사용자 정의 이모지

:facepalm:

:mdr:

표준 이모지

:slightly_smiling_face:

표준 이모지는 하나의 CDN을 사용하는 반면, 사용자 정의 이모지는 다른 CDN을 사용합니다. 하지만 오브젝트 스토리지 업로드 사용 (S3 클론) 문서를 정확히 따라 구성하면 두 경우 모두 CDN으로 처리됩니다.

이는 버그가 아니라, 표준 이모지는 앱 코드베이스 내부에 저장되는 반면 사용자 정의 이모지는 일반적인 사이트 업로드 파일로 취급되기 때문에 예상되는 동작입니다.

3

해당 스레드를 확인해 보았는데, 제가 볼 때 제 설정은 맞을 것 같습니다:

  DISCOURSE_CDN_URL: https://thrivecommunity-cdn.b-cdn.net
  DISCOURSE_USE_S3: true
  DISCOURSE_S3_REGION: eu-central-1
  DISCOURSE_S3_ENDPOINT: https://s3.eu-central-1.wasabisys.com
  DISCOURSE_S3_INSTALL_CORS_RULE: false
  DISCOURSE_S3_ACCESS_KEY_ID: aaaa
  DISCOURSE_S3_SECRET_ACCESS_KEY: aaaa
  DISCOURSE_S3_CDN_URL: https://thrivecommunity-uploads.b-cdn.net
  DISCOURSE_S3_BUCKET: thrivecommunityforum
  DISCOURSE_S3_BACKUP_BUCKET: thrivecommunityforum-backup
  DISCOURSE_BACKUP_LOCATION: s3
4

저도 비슷한 문제를 겪었습니다. S3로 마이그레이션할 때 원본 게시물에 다른 업로드 파일이 없으면 커스텀 이모지가 포함된 게시물이 rebake 대상으로 표시되지 않아, cooked 링크가 CDN을 가리키지 않는 문제가 있었거든요.

저는 커스텀 이모지 중 하나를 삭제하고 다시 업로드하는 방식으로 해결했습니다. 이 작업이 자동으로 모든 커스텀 이모지가 포함된 게시물을 다시 빌드하는 작업을 트리거했습니다(물론 커스텀 이모지가 포함된 게시물을 직접 rebake할 수 있는 rake 작업도 있다는 점에는 확신이 있습니다).

5

admin/customize/emojis에서도, 게시글 편집기 미리보기에서도, 그리고 지난 1시간 동안 작성된 게시글의 반박(반박 반응)에서도 실패하는 것을 확인했습니다.
즉, 이는 이모지를 사용하는 오래된 게시글에만 영향을 미치는 것이 아니라, 새로운 게시글과 UI의 일부(반박 반응 선택기도 관리자 이모지 관리 영역과 마찬가지로 잘못된 URL을 사용함)에도 영향을 미칩니다.

6

이 문제는 S3 CDN URL ignored when uploading into posts 와 관련이 있습니다. 원래 토픽에 추가했습니다.

이것은 서드파티 플러그인이므로 해당 플러그인 토픽에서 보고해 주세요.

이것은 유효한 문제이지만 관리자 전용 페이지이므로 영향도가 낮습니다.

7

그렇네요. 실제로 게시물을 작성하면 이모지가 올바르게 표시됩니다.

retort 플러그인의 수정 방식이 관리자 영역 수정 방식과 유사하다면, 제 discourse 인스턴스에서 커스텀 반응 이모지가 상당히 널리 사용되고 있으므로 플러그인 수정을 시도해 볼 수도 있을 것 같습니다.

8

간단히 살펴본 후 직접 수정해 보았습니다.
문제는 discourse의 JavaScript 메서드 buildEmojiUrl이 커스텀 이모지의 CDN URL 대신 스토리지 URL을 받는 것 같습니다. 이는 retort 플러그인도 사용하는 동일한 방식인 것 같습니다.
따라서 이를 수정하면 대부분의 문제가 해결되지 않을까 싶습니다.

간단히 살펴본 결과 커스텀 이모지 URL을 생성하는 부분을 발견하여 다음과 같이 변경했습니다:

rails console로 테스트해 본 결과 프로덕션 사이트의 URL이 수정되는 것 같습니다. 그래서 해당 변경 사항을 프로덕션에 배포해 보았지만 작동하지 않았습니다.
배포가 안 된 후 EMOJI_VERSION을 10으로 변경하여 업데이트를 시도해 보았지만 이것도 작동하지 않았습니다. launcher enter를 실행하고 git log를 확인하면 제 커밋이 보입니다. 다음 접근 방식을 따랐습니다: