コンテンツにスキップ

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

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

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

必要条件

セクションタイトル： 必要条件

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

プロジェクトの設定

セクションタイトル： プロジェクトの設定

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

SSR用アダプター

セクションタイトル： SSR用アダプター

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

    Terminal window
    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を貼り付けます。これは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で進捗を確認できます。

CLIデプロイメント

セクションタイトル： CLIデプロイメント

  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.jsonにdeploy-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についてもっと読む。

その他のデプロイガイド