中文网
Nodejs.cn 旗下网站
首页指南EAS参考教程

发布网站

了解如何部署 Expo 网站进行生产。

Expo Web 应用可以在本地提供服务以测试生产行为，并部署到托管服务。我们建议部署到 EAS 托管 以获得最佳功能支持。你还可以自行托管或使用第三方服务。

¥An Expo web app can be served locally for testing the production behavior, and deployed to a hosting service. We recommend deploying to EAS Hosting for the best feature support. You can also self-host or use a third-party service.

使用 EAS 立即部署

EAS Hosting 是部署 Web 应用的最佳方式，支持自定义域、SSL 等。

对于 SDK 49 及以下版本，你可能需要 发布 webpack 构建的指南。

¥For SDK 49 and below, you may need the guide for publishing webpack builds.

产出目标

¥Output targets

可以在 应用配置 中配置 web.output 目标来设置 Web 应用的导出方法：

¥The web.output target can be configured in the app config to set the export method for the web app:

app.json
{
  "expo": {
    "web": {
      "output": "server",
      "bundler": "metro"
    }
  }
}

Expo Router 支持 Web 应用的三个输出目标。

¥Expo Router supports three output targets for web apps.

输出Expo 路由API 路由描述
single（默认）在输出目录中输出带有单个 index.html 的单页应用 (SPA)，并且没有静态可索引的 HTML。
server创建客户端和服务器目录。客户端文件作为单独的 HTML 文件输出。API 路由作为单独的 JavaScript 文件，用于托管自定义 Node.js 服务器。
static为应用目录中的每个路由输出单独的 HTML 文件。

创建构建

¥Create a build

创建项目的构建是发布 Web 应用的第一步。无论你是要在本地提供服务还是部署到托管服务，你都需要导出项目的所有 JavaScript 和资源。这称为静态打包包。可以通过运行以下命令导出它：

¥Creating a build of the project is the first step to publishing a web app. Whether you want to serve it locally or deploy to a hosting service, you'll need to export all JavaScript and assets of a project. This is known as a static bundle. It can be exported by running the following command:

运行通用导出命令来编译 Web 项目：

¥Run the universal export command to compile the project for web:

Terminal
- npx expo export -p web

生成的项目文件位于 dist 目录中。public 目录中的所有文件也会复制到 dist 目录中。

¥The resulting project files are located in the dist directory. Any files inside the public directory are also copied to the dist directory.

本地服务

¥Serve locally

使用 npx expo serve 在本地快速测试你的网站在生产环境中的托管方式。运行以下命令来提供静态打包包：

¥Use npx expo serve to quickly test locally how your website will be hosted in production. Run the following command to serve the static bundle:

Terminal
- npx expo serve

打开 http://localhost:8081 查看你的项目的运行情况。这仅适用于 HTTP，因此权限、相机、位置和许多其他安全功能可能无法按预期工作。

¥Open http://localhost:8081 to see your project in action. This is HTTP only, so permissions, camera, location, and many other secure features may not work as expected.

使用 EAS 托管

¥Hosting with EAS

当你准备好投入生产时，你可以立即使用 EAS CLI 部署你的网站。

¥When you're ready to go to production, you can instantly deploy your website with EAS CLI.

使用 EAS 立即部署

EAS Hosting 是部署 Web 应用的最佳方式，支持自定义域、SSL 等。

托管在第三方服务上

¥Hosting on third-party services

Netlify

Netlify 是一个几乎没有任何意见的用于部署 Web 应用的平台。这与 Expo Web 应用具有最高的兼容性，因为它对框架做了很少的假设。

¥Netlify is a mostly-unopinionated platform for deploying web apps. This has the highest compatibility with Expo web apps as it makes few assumptions about the framework.

使用 Netlify CDN 手动部署

¥Manual deployment with the Netlify CDN

1

Install the Netlify CLI by running the following command:

!!!IG9!!!

2

Configure redirects for single-page applications.

If your app uses static rendering, then you can skip this step.

expo.web.output: 'single' generates a single-page application. It means there's only one dist/index.html file to which all requests must be redirected. This can be done in Netlify by creating a ./public/_redirects file and redirecting all requests to /index.html.

!!!IG1!!!

If you modify this file, you must rebuild your project with npx expo export -p web to have it safely copied into the dist directory.

3

Deploy the web build directory by running the following command:

!!!IG10!!!

You'll see a URL that you can use to view your project online.

Continuous delivery

Netlify can also build and deploy when you push to git or open a new pull request:

Vercel

Vercel has a single-command deployment flow.

1

Install the Vercel CLI.

!!!IG11!!!

2

Configure redirects for single-page applications.

Create a vercel.json file at the root of your app and add the following configuration:

!!!IG2!!!

If your app uses static rendering, then you may want to add additional dynamic route configuration.

3

Deploy the website.

