使用 Webpack 发布网站

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

🌐 Install the Netlify CLI by running the following command:

为单页应用配置重定向。

🌐 Configure redirects for single-page applications.

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

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

进入 web-build 目录，并运行以下命令来创建包含以下规则的 _redirects 文件：

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

/*    /index.html   200

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

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

通过运行以下命令来部署 web 构建目录：

🌐 Deploy the web build directory by running the following command:

你将看到一个 URL，你可以使用它在线查看你的项目。

🌐 You will see a URL that you can use to view your project online.

安装 Vercel CLI。

🌐 Install the Vercel CLI.

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

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

部署网站。

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

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

将 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 have not pushed to GitHub yet, follow GitHub's guide to add an existing project to GitHub.

登录 Amplify 控制台，选择一个现有应用或创建一个新应用。授予 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.

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

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

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

🌐 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:

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

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

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

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

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

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

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

🌐 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}.

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

🌐 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:

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

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

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

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

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

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

你的网页应用现在可以通过你在 package.json 中设置为 homepage 的 URL 访问。

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

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

通过 Firebase 控制台 创建一个 Firebase 项目，并按照这些 说明 安装 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:

当被问到公共路径时，确保指定 web-build 目录。另外，当提示 是否将其配置为单页应用（将所有 URL 重写为 /index.html） 时，选择 是。

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

在现有的 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: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"
            }
          ]
        }
      ],
    }
  ]