静静小程序连接留下,有需要可以看一看哈
点我点我
1.小程序对于网络请求的URL的特殊要求:
- 不能出现端口号
- 不能用localhost
- 必须用https
2.用到的工具
- json-server
- nginx(点击查看)
- openssl
- 微信小程序官方开发工具
3.主要步骤
- 用
json-server
搭建简单的服务器,搭建出来的服务器地址为localhonst:3000
- 安装
nginx
进行反向代理,以便隐藏端口号和替换localhost - 搭建
https
服务 - 微信小程序设置
4.json-server的使用
4.1安装
sudo npm install -g json-server
4.2 选一个文件目录新建json
文件,比如cars.json
{
"cars": [
{
"id": 1,
"desc": "哈弗H6",
"completed": false
},
{
"id": 2,
"desc": "吉利博越",
"completed": false
},
{
"id": 3,
"desc": "宝骏560",
"completed": false
}
]
}
4.3 启动json-server
服务:在新建的json
文件目录,运行命令:json-server + 文件名
json-server cars.json
终端输出如下,表示已经启动成功:
Loading cars.json
Done
Resources
http://localhost:3000/cars
Home
http://localhost:3000
如图所示:
PS:
浏览器中输入地址http://localhost:3000/cars就能看到输出
cars.json
的内容至此,就搭建了一个简单的本地测试服务器,
json-server
支持get,post
等,基本足够开发测试用了,具体的可以参考json-server官网为了将
localhost:3000/cars
这样的接口改成www.test.com/cars这样的形式,就需要用nginx
进行反向代理
5.用nginx进行反向代理
5.1 安装nginx
brew install nginx
安装完以后,可以在终端输出的信息里看到一些配置路径:
/usr/local/etc/nginx/nginx.conf (配置文件路径)
/usr/local/var/www (服务器默认路径)
/usr/local/Cellar/nginx/1.13.12(貌似是安装路径)
- 浏览器中键入http://localhost:8080,访问到nginx的欢迎界面,即表示nginx安装成功
5.2 配置nginx的反向代理:编辑nginx.conf
文件
/usr/local/etc/nginx/nginx.conf
- 修改nginx.conf文件中的
server{}
内容。这里要注意的是,conf
文件里面主要有2个server{}
,一个是默认监听http
请求的8080端口的,另一个是https
请求的。其中https serve
r默认是注释掉的
打开nginx.conf
,一起来分析一下这个文件。在nginx
的配置中用#
表示注释
#user nobody;
##定义拥有和运行Nginx服务的Linux系统用户
worker_processes 1;
##定义单进程。通常将其设成CPU的个数或者内核数
#error_log logs/error.log;
#error_log logs/error.log notice;
#error_log logs/error.log info;
##定义Nginx在哪里打日志
#pid logs/nginx.pid;
##Nginx写入主进程ID(PID)
events {
worker_connections 1024;
##通过worker_connections和worker_processes计算maxclients。
##max_clients = worker_processes * worker_connections
}
http {
include mime.types;
##在/opt/nginx/conf/mime.types写的配置将在http模块中解析
default_type application/octet-stream;
#log_format main '$remote_addr - $remote_user [$time_local] "$request" '
# '$status $body_bytes_sent "$http_referer" '
# '"$http_user_agent" "$http_x_forwarded_for"';
#access_log logs/access.log main;
sendfile on;
##如果是为了获取本地存储的静态化文件,sendfile可以加速服务端,但是如果是反向代理,那么该功能就失效了。
#tcp_nopush on;
##在 nginx 中,tcp_nopush 配置和 tcp_nodelay "互斥"。它可以配置一次发送数据的包大小。也就是说,它不是按时间累计 0.2 秒后发送包,而是当包累计到一定大小后就发送。在 nginx 中,tcp_nopush 必须和sendfile 搭配使用。
#keepalive_timeout 0;
keepalive_timeout 65;
##设置保持客户端连接时间
#gzip on;
##告诉服务端用gzip压缩
server {
##如果你想对虚拟主机进行配置,可以在单独的文件中配置server模块,然后include进来
listen 8080;
##告诉Nginx TCP端口,监听HTTP连接。listen 80; 和 listen *:80;是一样的
server_name localhost;
##定义虚拟主机的名字
#charset koi8-r;
#access_log logs/host.access.log main;
location / {
##location模块可以配置nginx如何反应资源请求
root html;
index index.html index.htm;
}
#error_page 404 /404.html;
# redirect server error pages to the static page /50x.html
#
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
# proxy the PHP scripts to Apache listening on 127.0.0.1:80
#
#location ~ \.php$ {
# proxy_pass http://127.0.0.1;
#}
# pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
#
#location ~ \.php$ {
# root html;
# fastcgi_pass 127.0.0.1:9000;
# fastcgi_index index.php;
# fastcgi_param SCRIPT_FILENAME /scripts$fastcgi_script_name;
# include fastcgi_params;
#}
# deny access to .htaccess files, if Apache's document root
# concurs with nginx's one
#
#location ~ /\.ht {
# deny all;
#}
}
# another virtual host using mix of IP-, name-, and port-based configuration
#
#server {
# listen 8000;
# listen somename:8080;
# server_name somename alias another.alias;
# location / {
# root html;
# index index.html index.htm;
# }
#}
# HTTPS server
#
#server {
# listen 443 ssl;
# server_name localhost;
# ssl_certificate cert.pem;
# ssl_certificate_key cert.key;
# ssl_session_cache shared:SSL:1m;
# ssl_session_timeout 5m;
# ssl_ciphers HIGH:!aNULL:!MD5;
# ssl_prefer_server_ciphers on;
# location / {
# root html;
# index index.html index.htm;
# }
#}
include servers/*;
}
虽然上面的默认配置很多,但是可以总体归纳为一下几个模块:
#全局模块
events {
#events模块
}
http
{
#http全局模块
server
{
#server全局模块
location [PATTERN]{
#location模块
}
}
}
全局块:配置影响nginx全局的指令。一般有运行nginx服务器的用户组,nginx进程pid存放路径,日志存放路径,配置文件引入,允许生成worker process数等。
events块:配置影响nginx服务器或与用户的网络连接。有每个进程的最大连接数,选取哪种事件驱动模型处理连接请求,是否允许同时接受多个网路连接,开启多个网络连接序列化等。
http块:可以嵌套多个server,配置代理,缓存,日志定义等绝大多数功能和第三方模块的配置。如文件引入,mime-type定义,日志自定义,是否使用sendfile传输文件,连接超时时间,单连接请求数等。
server块:配置虚拟主机的相关参数,一个http中可以有多个server。
location块:配置请求的路由,以及各种页面的处理情况。
我配置的nginx.conf
文件
#user nobody;
worker_processes 1;
#error_log logs/error.log;
#error_log logs/error.log notice;
#error_log logs/error.log info;
#pid logs/nginx.pid;
events {
worker_connections 1024;
}
http {
include mime.types;
default_type application/octet-stream;
#log_format main '$remote_addr - $remote_user [$time_local] "$request" '
# '$status $body_bytes_sent "$http_referer" '
# '"$http_user_agent" "$http_x_forwarded_for"';
#access_log logs/access.log main;
sendfile on;
#tcp_nopush on;
#keepalive_timeout 0;
keepalive_timeout 65;
#gzip on;
server {
listen 80;
server_name www.test.com;
#主要是增加下面三行
ssl on;
ssl_certificate /Users/chenzhaoshen/Desktop/静静假服务/server.crt;
ssl_certificate_key /Users/chenzhaoshen/Desktop/静静假服务/server_nopwd.key;
#charset koi8-r;
#access_log logs/host.access.log main;
location / {
proxy_pass http://192.168.1.102:3000/;
root html;
index index.html index.htm;
}
#error_page 404 /404.html;
# redirect server error pages to the static page /50x.html
#
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
# proxy the PHP scripts to Apache listening on 127.0.0.1:80
#
#location ~ \.php$ {
# proxy_pass http://127.0.0.1;
#}
# pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
#
#location ~ \.php$ {
# root html;
# fastcgi_pass 127.0.0.1:9000;
# fastcgi_index index.php;
# fastcgi_param SCRIPT_FILENAME /scripts$fastcgi_script_name;
# include fastcgi_params;
#}
# deny access to .htaccess files, if Apache's document root
# concurs with nginx's one
#
#location ~ /\.ht {
# deny all;
#}
}
# another virtual host using mix of IP-, name-, and port-based configuration
#
#server {
# listen 8000;
# listen somename:8080;
# server_name somename alias another.alias;
# location / {
# root html;
# index index.html index.htm;
# }
#}
# HTTPS server
#
server {
listen 443 ssl;
server_name localhost;
# ssl_certificate cert.pem;
# ssl_certificate_key cert.key;
ssl_certificate /Users/chenzhaoshen/Desktop/静静假服务/server.crt;
ssl_certificate_key /Users/chenzhaoshen/Desktop/静静假服务/server_nopwd.key;
# ssl_session_cache shared:SSL:1m;
# ssl_session_timeout 5m;
# ssl_ciphers HIGH:!aNULL:!MD5;
# ssl_prefer_server_ciphers on;
server_name_in_redirect off;
proxy_set_header Host $host:$server_port;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header REMOTE-HOST $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
location / {
proxy_pass http://192.168.1.102:3000/;
root html;
# index index.html index.htm;
}
}
include servers/*;
}