配置node服务器并且链接微信公众号接口配置步骤详解


Posted in Javascript onJune 21, 2019

配置node服务器

在购买好服务器后,用Xshell链接到服务器。

1、安装nvm

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.34.0/install.sh | bash
或者
wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.34.0/install.sh | bash

安装完,关闭重新启动一下Xshell。

2、用nvm安装node

// 查看当前可安装node版本
nvm ls-remote
// 选择'nodejs.org'官网LTS稳定版本
nvm install v10.16.0
// 出现这样的显示表示安装好了,默认的是v10.16.0的node版本,6.9.0的npm版本
Now using node v10.16.0 (npm v6.9.0)
Creating default alias: default -> v10.16.0
// 可以使用命令查看版本
node --version 
// nvm可以安装多个node版本
nvm install v10.11.0
// 可以使用命令查看安装了多少个node版本
nvm ls
// 可以使用命令指定默认的node版本,如果安装了多个node版本,一定要指定一个默认的版本
nvm alias default v10.11.0
// 如果你不想使用默认,只是零时用一下,可以使用命令
nvm use v10.11.0

3、安装nginx

// 查看服务器系统版本
$ cat /etc/redhat-release 
// 安装epel-release 源
yum install epel-release -y
// 打开源配置
vim /etc/yum.repos.d/nginx.repo
// 在配置中设置nginx安装源,具体可以参考nginx官网文档('http://nginx.org/en/linux_packages.html#stable')
[nginx]
name=nginx repo
baseurl=http://nginx.org/packages/centos/7/$basearch/
gpgcheck=0
enabled=1
// 安装nginx
yum install nginx -y
// 查看nginx是否安装成功,成功的话会显示路径
whereis nginx

4、设置nginx

// 设置开机启动
systemctl enable nginx
// 启动服务,重启是'systemctl restart nginx',停止是 'stop'
systemctl start nginx
// 重新加载,因为一般重新配置之后,不希望重启服务,这时可以使用重新加载
systemctl reload nginx
// 查看服务器状态
systemctl status nginx
// 如果CentOS7 系统打开了防火墙,还需打开防火墙端口
firewall-cmd --zone=public --permanent --add-service=http
sudo firewall-cmd --reload
firewall-cmd --list-service
// 如果要使用反向代理,CentOS7 需要打开网络访问权限
setsebool httpd_can_network_connect 1

5、部署测试项目

// 创建文件夹
mkdir server
// 进入文件夹
cd server
// 创建js文件
vim home.js
// 编写测试代码,注意,这里的ip地址一定要配置成0.0.0.0,如果配置成127.0.0.1,外网会报错端口3000链接不通
const http = require('http');
const hostname = '0.0.0.0';
const port = 3000;
const server = http.createServer((req, res) => {
res.statusCode = 200;
res.setHeader('Content-Type', 'text/plain');
res.end('Hello World\n');
});
server.listen(port, hostname, () => {
console.log(`服务器运行在 http://${hostname}:${port}/`);
});
// 启动
node home.js
// 如果报错'Unhandled 'error' event',可能是端口被占用了,先查看端口占用情况
ps -ef|grep node
// 如果有占用,删除占用,'xxxx'为'root'后的数字
skill -9 xxxxx

出现:服务器运行在 http://0.0.0.0:3000/ 即表示node运行成功,运行成功后,登录阿里云后台配置安全组规则
配置成功如下显示:

允许 自定义 TCP 3000/3000 IPv4地址段访问 0.0.0.0/0 node后台端口

然后就可以在浏览器地址栏输入你的服务器公网ip地址加上:3000,成功出现Hello World即表示安全组配置成功

6、配置nginx

// 进入 '/etc/nginx' 文件夹,查看下 'nginx.conf' 配置文件
cd /etc/nginx
ls
vim nginx.conf
// 低版本的nginx 'nginx.conf' 文件夹里有以下内容
// # include /etc/nginx/conf.d/*.conf;
// # include /etc/nginx/sites-enabled/*;
// 去掉 '#' 号
// 创建nginx配置文件,文件名随意,我一般喜欢用项目名加端口号,比如 'wxServer-3000'
vim /etc/nginx/conf.d/wxServer-3000.conf
// 编写配置文件代码
# 项目名字
upstream wxServer {
# 需要代理的node端口号,也就是你写的端口号
server 0.0.0.0:3000;
# nginx最大连接数
keepalive 8;
}
# nginx服务器实例
server {
# 代理出去的端口号,默认Http协议的80端口,如果配置其它端口需要更改 SELinux 的设置
listen 0.0.0.0:80;
# 别人访问的域名或者ip地址,多个用空格隔开
server_name lzf.fun www.lzf.fun;
# 错误日志存放地址
access_log /var/log/nginx/wxServer-3000.log;
location / {
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $http_host;
proxy_set_header X-NginX-Proxy true;
# proxy_pass 设置反向代理用服务器域名,不使用反向代理,直接用上面upstream的名字就可以了
proxy_pass http://wxServer/;
proxy_redirect off;
}
}
// 保存配置文件后,检查是否编写错误
nginx -t
// 出现以下内容为正确
nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
nginx: configuration file /etc/nginx/nginx.conf test is successful
// 重新加载nginx服务器
systemctl reload nginx
// 在阿里云后台开启80端口的安全组,然后在浏览器输入域名,可以看到 'Hello World' 就表示nginx配置成功了

