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

lsekfe

为了让前端更方便的测试打包后的文件在服务器上是否能正常显示，有必要单独弄一个HTTP和HTTPS服务进行测试用，当然有条件的，你也可以在本地部署个nginx服务，都可以，多多益善，但是还是以简单方便为主。
　　首先进入要建立HTTPS服务的目录，并进入。
　　初始化
　　先初始化项目，生成package.json文件：

1. // 初始化项目
   
2. yarn init -y
   
3. // or
   
4. npm init -y

复制代码

安装服务
　　先安装http-server服务：

1. yarn add http-server
   

复制代码

生成证书

// 生成证书 命令 ①
openssl genrsa -out key.pem 1024

此时当前文件夹内会生成key.pem：

1. // 生成证书 命令 ②
   
2. openssl req -new -key key.pem -out csr.pem

复制代码

执行命令按照提示填写下地址和邮箱信息，这个怎么写就随意了，也许可以一路回车下去呢！
　　此时当前文件夹内会生成csr.pem：

1. // 生成证书 命令 ③
   
2. openssl x509 -req -in csr.pem -signkey key.pem -out cert.pem

复制代码

此时当前文件夹内会生成cert.pem：

PS：这种没有经过机构验证证书浏览器会有提示信任了就好。
　　配置服务
　　证书生成完毕后，配置启动http和https服务的命令，打开package.json文件，添加如下命令：

1. "scripts": {
   
2.     "http": "http-server dist",
   
3.     "https": "http-server -S dist"
   
4. }

复制代码

其中dist文件夹是为了存放服务文件用的，比如可以将 vue 打包好的文件放到这个目录里，将这个目录名定义为dist，也是为了方便测试vue打包后的项目。这样就可以将vue打包后的文件直接复制到根目录即可。
　　完工
　　完整的package.json文件内容如下：

1. {
   
2.   "name": "server",
   
3.   "version": "1.0.0",
   
4.   "main": "index.js",
   
5.   "license": "MIT",
   
6.   "scripts": {
   
7.     "dev": "http-server dist",
   
8.     "https": "http-server -S dist"
   
9.   },
   
10.   "dependencies": {
    
11.     "http-server": "^14.1.0"
    
12.   }
    
13. }

复制代码

整个工程目录截图放这，供参考：