如何安装 cmswing ?cmswing 安装部署小白教程
发布于 作者:苏南大叔 来源:程序如此灵动~
cmswing系统,是基于thinkjs的一款cms作品,作者@阿特,江湖人尊称@特总。特总非常认真负责,在群里经常解答苏南大叔的初级问题,这个是非常令人钦佩的。cmswing是码云评选的GVP项目,至于GVP到底是什么,苏南大叔其实也不明白,反正就是很厉害的意思了。

作为学习nodejs网站项目的一个范例,苏南大叔研究学习特总的cmswing代码,也有几个月的时间了。所以,其实是有很多相关经验想法要说的,本文写下些cmswing的安装部署经验,以飨读者。本文里面,当然也有对cmswing的小小吐槽,特总见谅。
下载cmswing
cmswing的下载地址有github和码云两个地址:
github地址是:https://github.com/arterli/CmsWing- 码云的地址是:https://gitee.com/arterli/CmsWing
下载代码的时候呢,有个小小的注意事项,当然也是新人必掉大坑,就是:千万不能下载release版本,那两个release版本都是有很大问题的版本,下载好之后,进不去后台啦,各种bug了,你懂的。要下载master版本代码!bug最少最靠谱!


下载好代码之后呢,我们需要稍稍审视一下这些文件夹,苏南大叔用箭头大概分了几类,目前新手们可以先看看,整篇文章看完之后,就会明白为什么了。

这里,苏南大叔就想吐槽一下/www/upload/这个文件夹,特么的里面一堆别人上传的图片,好不好。60多M,好不好。里面很多很私人的图片,好不好。吐槽完毕,苏南大叔优雅的按了一下,从某东购买的二十块钱的高档键盘上面的del键。当然,各位cmswing粉丝,想在里面寻找特总的蛛丝马迹的话,推荐您仔细观赏每张图片。

安装环境
说实话,相比较php代码,node代码的部署,是相当复杂的,新手的话,一时半会是搞不定的。不过,认真查看苏南大叔的每篇教程,您就会有好的收获,秘籍都告诉你了,你一定记得每天来看哦。
如果您仅仅是想测试一下cmswing,那么你可能仅仅需要node和mysql。mysql一般不会出什么问题,大家一般都会安装5.6及以上版本。而node的版本,又是下一个大坑,无数新手必掉大坑之一。请安装node8及以上系列,你懂的。7系列是不行的,完全跑不起来。因为低版本node并不支持thinkjs框架里满天飞舞的的await/async。

如果,您是想最终真正的部署上线,那么您至少都需要下面的软件组合:node/mysql/pm2/nginx,当然,pm2和nginx只不过是大多数人的选择罢了,其实有其他替代品的。
pm2里面有新手必掉大炕pm2 save,nginx里面有新手必掉大坑root目录。想不掉坑里面,就跟着苏南大叔的本篇文章仔细往下看。
如何安装node/mysql/pm2/nginx这些软件,苏南大叔就不多讲了,相关链接见下面,大家按着自己的实际情况看一下就好了,安装起来都不是很难。node安装就可以直接去nodejs.org去下载最新安装包即可。
- 《centos7编译安装node环境》 https://newsn.net/say/centos-node.html
- 《node程序的部署神器pm2的基本安装使用》https://newsn.net/say/node-pm2-basic.html
- 《docker安装mysql实例》 https://newsn.net/say/docker-mysql-image.html
- 《如何升级phpstudy自带的mysql》 https://newsn.net/say/phpstudy-mysql-upgrade.html
导入数据库
这个也是新人必掉大坑之一,cmswing没有安装界面!需要手工导入数据库,修改数据库配置文件。项目run起来后,各种有关数据库的报错,都是这里的问题。每天都有很多人问,很崩溃啊。正常的cmswing开发模式的终端提示是这样的:

数据库文件是:根目录下面的cmswing.sql,数据库链接配置文件是:/src/config/model.js。
无力吐槽,cmswing.sql里面一堆示例数据,安装完你就懂了,要是想修改表前缀的话,需要自己先批量替换。然后数据库配置文件名字为啥不叫database.js,而是叫做model.js。这个也是满满的槽点。话说,在php的世界里面,这个文件一般都是叫做database.php啊。
至于配置文件怎么修改,苏南大叔就不说了,大家都会修改。

自己新建个数据库,数据库名字你高兴就行,导入sql文件,你高兴怎么导入就怎么导入。如果用软件导入报错的话,就使用mysql的source命令导入,安全可靠没有副作用。里面注意字符集编码,选择utf8mb4,最省心安全。




