Composer 이미지 최적화 테스트

Don · 7월 17, 2021, 2:43오후

아, 알겠네요.. 제 화웨이는 이 작업을 하기에 너무 약한 것 같지만, 방금 아이폰으로 시도해 보니 리사이즈 기능도 잘 작동하네요. 정말 좋습니다! 감사합니다

fearlessfrog · 7월 19, 2021, 7:31오후

이 9MB 이미지는 여기서는 작동하지만, 2.8.0.beta3을 실행 중인 저희 사이트에서는 작동하지 않습니다 (Chrome Windows 데스크톱 91). 업로드 대상으로 선택할 때(드래그가 아니라 기기의 파일 선택기를 통해 선택한 경우) 오류나 사용자 메시지가 표시되지 않고, 업로드가 조용히 거부되는 것처럼 보입니다.

저희 파일 설정은 모두 기본값으로 되어 있는 것으로 생각됩니다(최대 이미지 크기 4096kb, 컴포저 미디어 최적화 이미지 활성화, S3 스토리지, Cloudfront CDN 등).

로그나 브라우저 콘솔 로그에서 아무것도 찾을 수 없습니다. 더 작은 파일들은 정상적으로 작동하고 리스케일링도 잘 됩니다.

이 문제를 더 진단하는 데 도움이 될 정보를 어디에서 찾아야 할까요?

Falco · 7월 19, 2021, 7:44오후

상세 로그(verbose logs)를 활성화해 보세요:

#ssh into the server

cd /var/discourse
./launcher enter app
rails c
SiteSetting.composer_media_optimization_debug_mode = true

그 다음 이미지를 다시 업로드하고, 실패한 후 브라우저 로그를 열어 보세요.

또한 원본 이미지를 공유해 주실 수 있나요?

fearlessfrog · 7월 19, 2021, 8:04오후

원본 파일은 여기 있습니다: 9.01 MB file on MEGA

rails 콘솔에서 SiteSetting.composer_media_optimization_debug_mode = true를 활성화했지만, 아직 Chrome 브라우저 로그에서 추가 출력 내용을 볼 수 없습니다. 다음은 Chrome 로그입니다.

콘솔에서 디버그 사이트 설정을 활성화한 후 기존 주제에 답글을 작성하는 경우.
작성기에서 ‘파일 업로드’ 위젯을 사용하여 9MB JPG 파일을 선택하는 경우.

Navigated to https://forums.mudspike.com/t/fyi-discourse-forum-software-update-thread/11937/51
64fdc2109944d83fbd7a700960b4b25bb93228af.js?__ws=forums.mudspike.com:2 Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "script-src https://forums.mudspike.com/logs/ https://forums.mudspike.com/sidekiq/ https://forums.mudspike.com/mini-profiler-resources/ https://forums.mudspike.com/assets/ https://forums.mudspike.com/brotli_asset/ https://forums.mudspike.com/extra-locales/ https://forums.mudspike.com/highlight-js/ https://forums.mudspike.com/javascripts/ https://forums.mudspike.com/plugins/ https://forums.mudspike.com/theme-javascripts/ https://forums.mudspike.com/svg-sprite/ https://www.google-analytics.com/analytics.js".

(anonymous) @ 64fdc2109944d83fbd7a700960b4b25bb93228af.js?__ws=forums.mudspike.com:2
51:1 Refused to load the script 'https://static.cloudflareinsights.com/beacon.min.js' because it violates the following Content Security Policy directive: "script-src https://forums.mudspike.com/logs/ https://forums.mudspike.com/sidekiq/ https://forums.mudspike.com/mini-profiler-resources/ https://forums.mudspike.com/assets/ https://forums.mudspike.com/brotli_asset/ https://forums.mudspike.com/extra-locales/ https://forums.mudspike.com/highlight-js/ https://forums.mudspike.com/javascripts/ https://forums.mudspike.com/plugins/ https://forums.mudspike.com/theme-javascripts/ https://forums.mudspike.com/svg-sprite/ https://www.google-analytics.com/analytics.js". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

