使用 Metro 发布网站

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

¥Install the Netlify CLI by running the following command:

为单页应用配置重定向。

¥Configure redirects for single-page applications.

如果你的应用使用 静态渲染，那么你可以跳过此步骤。

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

expo.web.output: 'single' 生成一个单页应用。这意味着只有一个 dist/index.html 文件，所有请求都必须重定向到该文件。这可以在 Netlify 中通过创建 ./public/_redirects 文件并将所有请求重定向到 /index.html 来完成。

¥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.

/*    /index.html   200

如果修改此文件，则必须使用 npx expo export -p web 重建项目才能将其安全地复制到 dist 目录中。

¥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.

通过运行以下命令部署 Web 构建文件夹：

¥Deploy the web build folder by running the following command:

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

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

安装 Vercel CLI。

¥Install the Vercel CLI.

为单页应用配置重定向。

¥Configure redirects for single-page applications.

在应用的根目录创建 vercel.json 文件并添加以下配置：

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

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

如果你的应用使用 静态渲染，那么你可能需要添加额外的 动态路由配置。

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

部署网站。

¥Deploy the website.

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

¥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.

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

¥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.

将本地 Expo 项目推送到 GitHub 存储库。如果你还没有推送到 GitHub，请关注 将现有项目添加到 GitHub 的 GitHub 指南。

¥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.

登录 放大控制台 并选择现有应用或创建新应用。授予 Amplify 读取你的 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.

添加你的存储库，选择分支，然后选择连接单一存储库？输入应用 dist 目录的路径并选择下一步。

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

Amplify 控制台将检测项目中的 amplify.yml 文件。选择允许 AWS Amplify 自动部署项目根目录中托管的所有文件，然后选择下一步。

¥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.

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

¥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.

按照了解如何充分利用 Amplify Hosting 下拉列表中的步骤添加具有免费 SSL 证书的自定义域和更多信息。

¥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 控制台 创建一个 Firebase 项目，并按照这些 instructions 安装 Firebase CLI。

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

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

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

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

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

这些设置将取决于你构建 Expo 网站的方式：

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

1. 当询问公共路径时，请确保指定 dist 目录。

   ¥When asked about the public path, make sure to specify the dist directory.

2. 当提示“配置为单页应用（将所有 URL 重写为 /index.html）”时，仅当你使用 web.output: "single"（默认）时才选择“是”。否则，选择否。

   ¥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.

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

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

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

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

¥To deploy, run the following command:

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

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

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

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

  "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"
            }
          ]
        }
      ],
    }
  ]

首先在项目中初始化一个新的 git 存储库并将其配置为推送到 GitHub 存储库。如果你已经将更改与 GitHub 存储库同步，请跳过此步骤。

¥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.

在 GitHub 网站上创建一个存储库。然后，在项目的根目录中运行以下命令：

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

上述命令初始化一个新的 Git 存储库并将其配置为将你的源代码推送到指定的 GitHub 存储库。

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

在你的项目中将 gh-pages 包作为开发依赖安装：

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

要部署项目，请使用 应用配置 中的 baseUrl 属性将其配置为子域。将其值设置为字符串 /repo-name。

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

例如，如果 GitHub 存储库是 expo-gh-pages，则以下将是 实验 baseUrl 属性 的值：

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

{
  "expo": {
    "experiments": {
      "baseUrl": "/expo-gh-pages"
    }
  }
}

由于 Expo 在生成的文件中使用下划线，因此你需要通过在 public 目录中创建 .nojekyll 文件来禁用 jekyll。

¥Because Expo uses underscores in generated files, you need to disable jekyll by creating a .nojekyll file in the public directory.

构建 Web 应用时，公共目录中的文件将被复制到 dist 目录。

¥Files in the public directory are copied to the dist directory when you build your web app.

通过添加 predeploy 和 deploy 脚本来修改 package.json 文件中的 scripts。每个都有自己的价值：

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

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

需要使用 -t 标志运行 gh-pages。此标志确保以 . 开头的文件也包括在内。

¥Running gh-pages with the -t flag is required. This flag ensures that the files starting with . are also included.

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

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

这会将 Web 应用的构建发布到 GitHub 存储库的 gh-pages 分支。此分支仅包含根目录中的构建代码，不包含开发源代码。

¥This publishes a build of the web app to the gh-pages branch of your GitHub repository. This branch only contains your build code in the root directory and does not include development source code.

现在 Web 应用已发布到 gh-pages 分支，请配置 GitHub Pages 以从该分支为应用提供服务。

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

• 导航到 GitHub 存储库的“设置”选项卡。

  ¥Navigate to the Settings tab of the GitHub repository.

• 向下滚动到页面部分。

  ¥Scroll down to Pages section.

• 确保将源设置为从分支部署。

  ¥Ensure the Source is set to Deploy from a branch.

• 在分支部分下，选择 gh-pages 和根目录。

  ¥Under Branch section, select gh-pages and the root directory.

• 单击“保存”。

  ¥Click Save.

发布 Web 应用并设置 GitHub Pages 配置后，GitHub 操作将部署你的网站。你可以通过导航到存储库的“操作”选项卡来监控其进度。完成后，你的 Web 应用将在 URL http://username-on-github.github.io/repo-name 上可用。

¥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.

对于后续部署和更新，运行 deploy 命令，GitHub 操作将自动启动以更新你的 Web 应用。

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