一、事情的缘起
今天一个朋友向我推荐了小红书上的一个视频,我看了一下这是一个在演示TypeWords项目的视频。这个项目是Github上采用vue来编写的一个开源项目。我进入该项目后看到了给出的样例网址2study.top,然后到上面看了一下。我发现这是一个通过打字来练习记单词的网站。页面配的有发音、可以记录打错的单词、还可以收藏单词,通过反复练习错误的单词,直到你全部掌握它的拼写。这里面的词库是开放性的,可以自由上传,也可以选用其中的四级词汇、六级词汇、编程词汇等。软件的界面如下:
软件界面
看到这个网站,感叹作者的设计十分巧妙,就想自己也架设一下。这里要说明的是本人对vue语言一窍不通,更是对node.js,npm了解甚少,唯一知道的是可以通过1panel,利用反向代理架设一个网站。之前我也写过如何用利用1panel架设一个静态的网站:
编辑如何安装1panel并架设一个静态网站4 赞同 · 0 评论文章
今天我就想利用这个机会,借助DeepSeek和Github上的安装指引,来架设一个开源项目。
二、操作过程
1. 准备一台服务器。
首先,我们得有一个Linux服务器,并拿到这经的一个ssh权限,通过FinalShell我们登录到这个服务器上,如下图所示:
SSH登陆服务器
2. 安装Git工具
为了把远程的项目克隆到本地,我们需要安装一个git工具。首先我们要更新一下:
apt update
apt install git
如果实在不会,就可以问一下DeepSeek。
3. 克隆项目到本地
首先,在FinalShell里,我们进入到root的根目录,其实进入服务器后默认就是根目录,然后新建一个目录TypeWords,接下来用下面命令切换到这个目录。
cd TypeWords
然后就用git工具克隆
git clone https://github.com/zyronon/TypeWords
等一会儿就可以看到TypeWords目录里就已经下载好了程序,如下图所示:
克隆安装文件
4. 安装Node.js 和 npm(运行项目依赖)
为了在服务器上运行此项目,我们还需要安装Node.js和npm,同时为了让服务器后台持续运行这个项目,我们还要安装进程管理工具pm2。以上安装可以在root根目录下进行,安装方法如下:
apt install -y git nodejs npm
npm install -g pm2 # 全局安装 PM2
5. 安装项目
首先进入到TypeWords这个目录,安装网站
npm install
6. 启动项目
安装完项目,为了让它能在后台持续运行,我们可以用pm2这个进程管理工具:
PM2 会监控进程,崩溃时自动重启,并记录日志。使用pm2的代码是
pm2 start npm --name "你的项目名称" -- start
这里我们在根目录,运行以下代码:
pm2 start npm --name TypeWords --start
接下来,我们用pm2 list来查询进程,可以看到status是online,占用内存是80.7mb。
pm2管理进程
如果想验证是否成功,可以用以下代码:
pm2 logs
更多pm2的命令可以见下面列表。
pm2 logs # 查看实时日志
pm2 list # 查看运行中的进程
pm2 save # 保存当前进程列表(重启后自动恢复)
pm2 startup # 设置 PM2 开机自启(需 root 权限)
7. 绑定网站
现在,我们可以通过ip:3000这样访问项目,但是这样的网址不容易记,我们需要把它绑定到一个域名上。
于是,我们进入另一台服务器上的1panel中,找到网站——反向代理,建立一个反向代理网站,代理地址就填写我们刚才用到的服务器的ip:3000,域名你可以用自己的域名,并把这个域名解析到1panel所在的服务器IP上。
申请反向代理
然后,我们还要去【网站】同级菜单点【证书】,为域名申请一个免费的证书,这个过程中如果没有Acme帐户,可以免费申请一个。我们在域名的配置当中,添加这个证书。
申请证书
接下来,我们在网站设置里启用HTTPS,选择已有证书,最后一路确定就配置成功了。
添加证书
最后,通过打开网站,可以看到这个项目已经成功运行了。
项目成功运行
三、学后总结
1. 这个项目功能强大,交互性强,但是界面不是特别漂亮,也没有用户管理,换个电脑又得从头再来,所以后期可以优化界面的色彩搭配,添加用记管理系统,记录学生的学习进度,甚至还以加入vip会员系统。
2. 项目在网页端运行没有问题,但是在手机端运行出现界面混乱的情况,后期还需要进一步优化。