application-82efa29739b1af3218502dce3f278a83b96bd1c738954f44a36624a240f8a9b0.js:1 Deprecation notice: Import the User class instead of using User (deprecated since Discourse 2.4.0) (removal in Discourse 2.6.0)
e.default @ application-82efa29739b1af3218502dce3f278a83b96bd1c738954f44a36624a240f8a9b0.js:1
get @ application-82efa29739b1af3218502dce3f278a83b96bd1c738954f44a36624a240f8a9b0.js:1
(anonymous) @ 39ea5db47cef6f4231b07f808d8907fea1fd31fa.js?__ws=forums.mudspike.com:1
e.withPluginApi @ application-82efa29739b1af3218502dce3f278a83b96bd1c738954f44a36624a240f8a9b0.js:1
initialize @ 39ea5db47cef6f4231b07f808d8907fea1fd31fa.js?__ws=forums.mudspike.com:1
i.initialize @ application-82efa29739b1af3218502dce3f278a83b96bd1c738954f44a36624a240f8a9b0.js:1
(anonymous) @ vendor-9297d3b5d396b76cde3e1a19c960cf10c5edf8be99b1f5aeff21012e3ae57a34.js:30
e.each @ vendor-9297d3b5d396b76cde3e1a19c960cf10c5edf8be99b1f5aeff21012e3ae57a34.js:30
e.walk @ vendor-9297d3b5d396b76cde3e1a19c960cf10c5edf8be99b1f5aeff21012e3ae57a34.js:30
e.each @ vendor-9297d3b5d396b76cde3e1a19c960cf10c5edf8be99b1f5aeff21012e3ae57a34.js:30
e.topsort @ vendor-9297d3b5d396b76cde3e1a19c960cf10c5edf8be99b1f5aeff21012e3ae57a34.js:30
_runInitializer @ vendor-9297d3b5d396b76cde3e1a19c960cf10c5edf8be99b1f5aeff21012e3ae57a34.js:30
runInstanceInitializers @ vendor-9297d3b5d396b76cde3e1a19c960cf10c5edf8be99b1f5aeff21012e3ae57a34.js:30
_bootSync @ vendor-9297d3b5d396b76cde3e1a19c960cf10c5edf8be99b1f5aeff21012e3ae57a34.js:30
didBecomeReady @ vendor-9297d3b5d396b76cde3e1a19c960cf10c5edf8be99b1f5aeff21012e3ae57a34.js:30
t.invoke @ vendor-9297d3b5d396b76cde3e1a19c960cf10c5edf8be99b1f5aeff21012e3ae57a34.js:30
t.flush @ vendor-9297d3b5d396b76cde3e1a19c960cf10c5edf8be99b1f5aeff21012e3ae57a34.js:30
t.flush @ vendor-9297d3b5d396b76cde3e1a19c960cf10c5edf8be99b1f5aeff21012e3ae57a34.js:30
n._end @ vendor-9297d3b5d396b76cde3e1a19c960cf10c5edf8be99b1f5aeff21012e3ae57a34.js:30
n.end @ vendor-9297d3b5d396b76cde3e1a19c960cf10c5edf8be99b1f5aeff21012e3ae57a34.js:30
n._run @ vendor-9297d3b5d396b76cde3e1a19c960cf10c5edf8be99b1f5aeff21012e3ae57a34.js:30
n._join @ vendor-9297d3b5d396b76cde3e1a19c960cf10c5edf8be99b1f5aeff21012e3ae57a34.js:30
n.join @ vendor-9297d3b5d396b76cde3e1a19c960cf10c5edf8be99b1f5aeff21012e3ae57a34.js:30
d @ vendor-9297d3b5d396b76cde3e1a19c960cf10c5edf8be99b1f5aeff21012e3ae57a34.js:30
(anonymous) @ vendor-9297d3b5d396b76cde3e1a19c960cf10c5edf8be99b1f5aeff21012e3ae57a34.js:30
l @ vendor-9297d3b5d396b76cde3e1a19c960cf10c5edf8be99b1f5aeff21012e3ae57a34.js:22
c @ vendor-9297d3b5d396b76cde3e1a19c960cf10c5edf8be99b1f5aeff21012e3ae57a34.js:22
setTimeout (async)
(anonymous) @ vendor-9297d3b5d396b76cde3e1a19c960cf10c5edf8be99b1f5aeff21012e3ae57a34.js:22
u @ vendor-9297d3b5d396b76cde3e1a19c960cf10c5edf8be99b1f5aeff21012e3ae57a34.js:22
fireWith @ vendor-9297d3b5d396b76cde3e1a19c960cf10c5edf8be99b1f5aeff21012e3ae57a34.js:22
fire @ vendor-9297d3b5d396b76cde3e1a19c960cf10c5edf8be99b1f5aeff21012e3ae57a34.js:22
u @ vendor-9297d3b5d396b76cde3e1a19c960cf10c5edf8be99b1f5aeff21012e3ae57a34.js:22
fireWith @ vendor-9297d3b5d396b76cde3e1a19c960cf10c5edf8be99b1f5aeff21012e3ae57a34.js:22
ready @ vendor-9297d3b5d396b76cde3e1a19c960cf10c5edf8be99b1f5aeff21012e3ae57a34.js:22
B @ vendor-9297d3b5d396b76cde3e1a19c960cf10c5edf8be99b1f5aeff21012e3ae57a34.js:22
vendor-9297d3b5d396b76cde3e1a19c960cf10c5edf8be99b1f5aeff21012e3ae57a34.js:22 [Violation] Added non-passive event listener to a scroll-blocking 'touchstart' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952
add @ vendor-9297d3b5d396b76cde3e1a19c960cf10c5edf8be99b1f5aeff21012e3ae57a34.js:22
(anonymous) @ vendor-9297d3b5d396b76cde3e1a19c960cf10c5edf8be99b1f5aeff21012e3ae57a34.js:22
each @ vendor-9297d3b5d396b76cde3e1a19c960cf10c5edf8be99b1f5aeff21012e3ae57a34.js:13
each @ vendor-9297d3b5d396b76cde3e1a19c960cf10c5edf8be99b1f5aeff21012e3ae57a34.js:13
Se @ vendor-9297d3b5d396b76cde3e1a19c960cf10c5edf8be99b1f5aeff21012e3ae57a34.js:22
on @ vendor-9297d3b5d396b76cde3e1a19c960cf10c5edf8be99b1f5aeff21012e3ae57a34.js:22
setupHandler @ vendor-9297d3b5d396b76cde3e1a19c960cf10c5edf8be99b1f5aeff21012e3ae57a34.js:30
setup @ vendor-9297d3b5d396b76cde3e1a19c960cf10c5edf8be99b1f5aeff21012e3ae57a34.js:30
setupEventDispatcher @ vendor-9297d3b5d396b76cde3e1a19c960cf10c5edf8be99b1f5aeff21012e3ae57a34.js:30
_bootSync @ vendor-9297d3b5d396b76cde3e1a19c960cf10c5edf8be99b1f5aeff21012e3ae57a34.js:30
didBecomeReady @ vendor-9297d3b5d396b76cde3e1a19c960cf10c5edf8be99b1f5aeff21012e3ae57a34.js:30
t.invoke @ vendor-9297d3b5d396b76cde3e1a19c960cf10c5edf8be99b1f5aeff21012e3ae57a34.js:30
t.flush @ vendor-9297d3b5d396b76cde3e1a19c960cf10c5edf8be99b1f5aeff21012e3ae57a34.js:30
t.flush @ vendor-9297d3b5d396b76cde3e1a19c960cf10c5edf8be99b1f5aeff21012e3ae57a34.js:30
n._end @ vendor-9297d3b5d396b76cde3e1a19c960cf10c5edf8be99b1f5aeff21012e3ae57a34.js:30
n.end @ vendor-9297d3b5d396b76cde3e1a19c960cf10c5edf8be99b1f5aeff21012e3ae57a34.js:30
n._run @ vendor-9297d3b5d396b76cde3e1a19c960cf10c5edf8be99b1f5aeff21012e3ae57a34.js:30
n._join @ vendor-9297d3b5d396b76cde3e1a19c960cf10c5edf8be99b1f5aeff21012e3ae57a34.js:30
n.join @ vendor-9297d3b5d396b76cde3e1a19c960cf10c5edf8be99b1f5aeff21012e3ae57a34.js:30
d @ vendor-9297d3b5d396b76cde3e1a19c960cf10c5edf8be99b1f5aeff21012e3ae57a34.js:30
(anonymous) @ vendor-9297d3b5d396b76cde3e1a19c960cf10c5edf8be99b1f5aeff21012e3ae57a34.js:30
l @ vendor-9297d3b5d396b76cde3e1a19c960cf10c5edf8be99b1f5aeff21012e3ae57a34.js:22
c @ vendor-9297d3b5d396b76cde3e1a19c960cf10c5edf8be99b1f5aeff21012e3ae57a34.js:22
vendor-9297d3b5d396b76cde3e1a19c960cf10c5edf8be99b1f5aeff21012e3ae57a34.js:22 [Violation] Added non-passive event listener to a scroll-blocking 'touchstart' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952
add @ vendor-9297d3b5d396b76cde3e1a19c960cf10c5edf8be99b1f5aeff21012e3ae57a34.js:22
(anonymous) @ vendor-9297d3b5d396b76cde3e1a19c960cf10c5edf8be99b1f5aeff21012e3ae57a34.js:22
each @ vendor-9297d3b5d396b76cde3e1a19c960cf10c5edf8be99b1f5aeff21012e3ae57a34.js:13
each @ vendor-9297d3b5d396b76cde3e1a19c960cf10c5edf8be99b1f5aeff21012e3ae57a34.js:13
Se @ vendor-9297d3b5d396b76cde3e1a19c960cf10c5edf8be99b1f5aeff21012e3ae57a34.js:22
on @ vendor-9297d3b5d396b76cde3e1a19c960cf10c5edf8be99b1f5aeff21012e3ae57a34.js:22
setupComposerResizeEvents @ application-82efa29739b1af3218502dce3f278a83b96bd1c738954f44a36624a240f8a9b0.js:1
didInsertElement @ application-82efa29739b1af3218502dce3f278a83b96bd1c738954f44a36624a240f8a9b0.js:1
n @ vendor-9297d3b5d396b76cde3e1a19c960cf10c5edf8be99b1f5aeff21012e3ae57a34.js:30
trigger @ vendor-9297d3b5d396b76cde3e1a19c960cf10c5edf8be99b1f5aeff21012e3ae57a34.js:30
n @ vendor-9297d3b5d396b76cde3e1a19c960cf10c5edf8be99b1f5aeff21012e3ae57a34.js:30
o.didCreate @ vendor-9297d3b5d396b76cde3e1a19c960cf10c5edf8be99b1f5aeff21012e3ae57a34.js:30
t.commit @ vendor-9297d3b5d396b76cde3e1a19c960cf10c5edf8be99b1f5aeff21012e3ae57a34.js:30
n.commit @ vendor-9297d3b5d396b76cde3e1a19c960cf10c5edf8be99b1f5aeff21012e3ae57a34.js:30
o.commit @ vendor-9297d3b5d396b76cde3e1a19c960cf10c5edf8be99b1f5aeff21012e3ae57a34.js:30
t._renderRoots @ vendor-9297d3b5d396b76cde3e1a19c960cf10c5edf8be99b1f5aeff21012e3ae57a34.js:30
t._renderRootsTransaction @ vendor-9297d3b5d396b76cde3e1a19c960cf10c5edf8be99b1f5aeff21012e3ae57a34.js:30
t._renderRoot @ vendor-9297d3b5d396b76cde3e1a19c960cf10c5edf8be99b1f5aeff21012e3ae57a34.js:30
t._appendDefinition @ vendor-9297d3b5d396b76cde3e1a19c960cf10c5edf8be99b1f5aeff21012e3ae57a34.js:30
t.appendOutletView @ vendor-9297d3b5d396b76cde3e1a19c960cf10c5edf8be99b1f5aeff21012e3ae57a34.js:30
t.invoke @ vendor-9297d3b5d396b76cde3e1a19c960cf10c5edf8be99b1f5aeff21012e3ae57a34.js:30
t.flush @ vendor-9297d3b5d396b76cde3e1a19c960cf10c5edf8be99b1f5aeff21012e3ae57a34.js:30
t.flush @ vendor-9297d3b5d396b76cde3e1a19c960cf10c5edf8be99b1f5aeff21012e3ae57a34.js:30
n._end @ vendor-9297d3b5d396b76cde3e1a19c960cf10c5edf8be99b1f5aeff21012e3ae57a34.js:30
n.end @ vendor-9297d3b5d396b76cde3e1a19c960cf10c5edf8be99b1f5aeff21012e3ae57a34.js:30
n._run @ vendor-9297d3b5d396b76cde3e1a19c960cf10c5edf8be99b1f5aeff21012e3ae57a34.js:30
n._join @ vendor-9297d3b5d396b76cde3e1a19c960cf10c5edf8be99b1f5aeff21012e3ae57a34.js:30
n.join @ vendor-9297d3b5d396b76cde3e1a19c960cf10c5edf8be99b1f5aeff21012e3ae57a34.js:30
d @ vendor-9297d3b5d396b76cde3e1a19c960cf10c5edf8be99b1f5aeff21012e3ae57a34.js:30
(anonymous) @ vendor-9297d3b5d396b76cde3e1a19c960cf10c5edf8be99b1f5aeff21012e3ae57a34.js:30
l @ vendor-9297d3b5d396b76cde3e1a19c960cf10c5edf8be99b1f5aeff21012e3ae57a34.js:22
c @ vendor-9297d3b5d396b76cde3e1a19c960cf10c5edf8be99b1f5aeff21012e3ae57a34.js:22
Show 2 more frames
vendor-9297d3b5d396b76cde3e1a19c960cf10c5edf8be99b1f5aeff21012e3ae57a34.js:22 [Violation] 'setTimeout' handler took 373ms