7、配置PM2

// 安装PM2
npm install pm2 -g
// 进入你的node项目存放的文件夹,pwd是你的文件夹路径
cd pwd
// 启动pm2,--watch监听,每次改动代码自动启动,-i 1 启动一个实例,根据服务器又几个核心设置
// -i 0 则会根据机器当前核数自动开启尽可能多的进程
pm2 start home.js --watch -i 1
// 查看pm2
pm2 ls
// 查看错误日志
pm2 logs
// 重启
pm2 restart home.js
// 停止,id通过查看获得
pm2 stop home|id
// 删除
pm2 delete home|id
// 了解程序的详细信息
pm2 describe home|id
// 关闭Xshell,刷新域名,还可以看见 'Hello World' 表示配置成功

链接微信公众号接口配置

8、编写本地node代码

const Koa = require('koa')
const cors = require('koa2-cors')
const Router = require('koa-router')
const crypto = require('crypto')
const app = new Koa()
// 微信配置
const config = {
wechat: {
appID: 'appID',
appsecret: 'appsecret',
token: 'Maya'
}
}
// 使用koa2-cors解决跨域问题
app.use(
cors({
origin: ctx => {
if (ctx.url === '/test') {
return false
}
return '*'
},
exposeHeaders: ['WWW-Authenticate', 'Server-Authorization'],
maxAge: 5,
credentials: true,
allowMethods: ['GET', 'POST', 'DELETE'],
allowHeaders: ['Content-Type', 'Authorization', 'Accept']
})
)
// 给微信验证的
const wxServer = new Router()
wxServer.get('/', async ctx => {
const { signature, timestamp, nonce, echostr } = ctx.query
const token = config.wechat.token
let hash = crypto.createHash('sha1')
const arr = [token, timestamp, nonce].sort()
hash.update(arr.join(''))
const shasum = hash.digest('hex')
if (shasum === signature) {
return (ctx.body = echostr)
}
ctx.status = 401
ctx.body = 'Invalid signature'
})
// 装载所有路由
const router = new Router()
router.use('/forWx', wxServer.routes(), wxServer.allowedMethods())
// 加载路由中间件
app.use(router.routes()).use(router.allowedMethods())
app.listen(3000)
console.log('[demo] start-quick is starting at port 3000')

9、通过内网穿透的方式测试本地代码是否ok

1、通过localtunnel启动内网穿透,不推荐,有可能启动成功,但是域名链接失败

// 安装
npm install -g localtunnel
// 开启本地服务器
lt --port 3000

2、通过natapp启动内网穿透,配置需要花费一点时间

可以通过内网穿透工具natapp!这篇文章安装配置,

如果你代码写的是开启3000端口,那么最好也配置成3000端口

tips:如果看到隧道链接成功,但是127.0.0.1:3000端口链接失败的提示,不代表安装配置失败,是需要你启动一下代码

安装配置成功后,启动

node home.js

能够成功在浏览器上看到 Invalid signature 表示内网穿透成功

10、开启一个微信公众平台测试账号

在微信公众平台测试管理页面,接口配置信息,URL填写你natapp启动的域名加上forWx,比如我的域名是

http://qf7rja.natappfree.cc/forWx

Token是你自己自定义的,可以随便写,但是要和你本地代码里的Token一致,我这里用的是Maya

点击提交,显示配置成功

11、服务器链接微信公众号接口配置

通过上面的测试账号,验证了代码没有问题,可以配置成功接口配置,剩下的就是把代码上传到服务器了,安装选择rz和sz,当然,使用xftp更好

// 安装
yum install lrzsz -y
// 上传,执行命令,选择打包文件
rz
// 下载,filename是你打包的服务器文件夹,或者单个文件
sz filename

上传成功后,解压缩,清除前面的 Hello World 代码,清空 PM2 ,重新把现在代码挂到 PM2 上

在浏览器上输入域名 + forWx 能出现 Invalid signature 表示成功,如果没有出现,配置不成功,需要排查原因

在微信公众平台登录账号,选择基本配置-->服务器配置,然后按照配置测试账号的方式去配置

