超小DEMO：微信小程序+Express+腾讯云服务器部署（Nginx+SSL）

花了几小时尝试了下demo，记录下过程（回忆式流水账，一点都不深入）。

准备

微信小程序

小程序注册，微信公众平台

腾讯云轻量应用服务器

买的校园云服务器，25岁以下免学生认证。
操作系统：Ubuntu Server 20.04 LTS 64bit

云服务器

远程登录（使用密钥登录）

1. 【服务器】服务器关机

2. 【密钥】创建密钥：需选择同一地域。

   
   
   创建SSH密钥
3. 绑定实例
4. Mac下
   chmod 400 <下载的与云服务器关联的私钥的绝对路径>
ssh -i <已下载的与实例关联的私钥文件的路径> @

域名

注册域名购买腾讯云域名，等几分钟后服务状态变为正常

开放www：我的域名-解析-添加记录

ssl证书申请，十分钟左右完成，下载到本地。

防火墙

添加规则，比如我服务器端口为3000，这里如下配置：

添加规则

安装

• apt-get
  更新 sudo apt-get update

• wget
  安装 sudo apt-get install wget
  查看版本 wget --version

• node.js
  安装 sudo apt-get install nodejs
  查看版本 node -v

• npm
  安装 sudo apt-get install npm
  查看版本 npm -v

• rz、sz，用于Mac和服务器间文件传输
  参考
  Mac上传至服务器 sudo rz，选择文件
  服务器上传至Mac sudo sz 目标文件路径，选择本地路径

• zip/unzip
  安装 sudo apt-get install zip
sudo apt-get install unzip
  压缩当前文件夹下所有文件 sudo zip -r 文件名.zip 目标路径

• express
  全局安装 sudo npm install express-generator -g
  若安装失败，尝试清除缓存 sudo npm cache clean --force

• nginx
  安装 sudo apt-get install nginx
  查看版本 nginx -v
  重启 sudo nginx

可能用到的命令

• 新建文件夹 sudo mkdir 文件名
  删除文件夹 sudo rm -rf 文件名
• 移动a文件下所有文件到b sudo mv a/* 目标文件名b
  移动a文件下文件名格式为X??文件到b sudo mv a/X?? 目标文件名b
• 查询端口占用 sudo netstat -tunlp|grep {port}
  释放端口 sudo fuser -k {port}/tcp
  杀死进程 kill -9 {PID}

部署

Express

1. 本地初始化项目
   参考
   

   项目结构

2. ./bin/www：设置https，配置SSL

var https = require('https');
var fs = require('fs');
var path = require('path');

var privateCrt = fs.readFileSync(path.join(process.cwd(),'相对路径.crt'),'utf8');
var privateKey = fs.readFileSync(path.join(process.cwd(),'相对路径.key'),'utf8');
const HTTPS_OPTOIN = {
  key: privateKey,
  cert: privateCrt
};
const SSL_PORT = 3000;
const httpsServer = https.createServer(HTTPS_OPTOIN, app);
httpsServer.listen(SSL_PORT, () => {
  console.log(`HTTPS Server is running on: https://localhost:${SSL_PORT}`);
});

3. 加一个测试接口

(1). 定义接口：./routes/testGetSth.js

var express = require('express');
var router = express.Router();

router.get('/', function(req, res, next) {
  res.send('Hellooooo QqqqqqHT ٩(˃̶͈̀௰˂̶͈́)و   ');
});

module.exports = router;

(2). 匹配路由和接口：./app.js

var testGetSth = require('./routes/testGetSth');
app.use('/testGetSth', testGetSth);

(3). 压缩项目文件.zip后sudo rz放到服务器目标目录

(4). 解压 sudo unzip 文件名.zip

(5). 进入项目目录，安装依赖 npm i

(6). 运行 npm start

(7). 测试

测试成功

Nginx配置

1.上传ssl证书至自定义目标目录

2. 配置ssl，进入目录：/etc/nginx/sites-available/，修改default文件 sudo vi default

server {
    
    listen 443 ssl;
    root /webserver/server; 

    index index.html index.htm index.nginx-debian.html;

    server_name 域名;
        
       
    ssl_certificate           crt路径;
    ssl_certificate_key       key路径;
        ssl_session_timeout       5m;
        ssl_protocols             TLSv1 TLSv1.1 TLSv1.2;
        ssl_ciphers               ECDHE-RSA-AES256-GCM-SHA384:ECDHE-RSA-AES128-GCM-SHA256:DHE-RSA-AES256-GCM-SHA384:ECDHE-RSA-AES256-SHA384:ECDHE-RSA-AES128-SHA256:ECDHE-RSA-AES256-SHA:ECDHE-RSA-AES128-SHA:DHE-RSA-AES256-SHA:DHE-RSA-AES128-SHA;
        ssl_session_cache         shared:SSL:50m;
        ssl_prefer_server_ciphers on;

    location / {
        # First attempt to serve request as file, then
        # as directory, then fall back to displaying a 404.
        try_files $uri $uri/ =404;
    }
}

3.检查nginx配置文件语句 sudo nginx -t
4.重启nginx sudo nginx

微信小程序

1. 初始化
   微信开发者工具，填入小程序AppID，开发模式：小程序，后端服务：不使用云服务 新建

   
   
   创建小程序

项目结构

2. 配置服务器域名：
   微信公众平台登录小程序，开发-开发设置-服务器域名

   
   
   域名需带端口号

3. 增加点击事件：

./pages/index/index.wxml

  
    click me
  

  
    {{motto}}
  
  

./pages/index/index.js

clickMe() {
    wx.request({
      url: 'https://域名:3000/testGetSth',
      method: 'GET',
      data: {
      },
      success: (res) => { 
        this.setData({
          motto: res.data
        })
        console.log(res)
      },
      fail: (e)=> {
        wx.showToast({
          title: 'error',
          icon: 'none'
        })
        console.error(e);
      }
    });
  }

4. 测试效果：

   
   
   小程序效果