https://forums.mudspike.com/logs/ 는 비어 있으며, 즉 새로운 항목이 없습니다.

Falco · 7월 19, 2021, 8:18오후

사이트에 두 가지 문제가 있습니다.

사이트가 Cloudflare의 전체 사이트 프록시(Full Site Proxy) 뒤에 있습니다. DNS 설정으로 들어가서 오렌지 클라우드를 회색으로 변경하면 이 기능을 비활성화할 수 있습니다. Cloudflare의 변환(Transformation) 뒤에 있으면 Discourse가 무작위로 깨지는 것으로 알려져 있습니다.
사이트가 HTTPS로 구성되지 않았습니다. 1번 문제 때문에 이 문제를 이전에는 발견하지 못했습니다. 요즘 모든 새로운 브라우저 API는 HTTPS 전용이며, 모든 공개 사이트는 HTTPS를 사용해야 합니다. HTTPS를 적절히 설정한 뒤 다시 Rails 콘솔에 들어가서 SiteSetting.force_https = true를 실행해야 합니다.

fearlessfrog · 7월 19, 2021, 8:26오후

‘문제가 있다’는 표현은 좀 강한 말인 것 같고, 의도적으로 특이하게 설정한 것에 가깝습니다 이제 Cloudflare와 호환되지 않는다는 것이 확실하다면 이 새로운 기능을 비활성화하겠습니다. 우리는 Brotli나 Rocket Loader를 사용하지 않습니다.