在数据库里面,苏南大叔着重建议大家看一下下面这些表,cmswing_docuemnt*系列表,是放置文章的。cmswing_member是放置用户数据的。为啥特别提出这些表,请大家继续看后面的内容。


这里有一篇苏南大叔的独家秘籍,是有关cmswing数据库对比升级的经验文章,大家下一次升级数据库的时候,就会用到了,这里提前给大家放在这里,自取即可。这里是另外一个槽点:升级居然没有给update.sql,让我等小白情何以堪。cry~
- 《navicat的数据库结构对比同步功能》 https://newsn.net/say/navicat-structure-sync.html
安装node依赖
这里,终于轮到node上场了,在这里,还是有一部分人掉坑里面的。那就是npm install这个命令,有些人需要借助淘宝镜像才能完成安装,或者您直接科学上网。这里就有了下一个解决方案,cnpm和yarn。这两个东东,大家可以查看苏南大叔的文章,这里呢,苏南大叔推荐您,先试试npm install,搞不定的话,再试试cnpm或者yarn,推荐使用cnpm。

npm install安装的时候,会出现一些警告内容,无视即可。在npm的世界里面,这些都很常见的。

- 《cnpm的那些事儿》 https://newsn.net/say/cnpm-registry.html
- 《如何更换npm的默认registry》 https://newsn.net/say/npm-registry.html
- 《win环境,如何优雅地升级yarn》 https://newsn.net/say/win-yarn-update.html
- 《yarn vs npm》 https://newsn.net/say/yarn-vs-npm.html
依赖包安装好之后,根目录下面就会凭空出现个node_modules文件夹。不用去看里面的东西,看不懂的,都是一些依赖包,看了心烦,还是不看的好。这个就是你在这一步骤的成果,可以先欣赏几分钟喘口气。哈哈~

运行dev版本的cmswing
一般来说,我们执行的是npm start,不过熟悉package.json文件的同学,都知道,这个命令实际上是定义在package.json中的scripts里面的,也就是node development.js。知其然要知其所以然嘛,对吧?


不出意外的话,终端里面就会提示你,运行ok啦,可以访问页面了。大家就可以本机访问:http://127.0.0.1:8360,来查看cmswing的宏伟身影了。
当然,这个就又有一个大坑,端口号:8360。无论你是否更改这个端口号,您都应该记住端口号是什么,在后面要使用到它。
- 这个端口号其实是
thinkjs里面的默认端口号,如果你想修改的话,是在src/config.js里面增加一条port来更改的。注意:是新增一条,而不是修改一条。例如:苏南大叔在这里就修改的是新端口号8888。注意,为了复合语法规范,您可能需要在上面一条记录的最后增加一个逗号,见下图中的绿色箭头。 - 端口号是
8360,不是8630,要牢记这端口号,有用的。很多人会错误的以为是8630,在这里掉坑。
如果您修改了端口号,需要重新npm start一下,才会生效。

进入后台
后台地址是/admin/index,用户名是admin,密码是123456。

再一次无力吐槽,这个后台的地址,无人能够猜到,不是/admin,而是/admin/index。见惯了thinkphp的兄弟们肯定转不过弯,这两个地址不是一样的嘛?答案在这个cmswing的世界里面,就不是一个地址。这个,无力吐槽。稍稍的ps一下,下面的这个报错界面是不是涉嫌抄袭thinkphp的经典错误页面呢?

进入后台之后呢,大家就可以感受一下:后台的一堆测试数据了。苏南大叔是看的眼花缭乱啊,特别是里面的466名默认用户,真真的是震惊了。不知道都有哪些大神的密码,加密存放在数据库里面啊,真想给撞库一下试试看?

anyway,您可以通过后台或者数据库,把多余的数据给删除掉,文章类的数据表是:cmswing_document一组表,用户的数据表是cmswing_member,你要保留第一名用户admin哦,否则进不去后台,就哭了。对吧。大家可以回去最上边看数据表导入的那一节内容哦。

