使用 HTTPS 本地运行 Storybook

2023-11-29 06:57:02

简介

Storybook 是一款出色的工具，可用于开发和展示 UI 组件。在开发过程中，在本地运行 Storybook 通常很有用，但出于安全性和隐私考虑，使用 HTTPS 至关重要。本文将指导您如何在本地使用 HTTPS 运行 Storybook，无论您使用 Webpack 还是 Vite 作为构建器。

使用 Webpack

步骤 1：安装证书

首先，您需要为您的 localhost 生成 SSL 证书。您可以使用 OpenSSL 来执行此操作：

openssl req -x509 -newkey rsa:4096 -keyout localhost.key -out localhost.crt -days 365 -nodes

步骤 2：配置 Webpack

在您的 webpack.config.js 文件中，添加以下配置：

const https = require('https');

module.exports = {
  devServer: {
    https: {
      key: fs.readFileSync('localhost.key'),
      cert: fs.readFileSync('localhost.crt')
    }
  }
};

使用 Vite

步骤 1：安装插件

对于 Vite，您需要安装 @vitejs/plugin-ssl 插件：

npm install @vitejs/plugin-ssl

步骤 2：配置 Vite

在您的 vite.config.js 文件中，添加以下配置：

const { defineConfig } = require('vite');
const path = require('path');
const pluginSsl = require('@vitejs/plugin-ssl');

module.exports = defineConfig({
  server: {
    https: {
      key: fs.readFileSync('localhost.key'),
      cert: fs.readFileSync('localhost.crt')
    },
    host: true
  },
  plugins: [pluginSsl()]
});