Cloudflare는 S3/CloudFront에 대한 와일드카드 처리와 HTTPS 리디렉션용 페이지 규칙을 위해 사용하고 있으며, 이는 의도적으로 설정한 것입니다. 이를 통해 자체 호스팅 비용을 일부 절감할 수 있습니다 - S3 upload bucket, cdn url and bucket name in CNAME - #7 by fearlessfrog

Falco · 7월 19, 2021, 8:32오후

주요 문제는 사이트가 HTTPS로 사용 가능한 경우 SiteSetting.force_https가 true여야 한다는 점입니다. 이렇게 설정해 보실 수 있을까요?

이 설정은 Discourse 포럼 링크를 생성할 때 사용합니다. 이 설정이 없으면 이메일 내 링크가 기본적으로 HTTP로 표시됩니다:

fearlessfrog · 7월 19, 2021, 8:40오후

네, 그렇게 하면 되는 것 같습니다. 감사합니다!

Cloudflare 쪽의 ‘Flexible’ SSL이 보안 측면에서 사실상 열려 있는 상태였기 때문에, 어떤 요청이 들어와도 페이지 규칙을 통해 HTTPS로 리다이렉트되던 상황이어서 이 부분을 오랫동안 방치해 두었습니다. 어떤 영향이 있을지 확신이 서지 않았거든요. .mudspike.com 도메인 아래에 이 CF 설정이 필요한 다른 사이트들이 있어서, 불쌍한 포럼이 이런 잘못된 설정 상태로 꽤 오랫동안 방치되어 있었습니다.

업로드할 때 브라우저 로그에 아래 메시지가 표시되긴 하지만, 이미지는 클라이언트 측 압축/리사이즈가 잘 이루어지기 때문에, 이는 아마도 mozjpeg 인코딩 과정의 일부로 유효한 폴백(fallback)일 수 있습니다.

mozjpeg_enc.js:1 wasm streaming compile failed: TypeError: Failed to execute 'compile' on 'WebAssembly': Incorrect response MIME type. Expected 'application/wasm'.
(anonymous) @ mozjpeg_enc.js:1
Promise.then (async)
(anonymous) @ mozjpeg_enc.js:1
Promise.then (async)
instantiateAsync @ mozjpeg_enc.js:1
createWasm @ mozjpeg_enc.js:1
(anonymous) @ mozjpeg_enc.js:1
loadLibs @ media-optimization-worker.js:12
optimize @ media-optimization-worker.js:6
onmessage @ media-optimization-worker.js:11
mozjpeg_enc.js:1 falling back to ArrayBuffer instantiation
(anonymous) @ mozjpeg_enc.js:1
Promise.then (async)
(anonymous) @ mozjpeg_enc.js:1
Promise.then (async)
instantiateAsync @ mozjpeg_enc.js:1
createWasm @ mozjpeg_enc.js:1
(anonymous) @ mozjpeg_enc.js:1
loadLibs @ media-optimization-worker.js:12
optimize @ media-optimization-worker.js:6
onmessage @ media-optimization-worker.js:11
squoosh_resize.js:9 `WebAssembly.instantiateStreaming` failed because your server does not serve wasm with `application/wasm` MIME type. Falling back to `WebAssembly.instantiate` which is slower. Original error:
 TypeError: Failed to execute 'compile' on 'WebAssembly': Incorrect response MIME type. Expected 'application/wasm'.
