컨텐츠로 건너뛰기

Astro 사이트를 Deno에 배포

전 세계 엣지에서 JavaScript, TypeScript 및 WebAssembly를 실행하는 분산 시스템인 Deno Deploy에 서버 측 렌더링된 Astro 사이트를 배포할 수 있습니다.

이 안내서에는 GitHub Actions 또는 Deno Deploy의 CLI를 통해 Deno Deploy에 배포하기 위한 지침이 포함되어 있습니다.

요구 사항

섹션 제목: 요구 사항

이 가이드에서는 Deno가 이미 설치되어 있다고 가정합니다.

프로젝트 구성

섹션 제목: 프로젝트 구성

Deno Deploy에 Astro 프로젝트를 정적 사이트 또는 서버 측 렌더링 사이트 (SSR)로 배포할 수 있습니다.

정적 사이트

섹션 제목: 정적 사이트

Astro 프로젝트는 기본적으로 정적 사이트입니다. 정적 Astro 사이트를 Deno Deploy에 배포하기 위해 추가 구성이 필요하지 않습니다.

SSR용 어댑터

섹션 제목: SSR용 어댑터

Astro 프로젝트에서 SSR을 활성화하고 Deno Deploy에 배포하려면:

astro add 명령을 사용하여 Astro 프로젝트에서 SSR을 활성화하려면 Deno 어댑터를 추가하세요. 그러면 어댑터가 설치되고 astro.config.mjs 파일이 한 번에 적절하게 변경됩니다.

터미널 창
npx astro add deno

대신 어댑터를 수동으로 설치하려면 다음 두 단계를 완료하세요.

  1. 선호하는 패키지 관리자를 사용하여 프로젝트의 종속성에 @deno/astro-adapter 어댑터를 설치합니다. npm을 사용 중이거나 확실하지 않은 경우 터미널에서 다음을 실행하세요.

    터미널 창
      npm install @deno/astro-adapter

  2. astro.config.mjs 프로젝트 구성 파일을 아래 변경 사항으로 업데이트하세요.

    astro.config.mjs
    import { defineConfig } from 'astro/config';
    import deno from '@deno/astro-adapter';
    

    export default defineConfig({
      output: 'server',
      adapter: deno(),
    });

    다음으로 package.json 파일의 preview 스크립트를 아래 변경 사항으로 업데이트하세요.

    package.json
    {
      // ...
      "scripts": {
        "dev": "astro dev",
        "start": "astro dev",
        "build": "astro build",
        "preview": "astro preview"
        "preview": "deno run --allow-net --allow-read --allow-env ./dist/server/entry.mjs"
      }
    }

    이제 이 명령을 사용하여 Deno를 통해 로컬에서 프로덕션 Astro 사이트를 미리 볼 수 있습니다.

    터미널 창
    npm run preview

배포하는 방법

섹션 제목: 배포하는 방법

GitHub Actions 또는 Deno Deploy의 CLI (명령줄 인터페이스)를 사용하여 Deno Deploy에 배포할 수 있습니다.

GitHub Actions 배포

섹션 제목: GitHub Actions 배포

프로젝트가 GitHub에 저장되어 있는 경우 Deno Deploy 웹사이트에서 Astro 사이트를 배포하기 위한 GitHub Actions 설정 과정을 안내합니다.

  1. 공개 또는 비공개 GitHub 저장소에 코드를 푸시합니다.

  2. GitHub 계정으로 Deno Deploy에 로그인한 후 New Project를 클릭합니다.

  3. 저장소와 배포할 브랜치를 선택하고 GitHub Action 모드를 선택합니다. (Astro 사이트에는 빌드 단계가 필요하며 자동 모드를 사용할 수 없습니다.)

  4. Astro 프로젝트에서 .github/workflows/deploy.yml에 새 파일을 생성하고 아래 YAML에 붙여넣습니다. 이는 Astro 사이트에 필요한 추가 단계가 포함된 Deno Deploy에서 제공하는 YAML과 유사합니다.

    .github/workflows/deploy.yml
    name: Deploy
    on: [push]
    

    jobs:
      deploy:
        name: Deploy
        runs-on: ubuntu-latest
        permissions:
          id-token: write # Deno Deploy 인증에 필요
          contents: read # 저장소를 복제하는 데 필요
    

        steps:
          - name: Clone repository
            uses: actions/checkout@v4
    

          # npm을 사용하지 않나요? `npm ci`를 `yarn install` 또는 `pnpm i`로 변경하세요.
          - name: Install dependencies
            run: npm ci
    

          # npm을 사용하지 않나요? `npm run build`를 `yarn build` 또는 `pnpm run build`로 변경하세요.
          - name: Build Astro
            run: npm run build
    

          - name: Upload to Deno Deploy
            uses: denoland/deployctl@v1
            with:
              project: my-deno-project # TODO: Deno Deploy 프로젝트 이름으로 변경
              entrypoint: jsr:@std/http/file-server
              root: dist

  5. 이 YAML 파일을 커밋하고 구성된 배포 브랜치에서 GitHub로 푸시하면 배포가 자동으로 시작됩니다!

    GitHub 저장소 페이지 또는 Deno Deploy의 “Actions” 탭을 사용하여 진행 상황을 추적할 수 있습니다.

CLI 배포

섹션 제목: CLI 배포

  1. Deno Deploy CLI를 설치합니다.

    터미널 창
    deno install -gArf jsr:@deno/deployctl

  2. Astro 빌드 단계를 실행합니다.

    터미널 창
    npm run build

  3. 배포하려면 deployctl을 실행합니다!

    아래 명령에서 <ACCESS-TOKEN>을 Personal Access Token으로 바꾸고 <MY-DENO-PROJECT>를 Deno Deploy 프로젝트 이름으로 바꿉니다.

    터미널 창
    cd dist && DENO_DEPLOY_TOKEN=<ACCESS-TOKEN> deployctl deploy --project=<MY-DENO-PROJECT> jsr:@std/http/file-server

    Deno Deploy에서 모든 배포를 추적할 수 있습니다.

  4. (선택 사항) 빌드를 단순화하고 하나의 명령으로 배포하려면 package.json 파일에 deploy-deno 스크립트를 추가하세요.

    package.json
    {
      // ...
      "scripts": {
      "dev": "astro dev",
      "start": "astro dev",
      "build": "astro build",
      "preview": "astro preview",
      "deno-deploy": "npm run build && cd dist && deployctl deploy --project=<MY-DENO-PROJECT> jsr:@std/http/file-server"
      }
    }

    그런 다음 이 명령을 사용하여 Astro 사이트를 한 단계로 빌드하고 배포할 수 있습니다.

    터미널 창
    DENO_DEPLOY_TOKEN=<ACCESS-TOKEN> npm run deno-deploy

더 많은 배포 안내서

기여하기

여러분의 생각을 들려주세요!

GitHub Issue 생성

우리에게 가장 빨리 문제를 알려줄 수 있어요.

커뮤니티
京ICP备15031610号-99