点击提交,显示配置成功

尾声

嘘~~~长出了一口气,研究了老久,node服务器总算配置成功了,而且已经链接到公众号接口配置,并且我还有一个测试账号
可以用测试账号本地写代码,然后再上传到服务器验证的方式去开发
这样的做的原因是,测试账号玩坏了不心疼,转眼又弄好了一个,服务器玩坏了,配置起来可就麻烦了
剩下的就是开发具体业务了,什么拿到AccessToken啊,自动回复消息啊,自定义菜单啊,等等等等

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
5 cool javascript apps
Mar 24 Javascript
js Array操作的最简短最容易理解方法
Dec 09 Javascript
js实现按一下删除键删除整个单词附demo
Sep 05 Javascript
Javascript基础教程之while语句
Jan 18 Javascript
Boostrap模态窗口的学习小结
Mar 28 Javascript
javascript如何实现360度全景照片问题汇总
Apr 04 Javascript
JS中的forEach、$.each、map方法推荐
Apr 05 Javascript
Bootstrap 过渡效果Transition 模态框(Modal)
Mar 17 Javascript
详解Vue 普通对象数据更新与 file 对象数据更新
Apr 26 Javascript
2种简单的js倒计时方式
Oct 20 Javascript
angular 组件通信的几种实现方式
Jul 13 Javascript
小程序双头slider选择器的实现示例
Mar 31 Javascript
微信小程序实现点击效果
Jun 21 #Javascript
JS利用prototype给类添加方法操作详解
Jun 21 #Javascript
三分钟教你用Node做一个微信哄女友(基友)神器(面向小白)
Jun 21 #Javascript
微信小程序实现弹出菜单动画
Jun 21 #Javascript
js类的继承定义与用法分析
Jun 21 #Javascript
js中值引用和地址引用实例分析
Jun 21 #Javascript
微信小程序实现消息框弹出动画
Apr 18 #Javascript
You might like
php删除文件夹及其文件夹下所有文件的函数代码
2013/01/23 PHP
PHP实现文件上传功能实例代码
2017/05/18 PHP
PhpStorm2020 + phpstudyV8 +XDebug的教程详解
2020/09/17 PHP
javascript 获取网页参数系统
2008/07/19 Javascript
javascript options属性集合操作代码
2009/12/28 Javascript
学习js在线html(富文本,所见即所得)编辑器
2012/12/18 Javascript
使用javascript:将其它类型值转换成布尔类型值的解决方法详解
2013/05/07 Javascript
用jQuery toggleClass 实现鼠标移上变色
2014/05/14 Javascript
js实现网页右上角滑出会自动消失大幅广告的方法
2015/02/27 Javascript
JavaScript获取页面中表单(form)数量的方法
2015/04/03 Javascript
Easyui form combobox省市区三级联动
2016/01/13 Javascript
jQuery form插件之formDdata参数校验表单及验证后提交
2016/01/23 Javascript
jQuery fancybox在ie浏览器下无法显示关闭按钮的解决办法
2016/02/19 Javascript
浅析Bootstrap组件之面板组件
2016/05/04 Javascript
详解ElementUI之表单验证、数据绑定、路由跳转
2017/06/21 Javascript
jQuery回调方法使用示例
2017/06/26 jQuery
vue element动态渲染、移除表单并添加验证的实现
2019/01/16 Javascript
基于Koa(nodejs框架)对json文件进行增删改查的示例代码
2019/02/02 NodeJs
jQuery实现form表单基于ajax无刷新提交方法实例代码
2019/11/04 jQuery
vue中 v-for循环的用法详解
2020/02/19 Javascript
浅析Vue 中的 render 函数
2020/02/28 Javascript
node.js通过url读取文件
2020/10/16 Javascript
Javascript Symbol原理及使用方法解析
2020/10/22 Javascript
解决Ant Design Modal内嵌Form表单initialValue值不动态更新问题
2020/10/29 Javascript
python中迭代器(iterator)用法实例分析
2015/04/29 Python
使用Python脚本将文字转换为图片的实例分享
2015/08/29 Python
tensorflow实现在函数中用tf.Print输出中间值
2020/01/21 Python
python获取响应某个字段值的3种实现方法
2020/04/30 Python
电子狗项圈:eDog Australia
2019/12/04 全球购物
大门门卫岗位职责
2013/11/30 职场文书
大学生创业计划书的范文
2014/01/07 职场文书
领导干部失职检讨书
2015/05/05 职场文书
亮剑精神观后感
2015/06/05 职场文书
门面租赁合同范文
2019/08/06 职场文书
创业计划书之香辣虾火锅
2019/09/23 职场文书
刚学完怎么用Python实现定时任务,转头就跑去撩妹!
2021/06/05 Python