修改代码及皮肤
然后就是按着自己的逻辑修改cmswing的代码了,相关文件是:
src/controller/*,分别放置的是主要的数据层面逻辑。view/*,这个是模板文件。www/*,这个是静态资源文件。

当然,修改数据逻辑的话,可能还会涉及到src/下面的其他js文件,不单单会是controller。而模板呢,默认的模板引擎是nunjucks,反正苏南大叔是觉得挺难用的,但是特总说很好很强大,知道真相的我,眼泪掉下来啊。关于cmswing模板制作的文章,目前苏南大叔还没有写过,敬请期待~
最邪门的就是www/*,这个存在静态资源的文件夹,很多诡异的事情,都出现在这个。当然了,如果你中规中矩的话,记住苏南大叔的建议,是不会出问题的。建议就是:都放在www/static/下面,不要试图直接放在www/下面,dev模式下会刷新你的世界观的。
最后上线部署,切换到production模式的时候,这里的静态资源文件,有一定的概率,会404。但是不要害怕,看下面的这篇文章,里面有解决方案。
- 《thinkjs生产模式下,静态资源文件404问题的解决方案》 https://newsn.net/say/thinkjs-resource-404.html
在编辑器里面,如果碰到代码提示一片飘红的时候,记得来读一下这篇文章,这里有答案。
- 《以cmswing为例,说明webstrom如何配置eslint》https://newsn.net/say/eslint-webstorm-cmswing.html
上线部署之pm2
等待了半天的pm2和nginx上场,新的大坑也随着到来。先说pm2,如何安装pm2请参见苏南大叔的文章(见下面)。pm2所需要的pm2.json文件,就静静的躺在代码根目录下面,但是!你需要修改这个文件,才可以正常运行。
- 《node程序的部署神器pm2的基本安装使用》https://newsn.net/say/node-pm2-basic.html
打开这个文件,特么的找到name,换成个你喜欢的英文名吧。然后看一下cwd,这个么,写的是特总的本机路径.......苏南大叔弱弱的表示:可以写成当前路径./么?注意,里面的production.js的字样,启用之后,可就切换到生产模式了哦~ 不是普通的开发模式了哦~ 新的大坑要出现了哦。

当然,对于pm2.json里面的其他参数,苏南大叔个人不建议你修改。如果你喜欢,可以参考这篇文章。
- 《pm2 start命令进阶详解》 https://newsn.net/say/node-pm2-start.html
写成当前路径之后,我们需要先cd到根目录,然后再执行命令pm2 start pm2.json。注意这里的新手大坑,说多了都是泪啊。
- pm2安装完毕后,要执行
pm2 startup,下次重启服务器的话,才会自动运行pm2。这条命令要在pm2 start pm2.json之前运行! - 正常的
pm2 start pm2.json之后,需要再次执行pm2 save,pm2才能识别这个项目。否则重启服务器之后,pm2启动了,但是这个项目并不会启动。

上线部署之nginx
这里也满满的都是套路,需要先使用nginx -t找到nginx的配置文件位置,确定启用了server/*,见下图。然后到server目录下,随便新建个conf文件,文件名叫什么就不重要了,你高兴就行。然后把cmswing源码根目录下面的nginx.conf文件的内容,复制过去,然后就是修改里面的内容。
注意:上述描述中的server目录,在mac下面叫server。在centos上面,叫做conf.d。不排除还有其它的名字,不过原理都一样,大家要随机应变哦。



一般来说就是修改name,root,还有端口号8360。
server_name就是你的最终部署的域名,当然,如果你没有的话,还是测试的话,就可以像苏南大叔一样,在hosts文件里面虚拟一个假的域名。- 如果你在pm2那一步没有修改端口号的话,就不用修改
port。 - 但是一定要注意
root,一定要指向源码根目录下面的www文件夹!

- 《nginx代理基于thinkjs的node网站》https://newsn.net/say/nginx-thinkjs.html
- 《如何测试apache和nginx的配置是否正确》https://newsn.net/say/apache-nginx-conf.html
保存配置文件,nginx -s reload重载配置,如果一切顺利的话,你就可以再次看到cmswing的伟岸身影了。当然,这个时候,很多人会说,为啥图片样式都失踪了404啊。别急,请看下面这篇文章。这里有你的答案。注意,这个时候,如果你还访问node的8360端口的话,看到的应该是静态资源404了。
- 《thinkjs生产模式下,静态资源文件404问题的解决方案》 https://newsn.net/say/thinkjs-resource-404.html
在这里,苏南大叔总结一下:
- 开发模式,使用的是
development.js,8360端口访问,静态资源由中间件控制访问。 - 生产模式,使用的是
production.js,实际上是在pm2.json里面指定的。静态资源是由80端口nginx处理的。8360的话,就跳过了nginx。而此时,因为是生产模式,中间件的静态资源访问功能完全失效。
恭喜你,顺利毕业了。恭喜你顺利走向下一个新的cmswing征程~~~
总结
能够成功运行起这个cmswing,其实也是过五关斩六将的。比起世界上最好的语言php的源码安装来说,确实要复杂多了。哈哈哈~~ 在接下来的博文中,苏南大叔可能会写一些有关cmswing模板制作的问题。欢迎大家关注。
更多cmswing的文章,请点击苏南大叔的经验博客文章。
可以
感谢哈
好!