!!!IG12!!!

You'll now see a URL that you can use to view your project online. Paste that URL into your browser when the build is complete, and you'll see your deployed app.

AWS Amplify Console

The AWS Amplify Console provides a Git-based workflow for continuously deploying and hosting full-stack serverless web apps. Amplify deploys your PWA from a repository instead of from your computer. In this guide, we'll use a GitHub repository. Before starting, create a new repo on GitHub.

1

Add the amplify-explicit.yml file to the root of your repository. Ensure you have removed the generated dist directory from the .gitignore file and committed those changes.

2

Push your local Expo project to a GitHub repository. If you haven't pushed to GitHub yet, follow GitHub's guide to add an existing project to GitHub.

3

Login to the Amplify Console and select an existing app or create a new app. Grant Amplify permission to read from your GitHub account or the organization that owns your repo.

4

Add your repo, select the branch, and select Connecting a monorepo? to enter the path to your app's dist directory and choose Next.

The Amplify Console will detect the amplify.yml file in your project. Select Allow AWS Amplify to automatically deploy all files hosted in your project root directory and choose Next.

5

Review your settings and choose Save and deploy. Your app will now be deployed to a https://branchname.xxxxxx.amplifyapp.com URL. You can now visit your web app, deploy another branch, or add a unified backend environment across your Expo mobile and web apps.

Follow the steps in the Learn how to get the most out of Amplify Hosting drop-down to Add a custom domain with a free SSL certificate and more information.

Firebase hosting

Firebase Hosting is production-grade web content hosting for web projects.

1

Create a firebase project with the Firebase Console and install the Firebase CLI by following these instructions.

2

Using the CLI, login to your Firebase account by running the command:

!!!IG13!!!

3

Then, initialize your firebase project to host by running the command:

!!!IG14!!!

The settings will depend on how you built your Expo website:

  1. When asked about the public path, make sure to specify the dist directory.
  2. When prompted Configure as a single-page app (rewrite all urls to /index.html), only select Yes if you used web.output: "single" (default). Otherwise, select No.

4

In the existing scripts property of package.json, add predeploy and deploy properties. Each has the following values:

!!!IG32!!!

!!!IG3!!!

5

To deploy, run the following command:

!!!IG15!!!

Open the URL from the console output to check your deployment, for example: https://project-name.firebaseapp.com.

In case you want to change the header for hosting add the following config for hosting section in firebase.json:

!!!IG33!!!

!!!IG4!!!

GitHub Pages

GitHub Pages allows you to publish a website directly from a GitHub repository.

GitHub Pages deployment uses experimental baseUrl functionality that may not work as intended.

1

Start by initializing a new git repository in your project and configuring it to push to a GitHub repository. If you are already syncing your changes with a GitHub repository, skip this step.

Create a repository on the GitHub website. Then, run the following commands in your project's root directory:

!!!IG38!!!

The above commands initialize a new Git repository and configure it to push your source code to the specified GitHub repository.

2

Install the gh-pages package as a development dependency in your project:

!!!IG20!!!

!!!IG21!!!

!!!IG16!!!

!!!IG22!!!

!!!IG23!!!

!!!IG17!!!

!!!IG24!!!

!!!IG25!!!

3

To deploy the project, configure it to a subdomain with the baseUrl property in app config. Set its value to the string /repo-name.

For example, if the GitHub repository is expo-gh-pages, the following will be the value of the experimental baseUrl property:

!!!IG34!!!

!!!IG5!!!

4

Modify the scripts in the package.json file by adding predeploy and deploy scripts. Each has its own value:

!!!IG35!!!

!!!IG6!!!

Since Expo uses underscores in generated files, you need to disable Jekyll with the --nojekyll flag.

5

To generate a production build of the web app and deploy it to GitHub Pages, run the following command:

!!!IG26!!!

!!!IG27!!!

!!!IG18!!!

!!!IG28!!!

!!!IG29!!!

!!!IG19!!!

!!!IG30!!!

!!!IG31!!!

This publishes a build of the web app to the gh-pages branch of your GitHub repository. This branch only contains build artifacts from the dist directory, plus the .nojekyll file generated by gh-pages. It does not include development source code.

6

Now that the web app is published to the gh-pages branch, configure GitHub Pages to serve the app from that branch.

  • Navigate to the Settings tab of the GitHub repository.
  • Scroll down to Pages section.
  • Ensure the Source is set to Deploy from a branch.
  • Under Branch section, select gh-pages and the root directory.
  • Click Save.

7

Once the web app is published and the GitHub Pages configuration is set, a GitHub action will deploy your website. You can monitor its progress by navigating to your repository's Actions tab. Upon completion, your web app will be available at the URL http://username-on-github.github.io/repo-name.

For subsequent deployments and updates, run the deploy command and the GitHub action will start automatically to update your web app.