前期准备

前两篇文章，分别架设好了小程序商站的后台服务端（提供小程序的数据接口，存储商品和交易信息等等），编译并且在手机上成功打开了测试版小程序，成功拉取到了服务器上的测试数据。

本篇开始，为“真实”运营进行下一步动作。要运营，肯定不能光看那些测试数据，要发布真实的商品和真实的支付订单以及快递流转，所以需要一个后台管理界面，我们选用的海风小店提供了两种数据管理方式（其实是3种，你是大神的话可以手写sql直接管理数据库），其中一种是部署在本地电脑上，直接在电脑浏览器里打开管理界面（相当于用mysql数据库管理软件的可视化版本），优点是方便和安全（真安全啊，没其它动数据库数据的手段），缺点是只能一台电脑上管理，所以综合大多数人的需求，我们在之前那台作小程序服务端的服务器上部署（也可以是一台全新的服务器，做到管理界面和数据分离，读者可以举一反三，我们现在只讲最简单、通用的）。

代码获取

上文提到，本地管理使用的是hioshop-admin源码，我们需要架设在服务器上通过web访问管理，需要用到hioshop-admin-web（
https://github.com/iamdarcy/hioshop-admin-web）。

因为这个admin-web其实就是纯静态的html页面，基于vue，所以只需要把它部署到任意的web服务器目录下，就可以得到管理界面。

因为这台服务器上，我已经安装了nginx架设官网，所以直接把这个代码编译出来放到网站子目录下即可。

**这里没有用docker容器，是为了快速，因为已经有现成的网站了，这样最快，后面有空会做一个docker镜像包含这个admin-web端的，直接运行就可以提供web服务。

代码生成

通过git clone
https://github.com/iamdarcy/hioshop-admin-web或直接zip下载的源码，可以通过npm工具直接运行dev版本（使用nodejs内置web服务能力启动一个监听9528的端口的http服务器，可以预览效果），测试正常后编译出web静态页面拷贝到生产环境的web服务器目录下。

1.正常获取nodejs和npm环境
参考上文服务器端或网上手册，安装nodejs和npm，最简单的是
apt get install nodejs npm
cd hioshop-admin-web //进入源码目录
npm install //安装依赖文件

没有错误后，运行开发测试：
npm run dev
一切正常的话，会运行测试端口http供你访问（同样，需打开阿里云防火墙访问端口权限）。
需要注意，显示的是阿里云的内网地址，需要用真实的外网地址访问，如果访问时有其它权限错误，也不折腾了，这步是确认代码是正常的，只是看一眼， 实际不这么用，走下一步。

2. 真实编译web
   先修改配置文件，需要修改src/config/api.js中的rootUrl需要指向之前创建的小程序后台服务端的server接口地址，即之前小程序获取数据的接口地址，带上admin/，例如：http://www.meiwutea.com:8360/admin/。
   这个配置文件里还有一个配置参数是七牛云的对象存储接口，这个如果缺失不影响测试，但后面要添加商品时，上传图片会失败，因为这个小程序服务端不在本地存储图片等多媒体数据，而是放到七牛云空间上面（好处是比云主机便宜，50G空间如果用户不多，大概10块钱可以用两年），需要你去七牛云「链接」注册一个账号（需要微信实名认证后开通权限），获取api开发接口参数（回到服务器端部署那一步，修改服务端配置文件hioshop-server/src/common/config/config.js录入正确的七牛云api接口参数，需要注意的是domain/源码作者写的比较模糊容易误导，需要是类似http://xxx.meiwutea.com/这样的格式，要带前面的http://前缀和/后缀不能少），新用户可以有30天的免费测试空间可用。
   
   

