寻觅

到这里我们会议系统的学习和实战算是整体告一段落了，接下来的两节课，我们将写好的会议系统部署到线上，以及学习在部署过程中需要注意的一些问题。

部署之前，我们需要准备好项目中用到的一些服务的配置。

基础配置注意事项

会议系统需要获取用户的摄像头、麦克风等敏感设备信息，访问协议必须是HTTPS（《02| 基础（一）：Web 端基础 API 学习》章节详细介绍过），因此部署后必须配置SSL证书。再一个就是需要特别注意线上部署后云服务器安全组开放的问题，默认购买云服务器后，是无法直接访问特定端口的，必须在对应厂商的控制台安全组中开放端口才可以。

信令服务

我们在学到第一种 Mesh多人会议架构时用到了信令交换服务器，信令服务器是 WebRTC基础信令交换的核心，因此会议系统前端部署之前，我们必须配置好信令服务器。

//获取当前项目访问协议
const protocol = window.location.protocol === 'https:' ? 'wss://' : 'ws://'
const host = window.location.host
const server = protocol+host
//根据环境自动选择服务器配置
let serverSocketUrl = process.env.NODE_ENV === 'development' ? 'ws://127.0.0.1:18080' : server
Vue.prototype.$serverSocketUrl = serverSocketUrl;

请注意我上面的服务器地址配置，获取的是当前访问的 IP 或域名的基础信息，比如当前的前端项目打包后被部署到域名https://www.xxxxx.zyx下，那么信令服务地址则是：wss``://www.xxxxx.zyx，而如果本地访问则地址是ws://127.0.0.1:18080。

当然我上面的配置是因为信令服务器和前端项目在同一个域名路径下，如果大家的信令服务器和会议前端不在一块部署，则自己可以将serverSocketUrl变量替换为自己的信令服务器，但是请注意 跨域和访问协议的问题，如果你的会议前端访问协议为 HTTPS ，那么这里的信令服务地址必须为 HTTPS，相关知识参考。

在我们的课程中为了避免部署的繁琐，我一开始就在信令服务器配置了静态文件夹映射，因此你可以直接将打包后的前端静态文件放到指定文件夹，然后直接访问信令服务器的 IP端口即可，线上部署之后，通过nginx直接映射信令服务器的端口。

信令服务和静态文件映射部分配置 ：

//http server 这里配置前端打包后的静态文件 
app.use(express.static('./dist'));
app.use(function (req, res,next) {
  res.sendfile('./dist/index.html');  //路径根据自己文件配置
});
var server=http.createServer(app)
//socket server
let io = require('socket.io')(server,{allowEIO3:true});

//自定义命令空间  nginx代理 /mediaServerWsUrl { http://xxxx:18080/socket.io/ }
// io = io.of('mediaServerWsUrl')
server.listen(18080, async() => {
  console.log('服务器启动成功 *:18080');
});

Nginx 映射配置 ：

server {
  server_name www.xxxxx.zyx;
  listen 443 ssl http2;
  ssl_certificate /home/nginxWebUI/letsebcrypt/cert.crt;
  ssl_certificate_key /home/nginxWebUI/letsebcrypt/private.key;
  ssl_protocols TLSv1 TLSv1.1 TLSv1.2 TLSv1.3;
  listen 80;
  # http重定向到https
  if ($scheme = http) {
    return 301 https://$host:443$request_uri;
  }
  location / {
    proxy_pass http://127.0.0.1:18080/; # 这里就是信令服务启动的服务地址
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Host $http_host;
    proxy_set_header X-Forwarded-Port $server_port;
    proxy_set_header X-Forwarded-Proto $scheme;
    ## 信令核心配置 必须开启支持 websocket 
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
    proxy_redirect http:// https://;
  }
}

WebRTC 网关服务器配置

第二种 SFU 架构会议系统中，我们用到了Janus网关服务器，因此抽取全局变量后如下：

//Janus地址
// 如果为dev环境 直接配置绝对路径 否咋配置相对路径（如果前端不在janus所在服务器 则直接用映射后的地址 ）
Vue.prototype.$janusServerUrl = process.env.NODE_ENV === 'development' ? 'https://www.xxxxxx.zyx/suke-janus/janus/' : '/suke-janus/janus/'

Nginx 代理配置（注意上下对比看代理路径：代理前的 Janus地址：http://x.x.x.x:18088）：

 location /suke-janus {
    proxy_pass http://x.x.x.x:18088/; ## 这里配置网关 janus地址  
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Host $http_host;
    proxy_set_header X-Forwarded-Port $server_port;
    proxy_set_header X-Forwarded-Proto $scheme;
    proxy_redirect http:// https://;
  }

项目中变量引用：

janus = new Janus({
        server: that.$janusServerUrl,//全局配置
        apisecret:'suc119119',//这个变量也可以弄成全局的
        success: function() {
                        Janus.log("初始化成功")
                        that.initVideoRoomPlugin()
        },
        error: function(cause) {
        //异常显示
                        Janus.log(cause)
        },
        destroyed: function() {
                        Janus.log("destroyed")
        }
});

网络穿透服务器配置

STUN和TURN配置。如果你的项目部署在公网，这个配置是不可避免的，毕竟全球各地的网络状况是复杂多变的。同时如果你的客户是针对国内外的，那么强烈建议使用中继，即 TURN服务器，作为流量中继，而 TURN服务部署位置选择国内外都可以访问的区域，比如购买区域在香港的云服务器。

