Skip to content

Latest commit

 

History

History
185 lines (131 loc) · 7.53 KB

deno.mdx

File metadata and controls

185 lines (131 loc) · 7.53 KB
Raw
title description type i18nReady
AstroサイトをDenoにデプロイする
Denoを使ってAstroサイトをウェブにデプロイする方法。
deploy
true

import ReadMore from '~/components/ReadMore.astro'; import { Steps } from '@astrojs/starlight/components';

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

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

必要条件

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

プロジェクトの設定

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

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

SSR用アダプター

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

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

npx astro add deno

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

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

  1. プロジェクトの設定ファイル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サイトをローカルでプレビューできるようになりました。

    npm run preview

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

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

GitHub Actionsのデプロイメント

プロジェクトがGitHubに保存されている場合は、Deno Deployのウェブサイトに従って、AstroサイトをデプロイするようにGitHub Actionsを設定できます。

1. 公開または非公開のGitHubリポジトリにコードをプッシュします。

  1. GitHubアカウントでDeno Deployにサインインし、New Projectをクリックします。

  2. リポジトリとデプロイしたいブランチを選択し、GitHub Actionモードを選択します。(Astroサイトではビルドステップが必要なため、自動モードは使用できません。)

  3. 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

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

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

CLIデプロイメント

1. [Deno Deploy CLI](https://docs.deno.com/deploy/manual/deployctl)をインストールします。 
```bash
deno install --allow-read --allow-write --allow-env --allow-net --allow-run --no-check -r -f https://deno.land/x/deploy/deployctl.ts
```

  1. Astroビルドステップを実行します。

    npm run build

  2. deployctlを実行してデプロイします！

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

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

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

  3. （オプション）ビルドとデプロイを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サイトをビルドし、デプロイすることができます。

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

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