docs: add install example for tailchat (labring#3302)

README_zh.md

@@ -39,6 +39,7 @@ Sealos 是一款以 Kubernetes 为内核的**云操作系统发行版**。它以
 * [在 Sealos 上 运行 WordPress](https://sealos.io/docs/examples/blog-platform/install-wordpress)
 * [在 Sealos 上 运行 Uptime Kuma 拨测系统](https://sealos.io/docs/examples/dial-testing-system/install-uptime-kuma)
 * [在 Sealos 上 运行低代码平台](https://sealos.io/docs/category/low-code-platform)
+* [在 Sealos 上 运行搭建聊天应用](https://sealos.io/docs/examples/social-communication/install-tailchat)
 
 ![](/docs/4.0/img/app-launchpad-zh.png)
 

docs/4.0/docs/examples/social-communication/install-tailchat.md

@@ -0,0 +1,150 @@
+# Quick installation of Tailchat
+
+[Tailchat](https://tailchat.msgbyte.com/) is an open source IM application that is pluggable and easy to expand. Plugin architecture gives Tailchat unlimited possibilities.
+
+Front-end micro-kernel architecture + back-end micro-service architecture makes Tailchat to control any customized/privatized scenarios
+
+Created for enterprises and private domain users, highly free group management and customized panel display allow private domain owners to better display their works, manage users, and build their own brand and circle.
+
+![](../images/tailchat/0.png)
+
+## First, enter Sealos and open "Application Management"
+
+![](../images/tailchat/1.png)
+
+## Create a new application
+
+![](../images/tailchat/2.png)
+
+### Create dependencies
+
+As an enterprise-level application, `tailchat` has the minimum dependencies of `mongodb`, `redis`, and `minio`. Let's create them one by one.
+
+#### MongoDB
+
+For convenience, we will fix one instance and bind it to local storage. The image used is `mongo:4`. Note that because we did not set a password for the database, do not provide network services to the public network. The container exposes port 27017, which is the default database service port. The content is as follows:
+
+![](../images/tailchat/3.png)
+
+Click "Deploy Application" to submit the deployment. Wait patiently for a while, and you can see that the application has started up.
+
+![](../images/tailchat/4.png)
+
+> Note: that the initial allocation of 64m is too small for MongoDB, so I changed it to 128m by modifying the application. Resource allocation can be changed at any time, which is also a convenient feature of Sealos/Kubernetes.
+
+#### Minio
+
+Next, we will create Minio, an open-source object storage service. We can also quickly create it through Sealos's UI. The image used is `minio/minio`. Note that we need to make some adjustments:
+
+- Expose port: 9000
+- Change the run command to: `minio`
+- Change the command parameters to: `server /data`
+- Set environment variables:
+  - MINIO_ROOT_USER: tailchat
+  - MINIO_ROOT_PASSWORD: com.msgbyte.tailchat
+- Local storage: `/data`
+
+The final result is as follows:
+
+![](../images/tailchat/5.png)
+
+Click the "Deploy" button and you can see that the service has started up normally.
+
+#### Redis
+
+Finally, we need to deploy Redis as a content cache and message forwarding. The image used is `redis:alpine`, and the exposed port is `6379`. The final result is as follows:
+
+![](../images/tailchat/6.png)
+
+### Create Tailchat itself
+
+At this point, all the dependencies required by Tailchat have been deployed, as shown below:
+
+![](../images/tailchat/7.png)
+
+Now we can deploy the Tailchat itself. The Tailchat itself will be relatively complex, but because Sealos is purely UI-based, it will not be too complicated.
+
+- Use image: `moonrailgun/tailchat`
+- Expose port: `11000` (remember to open external access)
+- Configure environment variables as follows:
+  ```
+  SERVICEDIR=services,plugins
+  TRANSPORTER=redis://redis:6379
+  REDIS_URL=redis://redis:6379
+  MONGO_URL=mongodb://mongo/tailchat
+  MINIO_URL=minio:9000
+  MINIO_USER=tailchat
+  MINIO_PASS=com.msgbyte.tailchat
+  ```
+
+The final effect is as follows:
+
+![](../images/tailchat/8.png)
+
+After waiting patiently for a while, you can see that the Tailchat service has started up.
+
+![](../images/tailchat/9.png)
+
+## Preview service
+
+First, we can check the availability of the Tailchat service by adding `/health` to the external address provided by the service, such as `https://<xxxxxxxxxx>.cloud.sealos.io/health`. When it starts up, the Tailchat service will return content like this:
+
+![](../images/tailchat/10.png)
+
+This JSON string contains the image version used, node name, system usage, and microservice loading status. Here we can see that my common services, such as `user`/`chat.message`, and some services with plugin prefixes such as `plugin.registry`, have all started up normally, indicating that our server is running normally. Now we can directly access our external address and see that after a short loading time, the page opens normally and automatically jumps to the login page.
+
+![](../images/tailchat/11.png)
+
+Register an account casually, and you can see that we can enter the main interface of Tailchat normally, as shown in the following figure:
+
+![](../images/tailchat/12.png)
+
+At this point, our service has successfully landed in Sealos.
+
+## Scaling service
+
+Of course, as a distributed architecture system, Tailchat naturally supports horizontal scaling. In Sealos, scaling is also very simple. Just modify the number of instances through the change operation:
+
+![](../images/tailchat/13.png)
+
+![](../images/tailchat/14.png)
+
+![](../images/tailchat/15.png)
+
+At this point, when we access `https://<xxxxxxxxxx>.cloud.sealos.io/health`, we can see that we can access different nodes.
+
+![](../images/tailchat/16.png)
+
+## Add Tailchat entry to desktop
+
+Open Terminal, enter `vim app.yml` to create and edit a configuration file
+
+Enter the following content, note that the url should be replaced with the url deployed by yourself
+
+```yml
+apiVersion: app.sealos.io/v1
+kind: App
+metadata:
+  name: tailchat-app-entry
+spec:
+  name: Tailchat
+  icon:
+  type: iframe
+  data:
+    url: <Your url>
+    desc:
+  icon: https://tailchat.msgbyte.com/img/logo.svg
+  menuData:
+    nameColor: text-black
+    helpDropDown:
+    helpDocs:
+  displayType: normal
+```
+
+Press `esc` to exit edit mode, press `:wq` to save and exit vim
+
+Type `kubectl apply -f app.yml` to start the configuration.
+
+After refreshing the page, we can see that our entry appears on the desktop of `sealos`
+
+![](../images/tailchat/17.png)

docs/4.0/i18n/zh-Hans/examples/social-communication/install-tailchat.md

@@ -0,0 +1,180 @@
+# 快速安装 Tailchat
+
+[Tailchat](https://tailchat.msgbyte.com/) 是一款插件化易拓展的开源 IM 应用。可拓展架构赋予 Tailchat 无限可能性。
+
+前端微内核架构 + 后端微服务架构 使得 Tailchat 能够驾驭任何定制化/私有化的场景
+
+面向企业与私域用户打造，高度自由的群组管理与定制化的面板展示可以让私域主能够更好的展示自己的作品，管理用户，打造自己的品牌与圈子。
+
+![](../images/tailchat/0.png)
+
+
+## 首先进入 Sealos 并打开「应用管理」
+
+![](../images/tailchat/1.png)
+
+## 新建应用
+
+![](../images/tailchat/2.png)
+
+### 创建依赖
+
+`tailchat` 作为企业级的应用，最小依赖: `mongodb`, `redis`, `minio`.
+
+接下来让我们来一一创建。
+
+#### mongodb
+
+为了方便起见我们固定一个实例，并且为数据库绑定本地存储。
+
+使用的镜像是 `mongo:4`
+
+需要注意的是因为我没有给数据库设置密码，因此不要对外网提供网络服务。容器暴露端口填数据库默认服务端口 `27017` 即可
+
+内容如下:
+
+![](../images/tailchat/3.png)
+
+点击部署应用提交部署
+
+耐心等待一会，就可以看到应用已经启动起来了
+
+![](../images/tailchat/4.png)
+
+> 需要注意的是初始分配的64m对于mongodb来说实在太小了，所以通过变更应用改为了128m。可以随时分配资源大小这也是sealos/k8s很方便的一点
+
+#### minio
+
+接下来我们创建minio, minio是一个开源的对象存储服务。我们同样可以通过`sealos`的点点点来快速创建
+
+使用的镜像是: `minio/minio`
+
+需要注意的是我们要进行一些调整:
+
+- 暴露端口: 9000
+- 运行命令改为: `minio`
+- 命令参数改为: `server /data`
+- 设置环境变量: 
+  - MINIO_ROOT_USER: tailchat
+  - MINIO_ROOT_PASSWORD: com.msgbyte.tailchat
+- 本地存储: `/data`
+
+最终结果如下:
+
+![](../images/tailchat/5.png)
+
+点击部署按钮同样看到服务已经正常启动起来了。
+
+#### redis
+
+最后我们需要部署redis作为内容缓存与信息转发。
+
+使用镜像: `redis:alpine`
+
+暴露端口: `6379`
+
+最终结果如下:
+
+![](../images/tailchat/6.png)
+
+
+### 创建 Tailchat 本体
+
+此时Tailchat所需要的依赖均已部署完毕，如下:
+
+![](../images/tailchat/7.png)
+
+现在我们来部署 `Tailchat` 本体。
+
+`Tailchat` 的本体会相对复杂一点，不过因为`sealos`纯UI操作也不会太过复杂。
+
+- 使用镜像: `moonrailgun/tailchat`
+- 暴露端口: `11000`(记得要打开外网访问)
+- 配置环境变量如下:
+  ```
+  SERVICEDIR=services,plugins
+  TRANSPORTER=redis://redis:6379
+  REDIS_URL=redis://redis:6379
+  MONGO_URL=mongodb://mongo/tailchat
+  MINIO_URL=minio:9000
+  MINIO_USER=tailchat
+  MINIO_PASS=com.msgbyte.tailchat
+  ```
+
+最终效果如下:
+
+![](../images/tailchat/8.png)
+
+耐心等待一段时间后可以看到`Tailchat` 服务已经启动起来了
+
+![](../images/tailchat/9.png)
+
+## 预览服务
+
+首先我们可以先检查一下`Tailchat`服务的可用性，可以通过外网地址提供的服务后面加上 `/health` 来检查服务可用性, 如: `https://<xxxxxxxxxx>.cloud.sealos.io/health`
+
+当启动完毕后，Tailchat服务会返回如下内容:
+
+![](../images/tailchat/10.png)
+
+这段json字符串中包含了使用的镜像版本，节点名称，系统占用，微服务加载情况。
+
+这里我们可以看到我的常见的服务, 如`user`/`chat.message`以及一些带有插件前缀的服务如`plugin.registry`都已经正常启动起来了，说明我们的服务端是正常运行的。
+
+现在我们可以直接访问我们的外网地址，可以看到经过短暂的加载后，页面正常打开自动跳转到了登录界面。
+
+![](../images/tailchat/11.png)
+
+随便注册一个账号，可以看到我们可以正常进入Tailchat的主界面, 如下图:
+
+![](../images/tailchat/12.png)
+
+至此我们的服务已经成功在 sealos 中落地了。
+
+## 扩容服务
+
+当然，作为一个分布式架构的系统，`Tailchat` 天然是支持水平扩容的。而在 `sealos` 想要实现扩容也非常简单, 只需要通过变更操作修改实例数即可:
+
+![](../images/tailchat/13.png)
+
+![](../images/tailchat/14.png)
+
+![](../images/tailchat/15.png)
+
+此时当我们访问 `https://<xxxxxxxxxx>.cloud.sealos.io/health` 可以看到我们可以访问到不同的节点
+
+![](../images/tailchat/16.png)
+
+## 添加 Tailchat 入口到桌面
+
+打开 Terminal, 输入`vim app.yml`创建并编辑一个配置文件
+
+输入以下内容，注意url要换成自己部署的网址
+
+```yml
+apiVersion: app.sealos.io/v1
+kind: App
+metadata:
+  name: tailchat-app-entry
+spec:
+  name: Tailchat
+  icon:
+  type: iframe
+  data:
+    url: <Your url>
+    desc:
+  icon: https://tailchat.msgbyte.com/img/logo.svg
+  menuData:
+    nameColor: text-black
+    helpDropDown:
+    helpDocs:
+  displayType: normal
+```
+
+按`esc`退出编辑模式, 按`:wq`保存并退出vim
+
+输入`kubectl apply -f app.yml`启动配置。
+
+完毕后刷新页面，此时我们可以看到我们的入口就出现在`sealos`的桌面上了
+
+![](../images/tailchat/17.png)

docs/4.0/sidebar.json

@@ -76,6 +76,21 @@
             "dirName": "examples/ai-applications"
           }
         ]
+      },
+      {
+        "type": "category",
+        "label": "social-communication",
+        "link": {
+          "type": "generated-index"
+        },
+        "collapsible": true,
+        "collapsed": false,
+        "items": [
+          {
+            "type": "autogenerated",
+            "dirName": "examples/social-communication"
+          }
+        ]
       }
     ]
   },