文章首发于个人公号：「阿拉平平」
Papercups[1] 是一款开源的实时聊天 Web 应用，用 Elixir 开发。你可以将其理解为一个客服平台，配合聊天组件，可以快速地为网站添加客服功能。本文将介绍 Papercups 的安装和使用方法。
下载安装
从文档来看，官方推荐使用 asdf 安装 Papercups，不过需要提前安装 PostgreSQL、Node、asdf 以及 Erlang 插件，整个过程比较繁琐。
权衡之下，我选择容器来部署。因此在部署前，需要在服务器上安装好 docker 和 docker-compose。
编排文件
目前仓库里中有多个编排文件，这里我选取正式版本来向大家演示。将仓库中的 docker-compose.prod.yml 保存为 docker-compose.yml ，根据实际情况修改以下内容：
version: "3.2"
services:
papercups:
image: papercups/papercups:latest
ports:
- "3000:3000"
- "4000:4000"
command: sh -c "sleep 10 && /entrypoint.sh db createdb && /entrypoint.sh db migrate && echo 'running' && /entrypoint.sh run"
depends_on:
- db
environment:
DATABASE_URL: "ecto://postgres:postgres@db/postgres"
# 可以修改密钥
SECRET_KEY_BASE: "dvPPvOjpgX2Wk8Y3ONrqWsgM9ZtU4sSrs4l/5CFD1sLm4H+CjLU+EidjNGuSz7bz"
BACKEND_URL: "localhost"
MIX_ENV: "prod"
REQUIRE_DB_SSL: "false"
REACT_APP_FILE_UPLOADS_ENABLED: 1
# 填入自己的域名或服务器的 IP
REACT_APP_URL: "app.papercups.io"
db:
image: postgres:alpine
container_name: papercups
ports:
- "5432:5432"
environment:
POSTGRES_PASSWORD: postgres
启动服务
修改好编排文件后，在当前目录运行以下命令启动服务：
docker-compose up -d
服务启动后会拉起两个容器：papercups 和 root_papercups_1，检查下是否都运行正常：
[root@localhost ~]# docker-compose ps
Name Command State Ports
----------------------------------------------------------------------------------------------------------------------------------------------
papercups docker-entrypoint.sh postgres Up 0.0.0.0:5432->5432/tcp,:::5432->5432/tcp
root_papercups_1 /entrypoint.sh sh -c sleep ... Up 0.0.0.0:3000->3000/tcp,:::3000->3000/tcp, 0.0.0.0:4000->4000/tcp,:::4000->4000/tcp
配置 Nginx
Papercups 的组件与平台间通信需要使用 HTTPS 协议，所以我们再配置下 Nginx 服务。
Nginx 的安装就不多做赘述了。需要注意的是，在配置反向代理时，务必开启 websocket 通信，完整的 Nginx 配置如下：
server {
listen 443 ssl;
server_name _;
# 没有域名，可以用自签名证书
ssl_certificate /etc/nginx/ssl/server.crt;
ssl_certificate_key /etc/nginx/ssl/server.key;
ssl_session_timeout 5m;
ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
ssl_prefer_server_ciphers on;
location / {
proxy_pass http://localhost:4000;
proxy_set_header X-Forwarded-For $remote_addr;
proxy_set_header Host $http_host;
# Websocket 通信
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
}
}
启动 Nginx 服务后，在浏览器上输入 https://{ip} 就可以访问 Papercups 了。
使用说明
Papercups 的界面虽然是英语，但是使用并不复杂。接下来，我将和大家演示下 Papercups 的使用方法。
注册与登录
首次访问会跳转到登录页面，由于 Papercups 没有内置账号，所以需要先注册个账号。点击『Sign up』跳转到注册页面：
填好信息，点击『Register』 进行注册：
登录后，Papercups 的界面如下：
建立会话
客服平台搭建完成后，只需在网站上加入聊天组件就可以建立会话。在添加前，可以到『Settings』的『Chat widget』页面自定义组件。
设置组件时，可以点击右下角聊天图标，实时查看效果：
页面下方会根据设置生成相应的代码，将这段代码复制到 <head>
和 </head> 标签中:
加入代码后，我们来测试下聊天功能，先从 Web 端发送个消息：
客服平台接受到消息后会开启一个会话，然后对其回复：
写在最后
我们运营产品时，为网站添加客服功能是不可或缺的，Papercups 则为我们提供了一个很好的开源解决方案。
References
[1] Papercups: https://github.com/papercups-io/papercups
