Astro에서 Bun 사용하기

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

주의

Bun은 최근 첫 번째 안정적인 버전을 출시했습니다. 그러나 Bun을 Astro와 함께 사용하면, 일부 통합이 예상대로 동작하지 않을 수 있습니다. 자세한 내용은 Astro와 함께 사용하는 방법에 대한 Bun 공식 문서를 참고하세요.

Bun을 사용하면서 문제를 발견했다면, Github의 Bun 공식 저장소에서 issue를 생성해주세요.

요구사항

섹션 제목: 요구사항

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

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

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

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

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

팁

또한 --template 플래그를 사용하여, 기존에 존재하던 다른 Astro Github 저장소로부터 새 Astro 프로젝트를 생성할 수도 있습니다.

bunx create-astro@latest my-astro-project-using-bun --template eliancodes/brutal

종속성 설치

섹션 제목: 종속성 설치

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

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

bun install

타입 추가

섹션 제목: 타입 추가

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

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

bun add -d @types/bun

Astro 통합 사용

섹션 제목: Astro 통합 사용

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

bunx astro add react

Bun으로 Astro 실행

섹션 제목: Bun으로 Astro 실행

노트

Node 대신 Bun의 자체 런타임을 사용하려면, 모든 astro 명령어 앞에 --bun CLI 플래그를 사용하세요.

개발 서버 실행

섹션 제목: 개발 서버 실행

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

bunx --bun astro dev

Bun으로 사이트 빌드

섹션 제목: Bun으로 사이트 빌드

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

bunx --bun astro build

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

bunx --bun astro preview

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

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

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

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

bunx astro add node

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

bunx --bun astro build

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

bun ./dist/server/entry.mjs

Bun에서 테스트하기

섹션 제목: Bun에서 테스트하기

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

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

Cypress

섹션 제목: Cypress

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

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

bun add cypress --dev

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

Playwright

섹션 제목: Playwright

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

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

bun create playwright

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

공식 자료

섹션 제목: 공식 자료

• Astro와 Bun을 사용하여 앱 빌드

커뮤니티 자료

섹션 제목: 커뮤니티 자료

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

• Bun을 사용하여 Cloudflare Pages 사이트 빌드 - 블로그 게시물