이 페이지는 Cloud Translation API를 통해 번역되었습니다.

원본 비공개 파일 시스템에서 지원하는 브라우저에 있는 SQLite Wasm

SQLite를 사용하여 웹에서 필요한 모든 저장소를 효율적으로 처리하세요.

Thomas Steiner

SQLite 정보

SQLite는 널리 사용되는 오픈소스, 경량, 삽입된 관계형 데이터베이스 관리 시스템입니다. 많은 개발자가 BigQuery를 사용하여 구조화되고 사용하기 쉬운 방식으로 만들 수 있습니다 크기가 작고 메모리가 부족하기 때문에 SQLite는 모바일 장치에서 데이터베이스 엔진으로 활용되는 경우가 많으며, 웹 브라우저 등 다양한 지원 도구를 사용할 수 있습니다.

SQLite의 주요 특징 중 하나는 서버리스 데이터베이스이며 즉, 작동하는 데 별도의 서버 프로세스가 필요하지 않습니다. 대신 데이터베이스가 사용자 기기의 단일 파일에 저장되어 쉽게 통합할 수 있습니다

웹 어셈블리 기반 SQLite

Web Assembly (Wasm)를 기반으로 하는 비공식 SQLite 버전이 많이 있습니다. 웹 브라우저(예: sql.js 이 sqlite3 WASM/JS 하위 프로젝트는 공식적으로 라이브러리의 Wasm 빌드를 만드는 SQLite 프로젝트 지원되는 SQLite 결과물 제품군의 기존 구성원입니다. 콘크리트 이 프로젝트의 목표는 다음과 같습니다.

다음과 같이 C API에 가까운 저수준 sqlite3 API를 바인딩하면 약관을 참고하세요.
더 높은 수준의 객체 지향 API로, sql.js 및 Node.js 스타일 구현 하위 수준 API와 직접 통신합니다 이 API는 동일한 스레드를 하위 수준 API로 사용합니다.
작업자 메시지를 통해 이전 API와 대화하는 작업자 기반 API입니다. 이 하위 수준 API와 함께 기본 스레드에서 사용하기 위한 것입니다. 작업자 스레드에 설치되고 작업자 메시지를 통해 작업자와 대화할 수 있습니다.
Worker API의 프로미스 기반 변형으로 사용자의 스레드 간 커뮤니케이션 측면에 관해 이야기할 수 있습니다.
사용 가능한 JavaScript API를 사용하는 영구 클라이언트 측 저장소 지원 원본 비공개 파일 시스템 (OPFS)도 포함됩니다.

원본 비공개 파일 시스템 지속성 백엔드와 함께 SQLite Wasm 사용

npm에서 라이브러리 설치

설치 @sqlite.org/sqlite-wasm 패키지를 설치해야 합니다.

npm install @sqlite.org/sqlite-wasm

원본 비공개 파일 시스템

원본 비공개 파일 시스템 (OPFS, File System Access API)은 데이터에 대한 고성능 액세스를 제공하는 특수 표면입니다. 새로운 표시 경로 기존 API에 대한 인플레이스 및 배타적 쓰기 액세스를 제공하여 기존 API와 할 수 있습니다. 이러한 변화는 Ad Exchange에서 동기 변형의 가용성과 플러시되지 않은 수정 사항이 생산성을 크게 개선하며 새로운 사용의 기회를 확보합니다. 있습니다.

아시다시피 프로젝트 목표의 마지막 지점인 영구 클라이언트 측 저장소를 사용할 수 있으며, 데이터베이스 파일에 데이터를 유지하는 것과 관련하여 엄격한 성능 요구사항이 적용됩니다. 이 지점에서 Origin Private File System, 특히 createSyncAccessHandle() 드림 메서드 FileSystemFileHandle 중요한 역할을 합니다 이 메서드는 FileSystemSyncAccessHandle 드림 객체를 정의합니다. 이 이 메서드의 동기식 특성은 성능상의 이점을 제공하지만 내부에서만 사용할 수 있으며 웹 작업자 원본 비공개 파일 시스템 내의 모든 파일에 포함되므로 기본 스레드를 차단할 수 없습니다.

필수 헤더 설정

다운로드한 SQLite Wasm 보관 파일에는 여러 파일 중에서 sqlite3.js가 포함되어 있습니다. sqlite3 WASM/JS 빌드를 구성하는 sqlite3.wasm 파일. jswasm 핵심 sqlite3 결과물과 최상위 디렉터리가 있는 디렉터리에 있습니다. 여기에는 데모 및 테스트 앱이 포함됩니다. 브라우저에서 Wasm 파일을 제공하지 않음 file:// URL이므로 이를 사용하여 빌드하는 모든 앱에는 웹 서버가 필요하며 는 파일:

Cross-Origin-Opener-Policy 드림 로 설정 same-origin 지시어, 동일한 출처 문서로만 탐색 컨텍스트를 격리합니다. 교차 출처 문서는 동일한 탐색 컨텍스트에서 로드되지 않습니다.
Cross-Origin-Embedder-Policy 드림 로 설정 require-corp 지시어, 그래야 문서가 동일한 원본의 리소스 또는 명시적으로 다른 출처에서 로드 가능한 것으로 표시됩니다.

이러한 헤더의 이유는 SQLite Wasm이 SharedArrayBuffer님, 이러한 헤더 설정은 보안 요구사항.

DevTools로 트래픽을 검사하면 있습니다.

위에서 언급한 두 헤더인 Cross-Origin-Embedder-Policy와 Cross-Origin-Opener-Policy가 Chrome DevTools에 강조 표시되어 있습니다.

속도 테스트

SQLite팀은 WebAssembly 구현에 관한 몇 가지 벤치마크를 실행했습니다. 웹 SQL과 비교했을 때 비용이 더 높습니다 이러한 벤치마크는 SQLite Wasm이 일반적으로 웹 SQL만큼 빠릅니다 때로는 조금 느리거나 조금 더 빠릅니다 자세한 내용은 결과 페이지로 이동합니다.

시작하기 코드 샘플

앞서 언급했듯이 원본 비공개 파일 시스템의 SQLite Wasm 작업자 컨텍스트에서 실행되어야 합니다. 좋은 소식은 라이브러리가 이 모든 것을 자동으로 처리하므로 사용자는 기본 스레드에서 바로 실행되어야 합니다.

import { sqlite3Worker1Promiser } from '@sqlite.org/sqlite-wasm';

(async () => {
  try {
    console.log('Loading and initializing SQLite3 module...');

    const promiser = await new Promise((resolve) => {
      const _promiser = sqlite3Worker1Promiser({
        onready: () => {
          resolve(_promiser);
        },
      });
    });

    console.log('Done initializing. Running demo...');

    let response;

    response = await promiser('config-get', {});
    console.log('Running SQLite3 version', response.result.version.libVersion);

    response = await promiser('open', {
      filename: 'file:worker-promiser.sqlite3?vfs=opfs',
    });
    const { dbId } = response;
    console.log(
      'OPFS is available, created persisted database at',
      response.result.filename.replace(/^file:(.*?)\?vfs=opfs$/, '$1'),
    );

    await promiser('exec', { dbId, sql: 'CREATE TABLE IF NOT EXISTS t(a,b)' });
    console.log('Creating a table...');

    console.log('Insert some data using exec()...');
    for (let i = 20; i <= 25; ++i) {
      await promiser('exec', {
        dbId,
        sql: 'INSERT INTO t(a,b) VALUES (?,?)',
        bind: [i, i * 2],
      });
    }

    console.log('Query data with exec()');
    await promiser('exec', {
      dbId,
      sql: 'SELECT a FROM t ORDER BY a LIMIT 3',
      callback: (result) => {
        if (!result.row) {
          return;
        }
        console.log(result.row);
      },
    });

    await promiser('close', { dbId });
  } catch (err) {
    if (!(err instanceof Error)) {
      err = new Error(err.result.message);
    }
    console.error(err.name, err.message);
  }
})();

데모

데모에서 위의 코드를 실제로 확인하세요. 자세한 내용은 소스 코드 자세히 알아보세요. 아래 삽입된 버전은 OPFS 백엔드를 사용하지 않으므로 Cloud Shell에서 데모를 열면 별도의 탭을 유지합니다.

원본 비공개 파일 시스템 디버깅

SQLite Wasm의 원본 비공개 파일 시스템 출력을 디버그하려면 다음을 사용하세요. OPFS 탐색기 Chrome 확장 프로그램입니다.

Chrome 웹 스토어의 OPFS 탐색기

확장 프로그램을 설치한 후 Chrome DevTools를 열고 OPFS Explorer 탭을 열면 SQLite Wasm이 작성하는 내용을 검사할 수 있습니다. 원본 비공개 파일 시스템

데모 앱의 Origin Private File System 구조를 보여주는 OPFS Explorer Chrome 확장 프로그램

DevTools의 OPFS Explorer 창에서 파일을 클릭하면 로컬 디스크에 저장할 수 있습니다. 그런 다음 SQLite 뷰어로 데이터베이스를 검사하므로 다음 작업을 할 수 있습니다. SQLite Wasm이 실제로 약속한 대로 작동한다고 안심해도 됩니다.

SQLite Wasm 데모에서 데이터베이스 파일을 여는 데 사용되는 SQLite 뷰어 앱입니다.

도움말 확인 및 의견 제공

SQLite Wasm은 SQLite 커뮤니티에서 개발하고 유지관리합니다. 도움말 확인 및 Google 지원 포럼에 질문을 올려보세요. 전체 문서는 SQLite 사이트에서 확인할 수 있습니다.

감사의 말씀

히어로 이미지: Tobias Fischer 스플래시 해제.