部署你的第一个 Expo Router 和 React 应用

了解如何将你的 Expo Router 和 React 应用部署到 EAS Hosting。

EAS Hosting 是一种反应托管服务，可让你将导出的 Expo Web 构建部署到预览或生产 URL。

🌐 EAS Hosting is a react hosting service that allows you to deploy an exported Expo web build to a preview or production URL.

本指南将引导你完成创建第一个 Web 部署的过程。

🌐 This guide will walk you through the process of creating your first web deployment.

观看：部署你的 Expo Router Web 项目

先决条件

🌐 Prerequisites

Expo 用户账户

EAS 托管服务对任何拥有 Expo 账户的人都可用，无论你是否为 EAS 付费或使用免费计划。你可以在 expo.dev/signup 注册。

🌐 EAS Hosting is available to anyone with an Expo account, regardless of whether you pay for EAS or use the Free plan. You can sign up at expo.dev/signup.

付费订阅者可以创建更多部署，拥有更多带宽、存储和请求，并可以设置自定义域名。了解不同计划和优惠的更多信息，请访问 EAS 定价。

🌐 Paid subscribers can create more deployments, have more bandwidth, storage, requests, and may set up a custom domain. Learn more about different plans and benefits at EAS pricing.

一个 Expo Router 网络项目

还没有项目？没问题。按照本指南，你可以快速轻松地创建一个“Hello world”应用。

🌐 Don't have a project yet? No problem. It's quick and easy to create a "Hello world" app that you can use with this guide.

运行以下命令以创建一个新项目：

🌐 Run the following command to create a new project:

Terminal

- npx create-expo-app@latest my-app

安装最新的 EAS CLI

🌐 Install the latest EAS CLI

EAS CLI 是一个命令行应用，你可以通过终端使用它与 EAS 服务进行交互。要安装它，请运行以下命令：

🌐 EAS CLI is the command line app you will use to interact with EAS services from your terminal. To install it, run the command:

Terminal

- npm install --global eas-cli

你也可以使用上述命令来检查是否有新的 EAS CLI 版本可用。我们鼓励你始终保持最新版本。

🌐 You can also use the above command to check if a new version of EAS CLI is available. We encourage you to always stay up to date with the latest version.

我们建议在进行全局包安装时使用 npm 而不是 yarn。你也可以选择使用 npx eas-cli@latest。记住，每当文档中要求使用 eas 时，应使用它替代。

登录到你的 Expo 账户

🌐 Log in to your Expo account

如果你已经使用 Expo CLI 登录了 Expo 账号，可以跳过本节中描述的步骤。如果你还没有登录，请运行以下命令进行登录：

🌐 If you are already signed in to an Expo account using Expo CLI, you can skip the steps described in this section. If you are not, run the following command to log in:

Terminal

- eas login

你可以通过运行 eas whoami 来检查你是否已登录。

🌐 You can check whether you are logged in by running eas whoami.

准备你的项目

🌐 Prepare your project

对于你的应用配置文件中的 expo.web.output，决定是否将其设置为 single、static 或 server。

🌐 For your app config file's expo.web.output, decide whether to set it to either single, static, or server.

single：将你的 Expo 应用导出为只有一个 index.html 输出的单页应用
static：将你的 Expo 应用导出为静态生成的网页应用
server：支持服务器功能和API 路由，以及你的应用的静态页面

如果你不确定需要哪种输出模式，不用担心，你随时可以更改此值并重新部署。

导出你的应用

🌐 Export your app

你需要将你的网页项目导出到 dist 目录。为此，请运行：

🌐 You need to export your web project into a dist directory. To do this, run:

Terminal

- npx expo export --platform web

部署前记得每次都重新运行此命令。

部署你的应用

🌐 Deploy your app

现在将你的网站发布到 EAS 托管：

🌐 Now publish your website to EAS Hosting:

Terminal

- eas deploy

你第一次运行此命令时，它将：

🌐 The first time you run this command, it will:

如果你尚未连接 EAS 项目，会提示你进行连接
请你选择一个预览子域名

信息预览子域名是用于应用预览 URL 的前缀。例如，如果你选择 my-app 作为你的预览子域名，那么你的预览 URL 可能会是：https://my-app--or1170q9ix.expo.app/，而你的生产 URL 将是：https://my-app.expo.app/。

部署完成后，CLI 将输出可访问部署应用的预览 URL，以及 EAS 仪表板上的部署详细信息链接。

🌐 Once your deployment is complete, the CLI will output a preview URL for where your deployed app is accessible, as well as a link to the deployment details on the EAS Dashboard.