Skip to content

将你的 Astro 站点部署到 Deno

你可以将服务器端渲染的 Astro 站点部署到 Deno 部署，这是一个在全球边缘运行 JavaScript、TypeScript 和 WebAssembly 的分布式系统。

¥You can deploy a server-side rendered Astro site to Deno Deploy, a distributed system that runs JavaScript, TypeScript, and WebAssembly at the edge, worldwide.

本指南包含有关通过 GitHub Actions 或 Deno Deploy 的 CLI 部署到 Deno Deploy 的说明。

¥This guide includes instructions for deploying to Deno Deploy through GitHub Actions or Deno Deploy’s CLI.

要求

标题部分 要求

¥Requirements

本指南假设你已经安装了 Deno。

¥This guide assumes you already have Deno installed.

项目配置

标题部分 项目配置

¥Project Configuration

你的 Astro 项目可以作为静态站点或服务器端渲染站点 (SSR) 部署到 Deno 部署。

¥Your Astro project can be deployed to Deno Deploy as a static site, or as a server-side rendered site (SSR).

静态站点

标题部分 静态站点

¥Static Site

默认情况下，你的 Astro 项目是静态站点。你不需要任何额外的配置即可将静态 Astro 站点部署到 Deno Deploy。

¥Your Astro project is a static site by default. You don’t need any extra configuration to deploy a static Astro site to Deno Deploy.

SSR 适配器

标题部分 SSR 适配器

¥Adapter for SSR

要在 Astro 项目中启用 SSR 并部署在 Deno Deploy 上：

¥To enable SSR in your Astro project and deploy on Deno Deploy:

使用以下 astro add 命令添加 Deno 适配器 以在 Astro 项目中启用 SSR。这将一步安装适配器并对 astro.config.mjs 文件进行适当的更改。

¥Add the Deno adapter to enable SSR in your Astro project with the following astro add command. This will install the adapter and make the appropriate changes to your astro.config.mjs file in one step.

终端窗口
npx astro add deno

如果你更愿意手动安装适配器，请完成以下两个步骤：

¥If you prefer to install the adapter manually instead, complete the following two steps:

  1. Install the @deno/astro-adapter adapter to your project’s dependencies using your preferred package manager. If you’re using npm or aren’t sure, run this in the terminal:

    终端窗口
      npm install @deno/astro-adapter

  2. Update your astro.config.mjs project configuration file with the changes below.

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

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

    Next, Update your preview script in package.json with the change below.

    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"
      }
    }

    You can now use this command to preview your production Astro site locally with Deno.

    终端窗口
    npm run preview

如何部署

标题部分 如何部署

¥How to deploy

你可以通过 GitHub Actions 或使用 Deno Deploy 的 CLI（命令行接口）部署到 Deno Deploy。

¥You can deploy to Deno Deploy through GitHub Actions or using Deno Deploy’s CLI (command line interface).

GitHub Actions 部署

标题部分 GitHub Actions 部署

¥GitHub Actions Deployment

如果你的项目存储在 GitHub 上，Deno 部署网站 将指导你设置 GitHub Actions 来部署你的 Astro 站点。

¥If your project is stored on GitHub, the Deno Deploy website will guide you through setting up GitHub Actions to deploy your Astro site.

  1. Push your code to a public or private GitHub repository.

  2. Sign in on Deno Deploy with your GitHub account, and click on New Project.

  3. Select your repository, the branch you want to deploy from, and select GitHub Action mode. (Your Astro site requires a build step, and cannot use Automatic mode.)

  4. In your Astro project, create a new file at .github/workflows/deploy.yml and paste in the YAML below. This is similar to the YAML given by Deno Deploy, with the additional steps needed for your Astro site.

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

    jobs:
      deploy:
        name: Deploy
        runs-on: ubuntu-latest
        permissions:
          id-token: write # Needed for auth with Deno Deploy
          contents: read # Needed to clone the repository
    

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

          # Not using npm? Change `npm ci` to `yarn install` or `pnpm i`
          - name: Install dependencies
            run: npm ci
    

          # Not using npm? Change `npm run build` to `yarn build` or `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: replace with Deno Deploy project name
              entrypoint: jsr:@std/http/file-server
              root: dist

  5. After committing this YAML file, and pushing to GitHub on your configured deploy branch, the deploy should begin automatically!

    You can track the progress using the “Actions” tab on your GitHub repository page, or on Deno Deploy.

CLI 部署

标题部分 CLI 部署

¥CLI Deployment

  1. Install the Deno Deploy CLI.

    终端窗口
    deno install -gArf jsr:@deno/deployctl

  2. Run your Astro build step.

    终端窗口
    npm run build

  3. Run deployctl to deploy!

    In the command below, replace <ACCESS-TOKEN> with your Personal Access Token and <MY-DENO-PROJECT> with your Deno Deploy project name.

    终端窗口
    cd dist && DENO_DEPLOY_TOKEN=<ACCESS-TOKEN> deployctl deploy --project=<MY-DENO-PROJECT> jsr:@std/http/file-server

    You can track all your deploys on Deno Deploy.

  4. (Optional) To simplify the build and deploy into one command, add a deploy-deno script in package.json.

    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"
      }
    }

    Then you can use this command to build and deploy your Astro site in one step.

    终端窗口
    DENO_DEPLOY_TOKEN=<ACCESS-TOKEN> npm run deno-deploy

更多部署指南

Astro 中文网 - 粤ICP备13048890号