컨텐츠로 이동

Astro에서 Bun 사용하기

Bun은 올인원 JavaScript 런타임 및 툴킷입니다. 더 많은 내용은 Bun 공식 문서를 참고하세요.

  • Bun이 로컬 환경에 설치되어 있어야 합니다. Bun 공식 문서의 설치하기를 참고하세요.

Bun으로 새로운 Astro 프로젝트 생성

섹션 제목: Bun으로 새로운 Astro 프로젝트 생성

다음과 같이 create-astro 명령어를 사용하여 Bun이 포함된 새 Astro 프로젝트를 생성하세요.

Terminal window
bunx create-astro@latest my-astro-project-using-bun

bunx create-astro 명령어로 프로젝트를 시작하는 경우, CLI는 Bun을 사용해 자동으로 종속성을 설치하므로 이 단계를 건너뛸 수 있습니다.

그렇지 않은 경우 Bun을 사용하여 종속성을 설치해야 합니다.

Terminal window
bun install

Bun은 bun-types 패키지를 제공하며, 이 패키지에는 Bun의 런타임 타입이 포함되어 있습니다.

다음 명령어로 bun-types를 설치합니다.

Terminal window
bun add -d bun-types

설치한 패키지를 tsconfig.json 파일의 types에 추가합니다.

tsconfig.json
"compilerOptions": {
"types": ["bun-types"]
}

astro add 명령어로 공식 Astro 통합을 추가할 수 있습니다.

Terminal window
bunx astro add react

Bun을 런타임으로 사용하여 개발 서버를 실행하려면 다음 명령어를 사용합니다.

Terminal window
bunx --bun astro dev

Bun을 런타임으로 사용하여 사이트를 빌드하려면 다음 명령어를 사용합니다.

Terminal window
bunx --bun astro build

Astro는 dist/ 디렉터리에 빌드 결과를 생성합니다. 그러면 preview 명령어를 사용하여 사이트를 제공할 수 있습니다.

Terminal window
bunx --bun astro preview

@astrojs/node를 사용하여 Bun으로 SSR 추가

섹션 제목: @astrojs/node를 사용하여 Bun으로 SSR 추가

Bun은 Node.js API 호환성을 제공합니다. @astrojs/node 어댑터를 사용하면, Node 대신 Bun의 런타임으로 서버 측 렌더링을 추가할 수 있습니다.

다음 명령어를 사용하여 Astro 프로젝트에 Node.js 어댑터를 추가합니다.

Terminal window
bunx astro add node

위에서 사용한 빌드 명령어를 다시 사용하여 사이트를 다시 빌드합니다.

Terminal window
bunx --bun astro build

마지막으로, 빌드된 사이트를 실행하기 위해 다음 명령어를 사용합니다.

Terminal window
bun ./dist/server/entry.mjs

Bun은 bun test 명령을 통해 실행할 수 있는 빠르고 Jest와 호환되는 내장 테스트 실행기를 제공합니다. 이를 사용하려면 bun 테스트 문서를 읽어보세요.

그러나 웹 앱 테스트에 대한 현대적인 접근 방식을 위해 Cypress 또는 Playwright를 사용하는 것도 가능합니다.

Cypress는 프런트엔드 테스트 도구이며 “즐거운 테스트 경험을 만들고 개발자의 행복을 창출하는 것”을 사명으로 삼고 있습니다. 이를 통해 Astro 사이트에 대한 end-to-end 테스트를 작성할 수 있습니다.

다음 명령어를 사용하여 Cypress를 설치합니다.

Terminal window
bun add cypress --dev

나머지 구성을 알아보고 첫 번째 테스트를 시작하려면 Astro 테스트 안내서의 Cypress 프로세스를 따르세요.

Playwright는 Chromium, WebKit 및 Firefox를 포함한 모든 최신 렌더링 엔진에서 Astro 코드를 테스트할 수 있는 end-to-end 테스트 프레임워크입니다.

다음 명령어를 사용하여 Playwright를 설치합니다.

Terminal window
bun create playwright

첫 번째 Playwright 테스트를 생성하려면 Astro 테스트 안내서의 Playwright 프로세스에 대한 지침을 따르세요.

Astro와 함께 Bun을 사용하고 계신가요? 이 페이지에 여러분의 블로그 게시물이나 동영상을 추가하세요!