rtcPcParams:{
 iceServers: [
        { url: "stun:stun.l.google.com:19302"},// 谷歌的公共服务
        {urls: 'turn:x.x.x.x:3478', username:'suc', credential:'suc001'},//turn服务 自建 可以配置多个
        ]
},

---------------参数调用位置-----------------
pc = new PeerConnection(this.rtcPcParams)

流媒体服务地址配置

//SRS相关地址
Vue.prototype.$srsServerAPIURL = 'http://192.168.101.99:1985/';
Vue.prototype.$srsServerRTCURL = 'webrtc://192.168.101.99:8085/live/';
Vue.prototype.$srsServerFlvURL = 'http://192.168.101.99:8085/live/';

上面三个地址为全局变量，代码中也是通过全局变量引用。

//推流SDP交换
axios.post(this.$srsServerAPIURL+'rtc/v1/publish/',data)

上面配置的地址，如果你线上使用的HTTPS协议，那么项目内部API请求也需要配置HTTPS，同样可通过nginx代理。

服务器端口配置

我们在会话过程中会遇到很多端口，部署到线上阿里云、腾讯云等云厂商服务器后，需要去安全组开放特定的端口，这样外部才能进行访问。这里我将常见的需要大家注意的端口着重说明下：

信令服务器端口：项目中默认配置的18080，大家可以自定义，然后在安全组放行。

WebRTC 网关 Janus 服务 API 端口，示例中为18088，安全组需要放行。

Janus 网关 RTP 数据交换端口。

coturn服务端口，看下图红色框框中的端口配置。

实战部署

前端项目打包。

npm run build

打包好的dist文件夹放到和信令服务同目录。

启动信令服务。

> node app.js
服务器启动成功 *:18080
redis 连接成功

浏览器输入信令服务 IP+端口。

Nginx代理并绑定域名，注意域名配置成自己的，下面示例为我的线上域名。

server {
  server_name nrtc.wangsrbus.cn;
  listen 443 ssl http2;
  ssl_certificate /home/nginxWebUI/letsebcrypt/cert.crt;
  ssl_certificate_key /home/nginxWebUI/letsebcrypt/private.key;
  ssl_protocols TLSv1 TLSv1.1 TLSv1.2 TLSv1.3;
  listen 80;
  # http重定向到https
  if ($scheme = http) {
    return 301 https://$host:443$request_uri;
  }
  location / {
    proxy_pass http://127.0.0.1:18080/; # 这里就是信令服务启动的服务地址,看上一步访问地址
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Host $http_host;
    proxy_set_header X-Forwarded-Port $server_port;
    proxy_set_header X-Forwarded-Proto $scheme;
    ## 信令核心配置 必须开启支持 websocket 
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
    proxy_redirect http:// https://;
  }
}

SSL 证书自动签发

SSL证书有收费的，也有免费的。一般而言，我们在云厂商都可以针对单个域名免费申请 20 次且每次期限一年的SSL证书（下面是腾讯云的截图）。

我们的目的肯定是能自动化就自动化，方便维护。这里推荐一个工具：acme (Github地址)。通过此工具，我们可以自动申请和续期免费的SSL证书。

工具下载安装

# 注意下面的邮箱换成你自己的
curl https://get.acme.sh | sh -s email=1215618342@qq.com

开启自动更新

acme.sh --upgrade --auto-upgrade

切换 CA 类型

目前 acme.sh 支持四个正式环境 CA，分别是 Let's Encrypt、Buypass、ZeroSSL和 SSL.com，默认使用 ZeroSSL。我们一般使用Let's Encrypt就可以，既支持单域名，也支持通配符多域名证书（虽然通配符类型证书时间仅有3个月，但是好在我们有这个工具）。切换LE类型命令如下：

acme.sh --set-default-ca --server letsencrypt

泛域名仅支持 DNS 验证

申请 API 密钥(DNSPod Token) 腾讯云API Key申请，每个厂商的DNS验证参数配置是不一样的额，如果你的域名不是腾讯云的那么请查看此文档。然后编辑 acme工具配置信息，如下：

cd ~/.acme.sh
vi account.conf
## 添加如下 dnspod 密钥
export DP_Id="xxxx"
export DP_Key="12222222222"

证书申请

注意下面参数：dns_dp表示用腾讯云 dnspos验证 -d webrtc.link -d *.webrtc.link表示域名，自己的请配置自己的域名

acme.sh --issue --log --dns dns_dp -d webrtc.link -d *.webrtc.link --key-file /home/nginxWebUI/letsebcrypt/private-rtclink.key --fullchain-file /home/nginxWebUI/letsebcrypt/cert-rtclink.crt

执行脚本后，观察域名解析信息，可以看到会自动增加两条解析：

申请成功则会打印如下：

我们访问配置对应证书后，查看浏览器对应提示：

课后题

这节课后大家主要练习对于会议系统的部署，实际上大多数项目的部署都是如此，学会一种，后续自己的其他项目部署也是得心应手。对于自动签发SSL证书，大家可以多找几个域名试试，去找一年两三块钱那种多练习练习即可。

基础配置注意事项 ​

信令服务 ​

WebRTC 网关服务器配置 ​

网络穿透服务器配置 ​

流媒体服务地址配置 ​

服务器端口配置 ​

实战部署 ​

SSL 证书自动签发 ​

工具下载安装 ​

开启自动更新 ​

切换 CA 类型 ​

泛域名仅支持 DNS 验证 ​

证书申请 ​

课后题 ​