学习babylon.js --- [3] 开启https

babylonjs提供WebVR功能,但是使用这个功能得用https,本文讲述如何使用自签名证书来开启https,基于第二篇文章中搭建的工程。


一 生成自签名证书

首先要安装openssl,这个去网上搜下就行了。安装完之后在终端下输入openssl回车可以出现openssl的命令行,

输入q然后回车可以退出。

在MyProject目录下创建certificates目录,然后在终端下cd进入该目录,后面按照如下步骤操作,

  • 生成key.pem

    bash 复制代码
    openssl genrsa -out key.pem
  • 生成csr.pem

    bash 复制代码
    openssl req -new -key key.pem -out csr.pem

    生成过程中会提示填一些信息,随便填就可以了

  • 生成自签名证书cert.pem

    bash 复制代码
    openssl x509 -req -days 9999 -in csr.pem -signkey key.pem -out cert.pem

这样需要的证书文件就准备好了。


二 工程使用自签名证书

首先关闭server程序,然后打开工程目录下的webpack.config.js,在devServer里添加以下语句,

typescript 复制代码
        https: {
            key: fs.readFileSync('./certificates/key.pem'),
            cert: fs.readFileSync('./certificates/cert.pem')
        }

添加完毕后如下,


三 运行server

回到MyProject目录下,执行下面命令去重新构建并运行server,

bash 复制代码
npm run build
npm run start

在运行完后,可以看到打印如下,已经支持https了

此时我们在浏览器里输入https://127.0.0.1:8080并回车,会出现如下提示,

这是正常的,因为证书是自签名的,不是正规证书,这里点击高级,然后点击继续前往127.0.0.1

最后就可以再次看到熟悉的画面了,

相关推荐
棋鬼王6 分钟前
Cesium(十) 动态修改白模颜色、白模渐变色、白模光圈特效、白模动态扫描光效、白模着色器
前端·javascript·vue.js·智慧城市·数字孪生·cesium
酉鬼女又兒9 分钟前
零基础快速入门前端蓝桥杯Web备考:BOM与定时器核心知识点详解(可用于备赛蓝桥杯Web应用开发)
开发语言·前端·javascript·职场和发展·蓝桥杯
ThridTianFuStreet小貂蝉9 分钟前
面试题1:请系统讲讲 Vue2 与 Vue3 的核心差异(响应式、API 设计、性能与编译器)。
前端·javascript·vue.js
反向跟单策略29 分钟前
期货反向跟单:跨合约跟单的意义及操作方法
大数据·人工智能·学习·数据分析·区块链
竹林81831 分钟前
在NFT项目中集成IPFS:从Pinata上传到前端展示的完整实战与踩坑
前端·javascript
计算机安禾35 分钟前
【数据结构与算法】第16篇:串(String)的定长顺序存储与朴素模式匹配
c语言·数据结构·c++·学习·算法·visual studio code·visual studio
拒朽1 小时前
51单片机学习(六)模块化编程和LCD调试工具
嵌入式硬件·学习·51单片机
我命由我123451 小时前
Vite - Vite 最小项目
服务器·前端·javascript·react.js·ecmascript·html5·js
布局呆星1 小时前
Vue3 | 事件绑定与双向数据绑定
前端·javascript·vue.js