load @ squoosh_resize.js:9
async function (async)
load @ squoosh_resize.js:9
init @ squoosh_resize.js:14
async function (async)
init @ squoosh_resize.js:14
loadLibs @ media-optimization-worker.js:12
async function (async)
loadLibs @ media-optimization-worker.js:12
optimize @ media-optimization-worker.js:6
onmessage @ media-optimization-worker.js:11

도와주셔서 감사합니다.

Falco · 7월 19, 2021, 8:41오후

이 문제는 얼마 전 저희 nginx에서 수정되었습니다. 마지막으로 언제 재빌드했나요? 재빌드를 시도해 볼 수 있을까요?

fearlessfrog · 7월 19, 2021, 8:42오후

오늘 아침에 재빌드했습니다 - 여기 있습니다: Commits · discourse/discourse · GitHub

수정: 사실 오늘 아침에 웹UI를 통해 업그레이드하고 docker 매니저 업그레이드를 수행했습니다 - 하지만 ssh로 접속해서 재빌드하고 결과를 보고하겠습니다.

fearlessfrog · 7월 19, 2021, 8:52오후

네, 최신 이미지가 그 문제를 해결했어요. 감사합니다.

Faizan_Zahid · 8월 1, 2021, 10:56오전

팀원 여러분, 정말 큰 개선이네요.

Falco · 9월 10, 2021, 5:38오후

이 기능을 테스트하기 위해 실제 카메라(Canon EOS Rebel SL3)를 구매했으니, 한번 시도해 보겠습니다:

6.1MB에서 140KB로 줄었습니다

글		댓글	조회수
Faster (and smaller) uploads in Discourse with Rust, WebAssembly and MozJPEG \| Blog Blog	35	5739	5월 13, 2025
Optimize images before uploading? Feature	56	43899	4월 22, 2021
Optional image optimization before upload Feature rfc	6	2885	6월 23, 2021
Image upload stuck with "Processing" message Product Support	10	1941	10월 15, 2021
Issue with iOS 16.7 photo upload? Bug uploads , ios	31	730	8월 20, 2026

Composer 이미지 최적화 테스트

Related topics