我们是袋鼠云数据栈的UED团队，致力于打造优秀的一站式数据中台产品。我们始终保持工匠精神，探索前端道路，为社区积累和传播经验价值。本文作者：六一https://liuxianyu.cn本次分享基于“袋鼠云栈UED团队”新发布的UEDLandingpage的实践。UED登陆页面收集了团队当前的所有基础设施和精选文章。这是团队发光的地方。项目基于next.js、ts、pnpm、koa2、MongoDB等技术方法实现。代码仓库：https://github.com/DTStack/UED，欢迎star。需求介绍Landingpage有一个栏目页面，需要展示团队在掘金社区的过往文章，对应的标签，以及其他社区词条。设计思路基于以上需求分析，进行如下设计：1、通过node-schedule设置一个定时任务，每天请求掘金接口查询最新的文章数据，包括每篇文章的标题、出版商、阅读量、发布日期、标签等；2、将上述方法得到的数据进行处理，存储到MongoDB数据库中，只保留必填字段；3.提供RESTful接口返回页面中的文章和标签列表，用于专栏页面查询；4．页面请求接口，查询标签，文章数据，渲染页面。实现步骤下面的实现步骤比较详细，类似的需求也可以按照下面的步骤来实现。dockerinstallMongoDB1，下载镜像dockerpullmongo2，创建挂载文件夹mkdir-p/opt/dtstack/docker/mongocd/opt/dtstack/docker/mongo3，启动容器dockerrun-v/opt/dtstack/docker/mongo:/data/db--namemongodb-p27019:27017-eMONGO_INITDB_ROOT_USERNAME=root-eMONGO_INITDB_ROOT_PASSWORD='Admin123!@#'-dmongo--auth命令解释-v挂载本地文件夹，存储数据-name到容器指定名称-p表示端口映射，-p主机端口：容器端口，这里不使用相同的端口，防止攻击-e携带密码等参数-d后台运行容器--authMongoDB进行权限验证4.进入容器dockerexec-itmongodbmongoadmin注意：rpcerror:code=2desc=ociruntimeerror:execfailed:container_linux.go:235:startingcontainerprocesscaused“exec:“mongo”:executablefilenotfoundin$PATH”.如果出现以上错误是因为下载的mongodb镜像版本比较高，5.0以上的mongodb版本需要使用mongosh命令，而不是原来的mongo命令。dockerexec-itmongodbmongoshadmin5.验证用户名和密码登录，返回1表示登录成功。db.auth('root','Admin123!@#')6.使用数据库使用登陆DB7。创建数据库管理员db.createUser({user:"landing-user",pwd:"landing-admin.1234",roles:[{role:"readWrite",db:"landingDB"}]})MongoDB不允许多个用户同一个窗口登录，退出再进入终端：db.auth('landing-user','landing-admin.1234')8.创建表db.createCollection('article')db.createCollection('tag')9.测试插入数据db.article.insert({id:1,title:'测试文章标题'})10.连接数据库mongodb://landing-user:landing-admin.1234@127.0.0.1:27019/landingDB通过MongoDBCompass1、使用koa2启动节点服务。在服务入口新建定时任务，每天去掘金获取文章数据//importmoduleconstkoa=require('koa')constschedule=require('node-schedule')//实例化constapp=newKoa()constmain=async()=>{awaitinitDB()//保存文章列表constarticleList=awaitgetJueJinArticleList()awaitinsertArticles(articleList)//保存标签列表consttagList=getTagList(articleList)awaitinsertTags(tagList)}app.listen(envJson.appPort,()=>{console.log(`apprunsonport${envJson.appPort}`)schedule.scheduleJob(cron,main)})2.将查询到的数据存入数据库，处理历史数据const{MongoClient}=require('mongodb')consturl=`mongodb://${username}:${password}@${host}:${port}/${dbName}`constclient=newMongoClient(url)//初始化数据库连接constinitDB=async()=>{awaitclient.connect()console.log('连接成功到mongodb')}//添加查询到的文章列表constinsertArticles=async(articleList)=>{constdb=client.db(dbName)constcollection=db.collection('article')constupdateResult=awaitcollection.updateMany({isDelete:0},{$set:{isDelete:1,updateTime:getDateStr()}})console.log('updateArticles文档=>',updateResult)constinsertResult=awaitcollection.insertMany(articleList)console.log('insertArticlesdocuments=>',insertResult)}3.提供接口从数据库读取数据接口文档constRouter=require('koa-router')constrouter=新路由器（）路由器。get('/api/getTagList',async(ctx)=>{尝试{constdb=client.db(dbName)constcollection=db.collection('tag')constdata=awaitcollection.find({isDelete:0}).toArray()ctx.body={代码：200，数据，消息:'success',}}catch(error){ctx.body={code:1,error}}})编写页面1，页面请求接口，获取文章数据进行渲染，当标签等参数返回时重启和分页变化请求接口useEffect(()=>{constparams={page,pageSize,tag_id,sort_type,}fetch(`/api/getArticleList?${newURLSearchParams(params).toString()}`).then(res=>res.json()).then(res=>{const{articleList,total}=res.datasetArticleList(articleList||[])setTotal(total||[])})},[tag_id,sort_type,page])部署方式一台CentOS服务器，安装node14+、pnpm、pm2、Docker（可选）、MongoDB、nginxmkdir-p/opt/dtstackgitclonehttps://github.com/DTStack/UED.gitcdUEDpnpmipnpmdeploy因为后端服务的接口一般不对外暴露，这里通过nginx转发：#nginx配置登陆#httpserver{listen80;server_nameued.dtstack.cn;位置/{proxy_passhttp://localhost:3004/;}location/api{proxy_passhttp://localhost:3002/api;}}实现http://ued的效果。dtstack.cn/文章
