使用本地 HTTPS 开发

编辑页面

了解如何为 Expo Web 应用设置本地 HTTPS。


For the complete documentation index, see llms.txt. Use this Use this file to discover all available pages.

在本地开发 Expo web 应用时,您可能需要在本地开发环境中使用 HTTPS,以测试安全的浏览器 API。本指南将向您展示如何为 Expo web 应用设置本地 HTTPS。

前提条件

本指南要求您的机器上安装以下工具:

优势

  • 团队可扩展性:相同的设置适用于所有人
  • 身份验证支持:HTTP-Only Cookie 和安全上下文
  • 生产环境一致性:与您的生产 HTTPS 环境保持一致
  • 易于共享:团队之间保持一致的开发 URL

设置您的项目

1

创建或进入您的 Expo 项目:

Terminal
# 创建一个新项目(如果需要)
npx create-expo-app@latest example-app --template default@sdk-55
cd example-app

# 或进入现有项目
cd your-expo-project

2

启动您的 Expo 开发服务器:

Terminal
npx expo start --web

您的应用将运行在 http://localhost:8081。请保持这个终端窗口打开。

3

使用 mkcert 为 localhost 生成证书。在新终端窗口中,从项目根目录运行以下命令:

Terminal
mkcert localhost
提示:请确保在安装 mkcert 后运行 mkcert -install 以安装本地证书颁发机构(CA)。

这将在您的项目根目录中生成两个已签名的证书文件:localhost.pem(证书)和 localhost-key.pem(私钥)。

4

在您的项目根目录中运行以下命令以启动代理:

Terminal
npx local-ssl-proxy --source 443 --target 8081 --cert localhost.pem --key localhost-key.pem
提示local-ssl-proxy 是一个代理工具,它会创建一个代理服务器,将 443 端口的 HTTPS 流量转发到您位于 8081 端口的 Expo 开发服务器。

这将创建一个代理,把 443 端口的 HTTPS 流量转发到您位于 8081 端口的 Expo 开发服务器。

5

在浏览器中打开 https://localhost 以访问您的应用。您的 Expo 应用现在已通过 HTTPS 运行。