使用 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输出单页应用 (SPA),并在输出文件夹中包含单个 index.html。

创建网络构建

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

如果你想在子文件夹中提供站点服务,请将其路径添加到 package.json 中,如下所示:

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

package.json
{
  "homepage": "/path/to/subfolder"
}

托管在第三方服务上

¥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

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

¥Install the Netlify CLI by running the following command:

Terminal
npm install -g netlify-cli

2

为单页应用配置重定向。

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

web/_redirects
/*    /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.

3

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

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

Terminal
netlify deploy --dir web-build

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

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

持续交付

¥Continuous delivery

当你推送到 git 或打开新的拉取请求时,Netlify 还可以构建和部署:

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

  • 启动一个新的 Netlify 项目

    ¥Start a new Netlify project.

  • 选择你的 Git 托管服务并选择你的存储库。

    ¥Pick your Git hosting service and select your repository.

  • 单击“构建你的网站”。

    ¥Click Build your site.

Vercel

Vercel 具有单命令部署流程。

¥Vercel has a single-command deployment flow.

1

安装 Vercel CLI

¥Install the Vercel CLI.

Terminal
npm install -g vercel@latest

2

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

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

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

3

部署网站。

¥Deploy the website.

Terminal
vercel

你现在将看到一个可用于在线查看项目的 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.

AWS Amplify 控制台

¥AWS Amplify Console

AWS Amplify 控制台 提供基于 Git 的工作流程,用于持续部署和托管全栈无服务器 Web 应用。Amplify 从存储库而不是你的计算机部署 PWA,因此你必须使用 GitHub 存储库。在开始之前,在 GitHub 上创建一个新的存储库.

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

1

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.

2

将本地 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.

3

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

4

添加你的存储库,选择分支,然后选择连接单一存储库?输入应用 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.

5

检查你的设置并选择保存并部署。你的应用现在将部署到 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.

GitHub 页面

¥GitHub Pages

GitHub 页面 允许你直接从 GitHub 存储库发布网站。

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

1

首先在项目中初始化一个新的 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:

Terminal
git init

2

将 GitHub 存储库添加为本地 git 存储库中的 remote

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

Terminal
git remote add origin https://github.com/username/expo-gh-pages.git

运行上述命令使 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.

3

在项目中将 gh-pages 包安装为 dev-dependency

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

Terminal
yarn add -D gh-pages

4

配置项目的 package.json 以进行 Web 托管。首先添加 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:

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

在同一文件中,通过添加 predeploydeploy 属性来修改 scripts 属性。每个都有其自己的值,如下所示:

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

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

5

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

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

Terminal
yarn deploy

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

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

当你将代码发布到存储库时,例如:gh-pages,它将创建代码并将其推送到你的存储库中的分支。但是,该分支将包含你的构建代码,而不是你的开发源代码。

¥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 托管

¥Firebase hosting

Firebase 托管 是用于 Web 项目的生产级 Web 内容托管。

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

1

使用 Firebase 控制台 创建一个 Firebase 项目,并按照这些 instructions 安装 Firebase CLI。

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

2

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

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

Terminal
firebase login

3

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

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

Terminal
firebase init

这些设置将取决于你构建 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.

4

在 package.json 的现有 scripts 属性中,添加 predeploydeploy 属性。每个都有以下值:

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

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

5

要部署,请运行以下命令:

¥To deploy, run the following command:

Terminal
npm run deploy-hosting

打开控制台输出中的 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:

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"
            }
          ]
        }
      ],
    }
  ]
Expo 中文网 - 粤ICP备13048890号