This documentation is available as Markdown for AI agents and LLMs. See the full Markdown index or append .md to any documentation URL.

了解如何将网页构建部署到 EAS 托管，同时与现有 EAS 工作流的 Android 和 iOS 发布一起进行。

我们前几章的工作流程涵盖了 Android 和 iOS。让我们扩展它们，同时将 Web 构建部署到 EAS Hosting 与同一个版本一起发布。

🌐 Our workflows from previous chapters cover Android and iOS. Let's extend them to also deploy the web build to EAS Hosting alongside the same release.

学习成果

🌐 Learning outcomes

• 配置 Expo 项目以导出静态网页构建
• 在 preview.yml 中添加一个网页部署任务以生成非生产环境的网页构建
• 在 production.yml 添加一个网页部署任务来生成生产网页构建

EAS 托管和部署任务

🌐 EAS Hosting and the deploy job

EAS托管 是一个用于托管和部署Expo应用网络版本的服务。每次部署都会获得一个独特的URL，并且一个项目只有一个生产环境URL，用来提供我们最后一次部署到生产环境的内容。

EAS 工作流中的 deploy 预打包任务会运行网页导出，将导出步骤的输出上传到 EAS 托管，并将部署 URL 作为任务输出返回。deploy 任务有两个参数：

🌐 The deploy pre-packaged job in EAS Workflows runs the web export, uploads the output of the export step to EAS Hosting, and returns the deployment URL as the job output. The deploy job has two parameters:

配置 web.output 用于静态导出

🌐 Configure web.output for static export

在我们将 web 部署任务添加到工作流之前，需要配置我们的 Expo 项目以导出静态网页构建。在 app.json 中，将 web.output 字段设置为 static:

🌐 Before we add web deployment jobs to our workflows, we need to configure our Expo project to export a static web build. In app.json, set the web.output field to static:

{
  "expo": {
    %%placeholder-start%%... %%placeholder-end%%
    "web": {
      "output": "static"
    }
  }
}

static 告诉 Expo CLI 生成一个包含静态 HTML、JavaScript 和资源文件的目录，EAS Hosting 可以提供这些文件。Expo 也支持 single 和 server 输出；static 生成任何主机都能提供的普通文件，这在这里就是我们需要的。

在用以上配置更新 app.json 后，提交更改并推送到仓库的 main 分支。

🌐 After updating the app.json with the above configuration, commit the change and push it to the repository's main branch.

添加一个网页预览部署

🌐 Add a web preview deployment

设置 prod: true 是预览部署和生产部署之间的区别。预览部署会获得每个部署独特的 URL。我们在 第 3 章 第 1 步 中创建了一个预览工作流。让我们在该工作流中添加一个 deploy_web 任务，这样每次我们创建新的预览构建时，也会得到一个新的网页部署。

🌐 Setting prod: true is the difference between a preview deployment and a production deployment. Previews get unique per-deployment URLs. We created a preview workflow in Chapter 3 Step 1. Let's add a deploy_web job to that workflow so any time we create a new preview build, we also get a new web deployment.

name: Preview builds

jobs:
  # ... existing fingerprint, get-build, build_android, build_ios, notify jobs

  deploy_web:
    name: Deploy web (preview)
    type: deploy

3

测试工作流程

🌐 Test the workflow

现在，使用以下命令手动运行预览工作流：

🌐 Now, manually run the preview workflow using the following command:

Terminal

复制

- eas workflow:run .eas/workflows/preview.yml

在 EAS 仪表板上，预览工作流程运行显示了 deploy_web 作业以及构建作业。

🌐 On the EAS dashboard, the preview workflow run shows the deploy_web job alongside the build jobs.

在 部署网页（预览） 下，点击 查看部署 链接，在浏览器中打开已部署的网页版本。

🌐 Under Deploy web (preview), click the View Deployment link to open the deployed web build in the browser.

添加一个网页生产部署

🌐 Add a web production deployment

从 第6章，第1步 开始的生产工作流会在我们推送新的 Git 标签时运行，并构建或更新原生应用。我们在这个工作流中添加一个 deploy_web 任务，这样发布新版本应用时也会更新生产环境 URL 上的网页版本。

🌐 The production workflow from Chapter 6, Step 1 runs when we push a new Git tag, and it builds or updates the native app. Let's add a deploy_web job to that workflow so that releasing a new version of the app also updates the web version on the production URL.

name: Deploy to production

on:
  push:
    tags: ['v*.*.*']

jobs:
  # ... existing fingerprint, get-build, build, update jobs ...

  deploy_web:
    name: Deploy web (production)
    type: deploy
    params:
      prod: true

概括

🌐 Summary

Learn about the next steps to use EAS Workflows.