使用 Webpack 发布网站

使用 webpack 通过第三方服务发布 Expo Web 应用的不同方式。

已弃用：在 SDK 50 及更高版本中，不推荐使用 webpack 进行发布，而是使用 metro。在从 Webpack 迁移到 Expo Router 中了解更多信息。

使用 Expo 创建的 Web 应用可以在本地提供服务以测试生产行为。测试阶段结束后，你可以从各种第三方服务中进行选择来托管它。

¥A web app created using Expo can be served locally for testing out the production behavior. Once the testing phase checks out, you can choose from a variety of third-party services to host it.

打包器	Expo 路由	API 路由	描述
`webpack`			在输出目录中输出带有单个 index.html 的单页应用 (SPA)。

创建网络构建

¥Create a web build

创建项目的 Web 版本是发布 Web 应用的第一步。无论你想在本地提供服务还是将其托管在第三方服务上，你都必须导出项目的所有 JavaScript 和资源。这称为静态打包包。可以通过运行以下命令导出它：

¥Creating a web build of the project is the first step to publishing a web app. Whether you want to serve it locally or host it on a third-party service, you have 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:

运行 webpack export 命令来编译 Web 项目：

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

Terminal

- npx expo export:web

生成的项目文件位于 web-build 目录中。web 目录中的所有文件也会复制到 web-build 目录中。

¥The resulting project files are in the web-build directory. Any files inside the web directory are also copied to the web-build directory.

如果你对项目进行更改，请重新构建它以用于生产。不要直接编辑 web-build 目录。

¥If you make changes to your project, rebuild it for production. Do not edit the web-build directory directly.

本地服务

¥Serve locally

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

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

运行以下命令来服务单页应用：

¥Run the following command to serve the single-page application:

Terminal

- npx serve web-build --single

打开 http://localhost:5000 查看你的项目的运行情况。此方法仅适用于 HTTP，因此权限、相机、位置和许多其他内容将不起作用。

¥Open http://localhost:5000 to see your project in action. This method is HTTP only, so permissions, camera, location, and many other things won't work.

服务器子目录

¥Server a sub-directory

如果你想在子目录中提供你的网站，请将其路径添加到你的 package.json 中，如下所示：

¥If you want to serve your site in a sub-directory, add its path to your package.json as shown below:

package.json

{
  "homepage": "/path/to/sub-directory"
}

托管在第三方服务上

¥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

Install the Netlify CLI by running the following command:

!!!IG9!!!

Configure redirects for single-page applications.

If your app implements any navigation, you'll need to configure Netlify to redirect requests to the single web-build/index.html file. This can be done in Netlify by creating a ./public/_redirects file and redirecting all requests to /index.html.

Navigate inside the web-build directory and run the following command to create _redirects file with following rule:

!!!IG1!!!

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

Deploy the web build directory by running the following command:

!!!IG10!!!

You will 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:

Start a new Netlify project.
Pick your Git hosting service and select your repository.
Click Build your site.

Vercel

Vercel has a single-command deployment flow.

Install the Vercel CLI.

!!!IG11!!!

Configure redirects for single-page applications. Create a vercel.json file at the root of your app and add the following:

!!!IG2!!!

Deploy the website.

!!!IG12!!!

You will 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 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 your computer, so you must use a GitHub repository. Before starting, create a new repo on GitHub.

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.

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

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.

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.

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.

GitHub Pages

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

Start by initializing a new git repository in your project. If this is already done, skip this step.

If not then you'll want to run the following command in your project's root directory:

!!!IG13!!!

Add the GitHub repository as a remote in your local git repository.

!!!IG14!!!

Running the above command makes git know to which repository you want to push your source code. It also makes the gh-pages package (installed in the next step) know where you want to deploy your app.

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

!!!IG15!!!

Configure your project's package.json for web hosting. Start by adding a homepage property. Set its value to the string http://{username on GitHub}.github.io/{repo-name}.

For example, if a GitHub username is called dev and the GitHub repository is expo-gh-pages, the following will be the value of the homepage property:

!!!IG20!!!

!!!IG3!!!

In the same file, modify the scripts property by adding predeploy and deploy properties. Each has its own value as shown:

!!!IG21!!!

!!!IG4!!!

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

!!!IG16!!!

Your web app is now available at the URL you set as homepage in your package.json.

When you publish code to your repository, for example: gh-pages, it will create and push the code to a branch in your repo. This branch will have your build code, however, not your development source code.

Firebase hosting

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

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

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

!!!IG17!!!

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

!!!IG18!!!

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

When asked about the public path, make sure to specify the web-build directory. Also, when prompted Configure as a single-page app (rewrite all urls to /index.html), select Yes.

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

!!!IG22!!!

!!!IG5!!!

To deploy, run the following command:

!!!IG19!!!

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:

!!!IG23!!!

!!!IG6!!!