Skip to content

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

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

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

必要条件

Section titled 必要条件

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

プロジェクトの設定

Section titled プロジェクトの設定

このページは、AstroプロジェクトをDeno Deployにサーバーサイドレンダリングサイト（SSR）としてデプロイする手順を提供します。

静的サイトをデプロイする場合は、Deno Deployの静的サイトチュートリアルを参照してください。

SSR用アダプター

Section titled SSR用アダプター

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

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

Terminal window
npx astro add deno

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

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

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

    Terminal window
    npm run preview

SSRされるAstroサイトのデプロイ方法

Section titled SSRされるAstroサイトのデプロイ方法

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

GitHub Actionsのデプロイメント

Section titled 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@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: server/entry.mjs
              root: dist

  5. このYAMLファイルをコミットし、GitHub上の設定したdeployブランチにプッシュすると、自動的にデプロイが始まるはずです！

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

CLIデプロイメント

Section titled 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についてもっと読む。

More Deployment Guides

Contribute Community Sponsor