使用 Webpack 发布网站

通过运行以下命令安装 Netlify CLI：

为单页应用配置重定向。

如果你的应用实现了任何导航，你需要配置 Netlify 将请求重定向到单个 web-build/index.html 文件。这可以通过在 Netlify 中创建 ./public/_redirects 文件，并将所有请求重定向到 /index.html 来完成。

进入 web-build 目录并运行以下命令，以使用以下规则创建 _redirects 文件：

/*    /index.html   200

如果你修改了此文件，必须使用 npx expo export:web 重新构建项目，才能安全地将其复制到 web-build 目录中。

运行以下命令部署 Web 构建目录：

你会看到一个可用于在线查看项目的 URL。

安装 Vercel CLI。

为单页应用配置重定向。在应用根目录创建一个 vercel.json 文件，并添加以下内容：

{
  "buildCommand": "expo export:web",
  "outputDirectory": "web-build",
  "devCommand": "expo",
  "cleanUrls": true,
  "framework": null,
  "rewrites": [
    {
      "source": "/:path*",
      "destination": "/"
    }
  ]
}

部署网站。

现在你会看到一个可用于在线查看项目的 URL。构建完成后，将该 URL 粘贴到浏览器中，即可查看你已部署的应用。

将 amplify-explicit.yml 文件添加到仓库根目录。确保你已从 .gitignore 文件中移除生成的 dist 目录，并提交这些更改。

将本地 Expo 项目推送到 GitHub 仓库。如果你还没有推送到 GitHub，请按照 GitHub 关于将现有项目添加到 GitHub 的指南。

登录 Amplify Console，并选择一个现有应用或创建一个新应用。授予 Amplify 权限，以便从你的 GitHub 账户或拥有你仓库的组织中读取内容。

添加你的仓库，选择分支，然后选择 Connecting a monorepo?，输入你的应用 dist 目录的路径，并选择 Next。

Amplify Console 将检测到你项目中的 amplify.yml 文件。选择 Allow AWS Amplify to automatically deploy all files hosted in your project root directory，然后选择 Next。

检查你的设置并选择 Save and deploy。你的应用现在将部署到一个 https://branchname.xxxxxx.amplifyapp.com URL。你现在可以访问你的 Web 应用、部署另一个分支，或在你的 Expo 移动端和 Web 应用之间添加统一的后端环境。

按照 Learn how to get the most out of Amplify Hosting 下拉菜单中的步骤，Add a custom domain with a free SSL certificate，以及获取更多信息。

首先在你的项目中初始化一个新的 git 仓库。如果这一步已经完成，请跳过。

如果没有，你需要在项目根目录中运行以下命令：

将 GitHub 仓库作为 remote 添加到你的本地 git 仓库中。

运行上述命令后，git 就知道你要将源代码推送到哪个仓库。它也会让 gh-pages 包（在下一步安装）知道你要将应用部署到哪里。

在你的项目中将 gh-pages 包作为 dev-dependency 安装：

为 Web 托管配置项目的 package.json。首先添加一个 homepage 属性。将其值设为字符串 http://{username on GitHub}.github.io/{repo-name}。

例如，如果 GitHub 用户名为 dev，GitHub 仓库为 expo-gh-pages，则 homepage 属性的值如下：

{
  "homepage": "http://dev.github.io/expo-gh-pages"
}

在同一个文件中，通过添加 predeploy 和 deploy 属性来修改 scripts 属性。每个属性的值如下所示：

"scripts": {
 %%placeholder-start%%... %%placeholder-end%%
  "deploy": "gh-pages -d web-build",
  "predeploy": "expo export:web"
}

要生成应用的生产构建并将其部署到 GitHub Pages，请运行以下命令：

你的 Web 应用现在可在你在 package.json 中设置为 homepage 的 URL 上访问。

当你将代码发布到你的仓库时，例如：gh-pages，它会将代码创建并推送到你仓库中的一个分支。这个分支会包含你的构建代码，但不包含你的开发源代码。

使用 Firebase Console 创建一个 firebase 项目，并按照这些 说明安装 Firebase CLI。

使用 CLI，通过运行以下命令登录你的 Firebase 账户：

然后，通过运行以下命令初始化你的 firebase 项目以进行托管：

设置将取决于你如何构建 Expo 网站：

当询问 public path 时，务必指定 web-build 目录。另外，在提示 Configure as a single-page app (rewrite all urls to /index.html) 时，选择 Yes。

在 package.json 现有的 scripts 属性中，添加 predeploy 和 deploy 属性。每个属性的值如下：

"scripts": {
  %%placeholder-start%%... %%placeholder-end%%
  "predeploy": "expo export:web",
  "deploy-hosting": "npm run predeploy && firebase deploy --only hosting",
}

要部署，请运行以下命令：

打开控制台输出中的 URL 来检查你的部署，例如：https://project-name.firebaseapp.com。

如果你想更改托管的 header，请在 firebase.json 的 hosting 部分添加以下配置：

  "hosting": [
    {
      %%placeholder-start%%... %%placeholder-end%%
      "headers": [
        {
          "source": "/**",
          "headers": [
            {
              "key": "Cache-Control",
              "value": "no-cache, no-store, must-revalidate"
            }
          ]
        },
        {
          "source": "**/*.@(jpg|jpeg|gif|png|svg|webp|js|css|eot|otf|ttf|ttc|woff|woff2|font.css)",
          "headers": [
            {
              "key": "Cache-Control",
              "value": "max-age=604800"
            }
          ]
        }
      ],
    }
  ]