コンテンツにスキップ

AstroサイトをDenoにデプロイする

Astroのサーバーサイドレンダリングされたサイトを、世界中のエッジでJavaScript、TypeScript、およびWebAssemblyを実行する分散システムであるDeno Deployにデプロイできます。

このガイドには、GitHub ActionsまたはDeno DeployのCLIを使用して、Deno Deployにデプロイする手順が含まれています。

このガイドは、すでにDenoをインストールしていることを前提としています。

Astroプロジェクトは、サーバーサイドレンダリングサイト(SSR)としてDeno Deployにデプロイできます。Deno Deployは静的サイトをサポートしていません。

AstroプロジェクトでSSR(サーバーサイドレンダリング)を有効にし、Deno Deployにデプロイするには以下の手順を実行します。

次のastro addコマンドで、AstroプロジェクトにSSRを有効にするための[Denoアダプター][Deno adapter]を追加します。このコマンドは、アダプターをインストールし、astro.config.mjsファイルに適切な変更を一括で行います。

Terminal window
npx astro add deno

アダプターを手動でインストールする場合は、以下の2つのステップを実行してください。

  1. お好みのパッケージマネージャを使用して、[@astrojs/denoアダプター][Deno adapter]をプロジェクトの依存関係にインストールします。npmを使用している、またはよくわからない場合は、ターミナルで以下のコマンドを実行してください。

    Terminal window
    npm install @astrojs/deno
  2. プロジェクトの設定ファイルastro.config.mjsを以下のように変更します。

    astro.config.mjs
    import { defineConfig } from 'astro/config';
    import deno from '@astrojs/deno';
    export default defineConfig({
    output: 'server',
    adapter: deno(),
    });

    次に、package.jsonpreviewスクリプトを以下のように変更します。

    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サイトをローカルでプレビューできるようになりました。

    Terminal window
    npm run preview

GitHub Actions、またはDeno DeployのCLI(コマンドラインインターフェイス)を使用して、Deno Deployにデプロイできます。

プロジェクトが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を貼り付けます。これはDeno Deployが提供するYAMLと似ていますが、Astroサイトに必要なステップが追加されています。

    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@v3
    # 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: server/entry.mjs
    root: dist
  5. このYAMLファイルをコミットし、GitHub上の設定したdeployブランチにプッシュすると、自動的にデプロイが始まるはずです!

    GitHubリポジトリページの「Actions」タブ、またはDeno Deployで進捗を確認できます。

  1. Deno Deploy CLIをインストールします。

    Terminal window
    deno install --allow-read --allow-write --allow-env --allow-net --allow-run --no-check -r -f https://deno.land/x/deploy/deployctl.ts
  2. Astroビルドステップを実行します。

    Terminal window
    npm run build
  3. deployctlを実行してデプロイします!

    以下のコマンドでは、<ACCESS-TOKEN>Personal Access Tokenに、<MY-DENO-PROJECT>をDeno Deployのプロジェクト名に置き換えてください。

    Terminal window
    DENO_DEPLOY_TOKEN=<ACCESS-TOKEN> deployctl deploy --project=<MY-DENO-PROJECT> --no-static --include=./dist ./dist/server/entry.mjs

    Deno Deployですべてのデプロイを追跡できます。

1.(オプション)ビルドとデプロイを1つのコマンドにまとめるには、package.jsondeploy-denoスクリプトを追加します。

package.json
{
// ...
"scripts": {
"dev": "astro dev",
"start": "astro dev",
"build": "astro build",
"preview": "deno run --allow-net --allow-read --allow-env ./dist/server/entry.mjs",
"deno-deploy": "npm run build && deployctl deploy --project=<MY-DENO-PROJECT> --no-static --include=./dist ./dist/server/entry.mjs"
}
}

その後、このコマンドを使用して、ワンステップでAstroサイトをビルドし、デプロイすることができます。

Terminal window
DENO_DEPLOY_TOKEN=<ACCESS-TOKEN> npm run deno-deploy

📚 AstroにおけるSSRについてもっと読む。

その他のデプロイガイド