使用本地 HTTPS 开发
了解如何为 Expo Web 应用设置本地 HTTPS。
在本地开发 Expo 网页应用时，你可能需要在本地开发环境中使用 HTTPS，以测试安全的浏览器 API。本指南将向你展示如何为 Expo 网页应用设置本地 HTTPS。
🌐 When developing Expo web apps locally, you may need to use HTTPS with your local development environment for testing secure browser APIs. This guide shows you how to set up local HTTPS for Expo web apps.
先决条件
🌐 Prerequisites
本指南需要在你的计算机上安装以下工具：
🌐 This guide requires the following tool installed on your machine:
mkcert：一个用于创建开发证书的工具。有关安装说明，请参阅mkcertGitHub 仓库。
优势
🌐 Benefits
- 团队可扩展性：相同的配置适用于所有人
- 身份验证支持：仅限 HTTP 的 Cookie 和安全上下文
- 生产一致性：匹配你的生产 HTTPS 环境
- 轻松分享：团队内部统一的开发 URL
设置你的项目
🌐 Set up your project
1
创建或进入你的 Expo 项目：
🌐 Create or navigate to your Expo project:
# Create a new project (if needed)- npx create-expo-app@latest example-app- cd example-app# Or navigate to existing project- cd your-expo-project2
启动你的 Expo 开发服务器：
🌐 Start your Expo development server:
- npx expo start --web你的应用将在 http://localhost:8081 上运行。请保持此终端窗口打开。
🌐 Your app will be running on http://localhost:8081. Keep this terminal window open.
3
使用 mkcert 为本地主机生成证书。在新的终端窗口中，从项目的根目录运行以下命令：
🌐 Use mkcert to generate a certificate for localhost. Run the following command in a new terminal window from your project's root directory:
- mkcert localhost信息 提示：请确保在安装
mkcert后，运行mkcert -install来安装本地证书颁发机构 (CA)。
这将在你的项目根目录中生成两个签名证书文件：localhost.pem（证书）和localhost-key.pem（私钥）。
🌐 This will generate two signed certificate files: localhost.pem (certificate) and localhost-key.pem (private key), inside your project's root directory.
4
在你项目的根目录中，运行以下命令以启动代理：
🌐 Inside your project's root directory, run the following command to start the proxy:
- npx local-ssl-proxy --source 443 --target 8081 --cert localhost.pem --key localhost-key.pem信息 提示:
local-ssl-proxy是一个工具，它可以创建一个代理服务器，将来自端口 443 的 HTTPS 流量转发到你的 Expo 开发服务器的 8081 端口。
这会创建一个代理，将 HTTPS 流量从端口 443 转发到端口 8081 上的 Expo 开发服务器。
🌐 This creates a proxy that forwards HTTPS traffic from port 443 to your Expo dev server on port 8081.
5
在浏览器中打开 https://localhost 以访问你的应用。你的 Expo 应用现在已通过 HTTPS 运行。
🌐 Open https://localhost in your browser to access your app. Your Expo app is now running with HTTPS.