本地测试, 如何搭建HTTP和HTTPS服务

发表于:2022-7-22 09:53

字体: | 上一篇 | 下一篇 | 我要投稿

 作者:Gaby    来源:掘金

  为了让前端更方便的测试打包后的文件在服务器上是否能正常显示,有必要单独弄一个HTTP和HTTPS服务进行测试用,当然有条件的,你也可以在本地部署个nginx服务,都可以,多多益善,但是还是以简单方便为主。
  首先进入要建立HTTPS服务的目录,并进入。
  初始化
  先初始化项目,生成package.json文件:
// 初始化项目
yarn init -y
// or
npm init -y
  安装服务
  先安装http-server服务:
yarn add http-server
  生成证书
// 生成证书 命令 ①
openssl genrsa -out key.pem 1024
  此时当前文件夹内会生成key.pem:
// 生成证书 命令 ②
openssl req -new -key key.pem -out csr.pem
  执行命令按照提示填写下地址和邮箱信息,这个怎么写就随意了,也许可以一路回车下去呢!
  此时当前文件夹内会生成csr.pem:
// 生成证书 命令 ③
openssl x509 -req -in csr.pem -signkey key.pem -out cert.pem
  此时当前文件夹内会生成cert.pem:
  PS:这种没有经过机构验证证书浏览器会有提示信任了就好。
  配置服务
  证书生成完毕后,配置启动http和https服务的命令,打开package.json文件,添加如下命令:
"scripts": {
    "http": "http-server dist",
    "https": "http-server -S dist"
}
  其中dist文件夹是为了存放服务文件用的,比如可以将 vue 打包好的文件放到这个目录里,将这个目录名定义为dist,也是为了方便测试vue打包后的项目。这样就可以将vue打包后的文件直接复制到根目录即可。
  完工
  完整的package.json文件内容如下:
{
  "name": "server",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "dev": "http-server dist",
    "https": "http-server -S dist"
  },
  "dependencies": {
    "http-server": "^14.1.0"
  }
}
  整个工程目录截图放这,供参考:
  本文内容不用于商业目的,如涉及知识产权问题,请权利人联系51Testing小编(021-64471599-8017),我们将立即处理
《2023软件测试行业现状调查报告》独家发布~

关注51Testing

联系我们

快捷面板 站点地图 联系我们 广告服务 关于我们 站长统计 发展历程

法律顾问:上海兰迪律师事务所 项棋律师
版权所有 上海博为峰软件技术股份有限公司 Copyright©51testing.com 2003-2024
投诉及意见反馈:webmaster@51testing.com; 业务联系:service@51testing.com 021-64471599-8017

沪ICP备05003035号

沪公网安备 31010102002173号