作为一名h5开发者,我常常不会满足于仅仅写页面业务逻辑和对接后端接口。
(当然,如果是想当摸鱼王,我还是会满足的,哪怕只写一个静态页面,我也满足了。)
我不甘心只看到界面上的这一点区域,我渴望,了解更广阔的世界。
于是乎,就有了搭建自己的个人网站的想法。
使用的工具和技术包括:墨刀-vue-node.js-mysql-navicate-宝塔面板
步骤
以下步骤不用严格按照先后顺序,比如网站备案可能要花很久,可以作为第一步。
又比如,我一边开发,一边有点新想法,我又可以回来修改原型。
毕竟在这里,我是产品经理,是ui设计,是前端,也是后端。即,我可以,为所欲为。
1. 原型
搭建网站首先需要有需求和原型图。
我的网站有哪些内容,我想表达些什么,我想分享些什么,这个难度不低于写作文。
后期这还需要个人不断地思考和延伸,对网站版面进行更新升级。
推荐使用墨刀在线工具,进行原型设计。
2. 设计
有了原型图,就需要进行UI设计,进一步美化页面。推荐使用ps。
不过今天的重点是搭建网站,这里我先偷懒,直接下一步。
3. 开发
开发过程需要三个项目:前端项目,接口项目,后台项目。
前端开发不多说,使用vue全家桶即可。
后端开发这边,要对照原型,先设计数据库,使用navicate建库建表建字段。
然后创建node.js接口项目,使用express框架进行开发。
接口一般标配增删改查,我的习惯是增加用post,删除用delete,修改用put,查询用get。
4. 服务器
项目写完了,本地都可以跑了,下一步肯定是要想办法把它们部署到服务器上了。等等,我还没买服务器呢!
4.1 购买服务器
我买的是腾讯云的云服务器,先买最便宜的就行,我买的1核2GB的,选的是centOS系统,搞活动时买的,好像一年不到100块。
4.2 购买域名
顺便把域名也买了,用.top的就行,价格只需几块钱,比如我买的是hahaha.top。
不过后面域名备案会麻烦点,需要根据邮件和接到的电话,不断调整备案材料内容。
4.3 连接服务器
下载一个服务器连接工具,如finalShell(下载地址:https://www.jb51/softs/717120.html)
输入服务器的ip地址和密码,即可连接成功。
5. 宝塔面板
5.1 安装宝塔面板
yum install -y wget && wget -O install.sh http://download.bt/install/install_6.0.sh && sh install.sh
输入y 就安装,安装完会显示登陆链接,以后就可以在线操作服务器了。
理论上来说,毕竟是linux系统,通过finalShell命令行,可以进行服务器的大部分操作。
但用惯了windows的我,还是更喜欢可视化的界面。所以就要安装宝塔面板。
宝塔面板常用的功能有添加站点、网站、ftp等。
需要先在软件商店里安装apache,pm2管理器,mysql,node环境等。
5.2 添加站点
进入宝塔面板,添加网站。比如我可以添加一个demo.hahaha.top,www.hahaha.top,m.hahaha.top。
添加完成后,进入网站目录,可上传静态文件,如简单的测试html或vue项目打包生成的文件。
注:网站需要dns解析,使得网站域名和ip地址挂钩。需要进入腾讯云,添加解析记录。将刚才添加的demo、m这些都添加到解析记录中。
5.3 添加数据库
在宝塔面板上添加数据库,可以先把本地数据库导出为sql文件,然后上传到线上的这个数据库。
然后在node项目中将连接mysql的账号密码改为线上的。
6.部署
6.1 前端项目
网站项目和管理后台项目,将通过npm run build打包之后生成的文件,上传到指定的网站目录就行了。
6.2 后端项目
先将除了node_modules文件夹之外的node项目文件,上传到某个目录,如/wwwroot/website-api/
使用finalShell进入该文件夹,使用npm install安装依赖。
使用node app.js测试是否启动
当退出该命令后,项目会停止,为了让项目一直启动,可以使用以下命令:
nohup node app.js &
以上命令仍然需要持续连接服务器,如需关闭连接,仍可运行,可采用pm2
pm2 start app.js
这样node项目就好持续运行了,和本地一直开着node app.js一个效果。
注:比如接口项目用的是3000端口,这个端口需要先在云服务器中添加到安全组规则
到这里,基本就完成了,网站可以打开访问,可以请求接口,后台可以修改数据。
更多推荐
前端:搭建自己的个人网站
发布评论