返回

为 VuePress 博客开启本地 HTTPS 访问，玩转 PWA，打造沉浸式体验

前端

在本地 VuePress 博客中启用 HTTPS：提升安全性与 PWA 兼容性

前言

在本地开发和测试 VuePress 博客时，我们通常采用类似 http://localhost:8080/learn-typescript/ 的地址。然而，在某些情况下，启用 HTTPS 协议至关重要，例如提升安全性以及实现渐进式 Web 应用程序 (PWA) 兼容性。

HTTPS（超文本传输安全协议）

HTTPS 是一种安全协议，可保护 Web 浏览器和服务器之间的连接。它通过加密用户数据，防止窃听和篡改，从而增强网站安全性。

PWA (渐进式 Web 应用程序)

PWA 是一种新型 Web 应用程序，兼具原生应用程序的体验和无需应用商店审核的优点。PWA 可以离线运行，并具有原生功能，如推送通知。为了实现 PWA 兼容性，我们需要为本地 VuePress 博客启用 HTTPS。

配置 HTTPS

1. 安装 Let's Encrypt

首先，安装 Let's Encrypt，一个免费的证书颁发机构。在 macOS 上：

brew install letsencrypt

在 Windows 上，从 Let's Encrypt 官网下载安装程序。

2. 生成 SSL 证书

letsencrypt certonly --webroot -w /path/to/public/folder

将 /path/to/public/folder 替换为 VuePress 博客的 public 文件夹路径。

3. 安装 ngrok

ngrok 是一个反向代理工具，可创建安全的公共 URL：

brew install ngrok

4. 配置 ngrok

启动 ngrok：

ngrok http 8080

将 8080 替换为 VuePress 博客的本地端口号。

5. 修改 VuePress 配置文件

在 vuepress.config.js 中，添加：

module.exports = {
  // ...其他配置
  https: {
    key: '/path/to/private.key',
    cert: '/path/to/certificate.crt'
  }
};

将 /path/to/private.key 和 /path/to/certificate.crt 替换为 SSL 证书的私钥和证书路径。

常见问题解答

1. 如何检查是否已启用 HTTPS？

访问 ngrok 提供的公共 URL，并在浏览器的地址栏中查看是否有绿色锁形图标。

2. 为何需要使用 Let's Encrypt？

Let's Encrypt 提供免费的 SSL 证书，使您无需购买商业证书。

3. ngrok 的作用是什么？

ngrok 创建一个安全的公共 URL，使您可以在本地网络之外访问 VuePress 博客。

4. 如何更新 SSL 证书？

SSL 证书通常每 90 天更新一次。使用 Let's Encrypt renew 命令来更新。

5. HTTPS 对 SEO 有影响吗？

启用 HTTPS 会为网站带来积极的 SEO 影响，因为它被 Google 视为安全性的一个指标。

结论

通过遵循这些步骤，您可以为本地 VuePress 博客配置 HTTPS，增强安全性并实现 PWA 兼容性。这样做有助于保护用户数据，提升网站体验。