如何在本地通过 HTTPS 轻松提供静态文件答案

【问题标题】：How to easily serve static files over HTTPS locally如何在本地通过 HTTPS 轻松提供静态文件
【发布时间】：2014-12-15 11:41:09
【问题描述】：

我们有前端和后端开发人员。目前，前端开发人员必须在他们的计算机上运行所有后端的东西，这对于运行/编译来说可能相当繁重。

我试图了解如何通过设置一个集成服务器来减轻这个开发过程，前端开发人员将能够在该服务器上插入他们本地提供的文件。

基本上，前端开发人员会转到https://integration.company.com/?baseStaticAssetUrl=http%3A%2F%2Flocalhost%3A8080 之类的网址，以便开发人员可以指定后端应从何处获取 JS/CSS 文件。

除了使用 HTTPS 之外，这工作正常，因为如果后端 html 文件是使用 HTTPS 加载的，则无法使用 HTTP 加载 JS 文件。

Chrome 抱怨：

[已屏蔽] 页面位于 'https://integration.company.com/?baseStaticAssetUrl=http%3A%2F%2Flocal.host%3A8080' 通过 HTTPS 加载，但运行不安全的内容 'http://local.host:8080/app.css': 这个内容也应该被加载通过 HTTPS。

出于特定于我们业务的原因，我希望保持启用 HTTPS（由于浏览器安全性，从 HTTP 切换到 HTTPS 已经让我们遇到意外错误）。

出于这些原因，我想知道是否可以轻松地在本地设置 HTTPS 服务器。

对于 HTTP，它非常简单 (python -m SimpleHTTPServer $PORT)，但对于 HTTPS，是否有任何简单的解决方案（或者我应该使用 Apache 之类的东西）？我想我必须获得 localhost 域的证书或其他什么？

您是否发现任何其他可以解决我的问题的以 HTTPS 提供文件的替代方法？

【问题讨论】：

标签： apache http https

【解决方案1】：

您可以使用ngrok 并获取https代理地址。

ngrok http $port

2020 年 5 月更新：Caddy v2 支持本地 https。

【讨论】：

谢谢，是的，我已经知道 Ngrok，但从未想过使用它通过 https 轻松公开本地内容 :) 好技巧 :)

【解决方案2】：

实际上我直到现在才注意到，但是当 Chrome 限制发生时，Chrome url 栏上有一个小盾牌图标。单击它可以删除限制，以便可以从 HTTPS 服务页面加载 HTTP 内容，如果用户真的想要的话。这解决了我的问题，因为我不再需要在本地提供 HTTPS 文件。

【讨论】：

【解决方案3】：

根据您更喜欢哪种语言/框架/系统，有几种方法可以做到这一点。

基本步骤是：

生成 ssl 证书（将 CN=localhost.ssl 替换为您想要的域）openssl req -nodes -sha256 -days 365 -newkey rsa:2048 -new -x509 -subj \ "/C=GC/ST=Garbage/L=Collector/O=ProgrammerMan/OU=Codeland/CN=localhost.ssl/emailAddress=me@example.com" \ -keyout localhost.ssl.key -out localhost.ssl.cert
使用生成的证书启动 Web 服务器以提供所需文件夹中的文件。下面提供了 nginx 的示例配置

让 nginx 通过 3002 端口为同一 webapp 文件夹提供服务的示例配置。 Https 是通过 listen 指令中的 ssl 关键字开启的。 ssl_certificate 和 ssl_certificate_key 也很重要。 start stop 和 reload 文件为您提供方便。它们允许以独立的方式启动 nginx 示例，并在机器上已经运行 nginx 的情况下进行隔离。

error_log  error.log;
pid        nginx.pid;

events {
  worker_connections  1024;
}

http {
  # Usually nginx has much more comprehensive list of mime types
  # But to keep the example self contained, here are some essential
  # definitions
  types {
    text/html                             html htm shtml;
    text/css                              css;
    text/xml                              xml;
    image/gif                             gif;
    image/jpeg                            jpeg jpg;
    application/javascript                js;
    image/png                             png;
  }

  server {
    listen              3002 ssl;
    server_name         localhost.ssl;
    ssl_certificate     ../localhost.ssl.cert;
    ssl_certificate_key ../localhost.ssl.key;

    root ../webapp;

    location / {
      autoindex on;
      index index.html;
    }
  }
}

将配置保存在localhost.ssl文件中，将文件放入webapp文件夹并使用nginx -ppwd-c localhost.ssl启动nginx

我还写了一篇关于这个主题的博文Serving web application locally over https

【讨论】：