Question

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

我试图通过设置一个集成服务器来了解如何减轻这个开发过程，前端开发人员可以在其上插入本地服务的文件。

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

除了使用HTTPS之外，这种方法很好，因为如果后端html文件加载了HTTPS，则无法使用HTTP加载JS文件。

Chrome抱怨：

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

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

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

对于HTTP来说，它非常简单（python -m SimpleHTTPServer $PORT）但是对于HTTPS来说有什么简单的解决方案（或者我应该使用像Apache这样的东西）？我想我必须获得localhost域名的证书吗？

您是否看到在HTTPS中提供可以解决我的问题的文件的其他替代方法？

Answer 1

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

ngrok http $port

Answer 2

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

Answer 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 文件夹。在 listen 指令中使用 ssl 关键字启用了Https。 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 -p pwd -c localhost.ssl启动nginx

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

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

3 个答案: