2018-04-25 搭建微信小程序的本地测试服务器

静静小程序连接留下,有需要可以看一看哈
点我点我

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

如图所示:


2018-04-25 搭建微信小程序的本地测试服务器_第1张图片
启动json-server服务成功

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安装成功
    2018-04-25 搭建微信小程序的本地测试服务器_第2张图片
    nginx的欢迎界面

5.2 配置nginx的反向代理:编辑nginx.conf文件

/usr/local/etc/nginx/nginx.conf 
  • 修改nginx.conf文件中的server{}内容。这里要注意的是,conf文件里面主要有2个server{},一个是默认监听http请求的8080端口的,另一个是https请求的。其中https server默认是注释掉的

打开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/*;
}

你可能感兴趣的:(2018-04-25 搭建微信小程序的本地测试服务器)