执行npm run build:prod，成功后，会在当前目录dist目录下生成小程序商站服务端管理代码（即，纯静态网页），拷贝到web服务器目录即可，例如mkdir /var/www/html/admin; cp -R dist/* /var/www/html/admin/。
生成的disk目录下的静态web页面，必须拷贝到web服务器根目录的admin目录下（如果该目录已经被占用，需要修改源码vue.config.js中的publicPath: "/admin"，重新编译生成）。
如果需要，还可以修改源码nano
src/components/WelcomePage.vue ，可以去掉管理首页两条源码开发者加上去的测试信息。

部署服务器管理端

上部获取到管理界面web后，就可以部署到web服务器上提供服务器后台数据管理界面了，这里假设本台服务器已经正常运行了web服务器了，以nginx为例。

修改nginx配置文件，增加admin路径：
location /admin {
proxy_set_header X-Forwarded-Proto $scheme;
alias /var/www/html/admin;
}
systemctl restart nginx重启服务器，即可在你的网站的admin路径下（例如：http://www.xxxx.com/admin）打开小程序服务端管理界面了，默认管理账号、密码都是qilelab.com，登录后可以修改管理员用户名和密码。

初始化数据

因为这个源码有点历史了，所以有些数据需要更新和清空，但管理界面为了数据安全，大多不提供删除功能，比如测试的订单和购物车数据，以及大量的商品数据一条条删是比较累的，需要在MySQL WorkBench软件里远程直接修改数据库。

比如各地行政区域，保存在hiolabs_region表中。
可以清空的测试数据有：
hiolabs_cart 购物车
hiolabs_order 订单
hiolabs_order_express 订单关联快递信息
hiolabs_order_goods 订单关联商品信息

界面上也可以删除但可以批量快速删除的有：
hiolabs_goods 商品表
等等。

这些操作完成后，你大概率不再需要直接从开发电脑上连接服务器数据库了，可以在阿里云上删掉3306端口，保护你的数据安全。

小程序测试

再补充一下上一篇小程序忘了提的事，如果小程序开发环境电脑上预览和手机上调试模式下可以正常加载服务器的商品数据，而提交上传给其他人看不了，其实是忘了在小程序管理后台设置服务器域名了。

为了数据安全，正式的小程序，只允许与指定的域名通信，只有在开发阶段，才可以任意指定ip地址或域名进行数据测试，所以开发部署小程序商店，还是需要有一个ICP备案过的域名和网站服务器的，否则，需要使用微信的云开发服务器，每个月付服务费。

小程序微信支付注意事项

至此，如果一切顺利，你可以有一个能正常运行的微信小程序商店了，能够通过服务器管理界面管理商品，在小程序上下单、支付和发货了。

但需要注意小程序新规，电商类微信支付会在小程序管理后台产生对应的订单，本次架设的小程序由于历史原因，没有对接微信官方的发货接口，所以需要在小程序管理后台人工发货，否则支付的钱会被平台冻结大概10天才能解冻，甚至导致支付接口被封。

所以如果小程序每天发货订单数据少，除了在管理界面填快递单号发货，还要记得人工去微信小程序管理后台同样填快递单号发货（不过有excel表格可以批量发货）。

如果你每天的小程序订单多的忙不过来，这款小程序商店可能不适合，需要另外寻找收费的服务商提供服务了。

安全提醒

本次部署教程突出的是快，所以有些安全方面的问题有所疏忽，比如服务端提供给小程序的数据接口采用http明文传输，服务端管理界面也是http接口（所以采用在服务端同一台服务器部署管理界面，只允许本机localhost地址访问，能规避掉一些风险）。

所以实际商用环境下，建议全站https保护起来，采用nginx的代理功能可以很容量做到这一点，但相应的上面代码中的配置的http地址路径也要有所调整。

首先，还是正常架设一个能访问的nginx web服务器，有一个已经ICP备案的域名。通过https://certbot.eff.org/可以通过脚本，全自动为你的网站生成ssl加密证书并启用https，确认你可以直接通过例如https://www.meiwutea.com方式访问你的原网站，我们接下来要把前面文章提到的小程序商站的服务端接口地址从http升级到https。

修改nginx配置文件：
location /myshop/ {
proxy_pass http://localhost:8080/;
//表示把服务端对外提供的小程序以及管理界面的数据接口从8080端口，代理到443端口的myshop路径下，例如原来配置的是
http://www.meiwutea.com:8080，升级后通过
https://www.meiwutea.com/myshop/访问，原来
http://www.meiwutea.com:8080/admin/升级为
https://www.meiwutea.com/myshop/admin。
}

location /static {
proxy_pass http://localhost:8080;
//因为服务端有一些静态web资源是放到根目录的static目录下的，例如
http://www.meiwutea.com:8080/static/css/xxx.css，现在升级为
https://www.meiwutea.com/static/css/xxx.css。
}
修改完重启nginx后，对应要修改小程序config/api.js中的ApiRoot地址为新的https地址，修改配置管理界面的config/api.js中的rootUrl为新的https地址（简单记住，是在小程序的配置地址后面加admin/）。
微信小程序的管理后台的服务器域名也要相应升级成https：

这一通修改后，在配置管理界面新建商品上传图片，以及小程序上实际跑支付流程时，还会发现了一些异常，跟踪后发现是https升级后造成的，需要做如下调整。

首先，服务端
src/common/config/config.js中的微信支付的notify_url，需要升级为正确的https地址，例如上例中就是
https://www.meiwutea.com/myshop/api/pay/notify，可以手工在浏览器按你的域名地址测试，如果显示FAIL字样表示是正确的，如果出现404或者其它错误，则小程序上支付后订单会依然为未支付状态，请重新检查上述修改。

然后原来正常工作的七牛云又上传不了图片了，检查浏览器日志错误发现，是因为https页面调用了七牛http的接口，并且七牛提供的测试域名是仅支持http。
前往七牛云管理后台，启用自定义域名，先创建http方式的自定义域名，然后会提示你可以升级为HTTPS，这样就不需要在创建的时候提供你自己的ssl证书，避免麻烦。

最后，需要修改后台admin-web的src/config/api.js中的qiniu: 'https://up-z0.qiniup.com',启动https接口，服务端配置文件中也需要同时填写正确的七牛云HTTP和HTTPS两个参数。

这样，你就可以有全站HTTPS加密，保护你的小程序和配置管理界面的通信安全了，当然，最后，还是要做好阿里云的服务器快照，避免数据丢失，出现异常时，去小程序管理后台暂停支付接口保护资金安全等等，这是运营完全自己管理的系统要养成的习惯性动作了。

文章预告

下一篇，将把上面文章中的程序猿专属内容和过于技术的语言和步骤去掉，介绍怎么通过下载两个docker镜像文件例如：meiwutea-server.tgz, meiwutea-admin.tgz，只要运行几条命令例如：
docker import meiwutea-server.tgz meiwutea-server
docker import meiwutea-admin.tgz meiwutea-admin
docker run --name server -p 8080:8360 -d meiwutea-server
docker run --name admin -p 80:80 -d meiwutea-admin

就可以获得一个能正常运行的微信小程序服务端和管理端。文章的编写速度，由大家的点赞、评论驱动哈，记得收藏、关注本号，上火的小伙伴记得来杯茶，欢迎淘宝：梅坞寻茶。