Vite. npm run dev 시에 SharedArrayBuffer 사용

MDN 기준으로 SharedArrayBuffer는 secure context + cross-origin isolated 조건이 필요하고, 이를 위해 COOP/COEP 헤더가 필요합니다. (MDN 웹 문서)

Cross-Origin-Opener-Policy: same-origin
Cross-Origin-Embedder-Policy: require-corp

가장 간단한 설정은 이렇습니다.

npm i -D @vitejs/plugin-basic-ssl

vite.config.ts

import { defineConfig } from 'vite'
import basicSsl from '@vitejs/plugin-basic-ssl'

export default defineConfig({
  plugins: [
    basicSsl(),
  ],

  server: {
    headers: {
      'Cross-Origin-Opener-Policy': 'same-origin',
      'Cross-Origin-Embedder-Policy': 'require-corp',
    },
  },
})

그다음 기존처럼 실행하면 됩니다.

npm run dev

브라우저에서는 반드시 https://localhost:5173 같은 https 주소로 접속하세요. Vite의 server.https는 TLS/HTTP2를 켜는 dev-server 옵션이고, 기본 SSL 플러그인은 self-signed 인증서를 자동 생성해 줍니다. Vite 공식 문서도 basic setup으로 @vitejs/plugin-basic-ssl을 언급합니다. (vitejs)

확인은 브라우저 콘솔에서 이렇게 하면 됩니다.

window.crossOriginIsolated

true가 나와야 SharedArrayBuffer 사용 조건이 맞습니다.

new SharedArrayBuffer(1024)

주의할 점은 Cross-Origin-Embedder-Policy: require-corp를 켜면 외부 이미지, 폰트, wasm, worker, script 같은 cross-origin 리소스가 막힐 수 있습니다. 이 경우 해당 리소스 서버가 CORS/CORP 헤더를 제대로 주거나, 리소스를 같은 origin에서 제공해야 합니다. MDN도 require-corp에서는 cross-origin no-cors 리소스가 명시적으로 허용되어야 한다고 설명합니다. (MDN 웹 문서)