本项目是前端蠢萌,想要了解下前端+后端分离的全栈项目的基本运作而整的。
本项目的技术架构大概是koa2+vue2
1 项目文件结构
首先,采用vue_cli脚手架创建了一个vue项目;本项目的基本目录结构就如一般的vue_cli脚手架创建的项目那样,不一样的地方主要在于新建了一个目录server,这个文件夹主要用来存放koa后端的一些文件,它的文件目录大概如下:
对上诉server目录下的文件结构说明如下:
---DBconn:new一个Sequelize,来连接数据库
---DBmodels:定义数据表模型、数据表连接关系,并利用sequelize.sync来同步数据库
---service:与数据库表相关的操作,如增删查改等
---controllers:api接口的定义,通过这些接口去调用操作数据库表的方法(定义在目录`service`中的),以便在前端中去调用这些接口
---middleware:定义一些koa会使用到的一些中间件;如importantcontroller.js用来把`controllers`中定义的接口引入
---app.js:后端服务的入口文件;如在package.json中定义的`start`命名,就是通过`nodemon server/app.js`在启动后端服务
2 项目启动
参见项目中的package.json文件(前端模块、后端模块分别维护了各自的package.json文件)
(1)启动后端服务:npm run start
(2)启动前端服务:npm run serve
ps:本地启动的后端服务监听的是端口3000,而前端是8080端口;所以在vue.config.js中增加了如下代理,就能进行本地接口调用开发了:
3 项目中的jwt登录验证
(1)做token权限控制,排除不需要进行token校验的path,比如login;其他的接口则需要进行token校验的,即需要通过token校验中间件./middleware/tokenVerify
(2)login不需要经过token验证,登录成功后,会签发token,以便其他接口携带去进行token校验
(3)tokenVerify里面的token校验逻辑
4 项目部署
4.1 服务器中安装Node
(1)下载Node安装包,放到服务器/usr/local/node;在/usr/local新建一个node目录mkdir node
(2)解压缩node安装包,tar -vxf node-v14.17.0-linux-x64.tar.xz
(3)配置环境变量,ln -s /usr/local/node/node-v14.17.0-linux-x64/bin/node /usr/local/bin/node、ln -s /usr/local/node/node-v14.17.0-linux-x64/bin/npm /usr/local/bin/npm
4.2 服务器中安装mysql
(1)下载mysql安装包 wget http://repo.mysql.com/mysql80-community-release-el7-1.noarch.rpm
(2)安装软件包到yum库rpm -ivh mysql80-community-release-el7-1.noarch.rpm
(3)安装软件 yum install mysql-server
使用mysql
service mysql start :启动mysql服务
service mysql status:查看服务状态
service mysql stop:停止服务
service mysql restart:重启服务
service mysql status:查看服务状态
mysqladmin -u root password "new_password":为root用户更改密码
mysql -u root -p:用密码登录root用户
4.3 在云服务器部署服务的记录
由于本人从未接触过部署,所以整个部署过程是通过一系列的尝试去发现“新鲜”事物的
(1)将项目源代码,整个拷贝到服务器中,像在本地开发那样的启动,是可行的
ps :这次尝试其实不算是部署的内容,但却是本蠢萌新人学步之路上,对于神秘的服务器,相对于本机电脑的一次类比认知;所以写在这里了
(2)使用koa-static管理静态资源
首先,需要将vue.config.js里面的:publicPath的值改为./;
其次,在Koa的app.js主文件里面加上koa-static这个中间件使用
constpath=require('path')
constkoa-static=require('koa-static');
app.use(koa-static(path.resolve('dist')));
最后,使用koa-server-http-proxy代理。【因为build打包后在vue.config.js里面的代理就不起作用了,需在服务器配置下代理】
// 使用koa-server-http-proxy代理
constkoaServerHttpProxy=require("koa-server-http-proxy");
app.use(koaServerHttpProxy("/api",{
target:"http://localhost:3000",
pathRewrite:{'/api':''},
changeOrigin:true
}));
(3)使用nginx反向代理
本项目的前后端的包管理是分开的,所以,可以直接把后端模块的目录server搞到服务器去部署;再把前端打包好的dist包放到nginx中去管理就可以了。
服务器安装nginx
使用nginx代理转发请求
(1)将项目npm run build后的dist里的文件,放到/usr/local/nginx/html中;【要注意vue.config.js中的publicPath的值,将其设置为./】
(2)在nginx.conf配置文件中,添加代理配置:
location/api/{
proxy_passhttp://1.117.28.252:3000/; #因为这个最后有斜杠,所以转发后的地址不会把/api带进去了
}
(3)由于前端用的history模式,刷新的时候会404,所以在nginx.conf中可以改下配置:
error_page404/index.html;
(4)由于项目中使用koa-jwt做了鉴权,所以需要在nginx.conf中http块儿中增加如下配置:
add_headerAccess-Control-Allow-HeadersAuthorization;
4.4 主要参考
https://www.icode9.com/content-1-539544.html
https://molunerfinn.com/Vue+Koa/#%E9%A1%B9%E7%9B%AE%E9%83%A8%E7%BD%B2
【B站学习的服务器部署知识】https://www.bilibili.com/video/BV15V411U7Vd?p=2&spm_id_from=pageDriver 笔记如下:
1、申请一个免费的服务器
每个云基本都有免费一个月的服务器试用,可以去试试;搞个centos的
2、部署一个node koa项目到云服务器 => 在云服务器上进行以下操作
(1)安装node
自己电脑上去node官网,选择linux系统的安装包下载
把下载的node安装包传到云服务器上
指定目录下解压node安装包
将node、npm命令b绑定到环境变量
检验是否安装成功:node -v, npm -v
(2)本地写一个Node koa项目
将Node koa项目拷贝到云服务器去
npm install
node app.js就可以去访问这些接口了(但是要注意去云服务器把监听的相应端口放开)
(3)使用pm2
如果不使用pm2的话,如果服务器关了就访问不了了;pm2就来解决这个问题的
云服务器中去node koa项目目录下,去全局安装pm2
绑定pm2的环境变量
运行pm2 start app.js
pm2 list、 pm2 delete {id}就可以把相应id的服务关掉
3、部署一个连接数据库的node项目
(1)服务器安装数据库,开启数据库服务(要一直保持后台启动)
(2)后端项目打zip包,放到服务器的server目录下去启动
4、服务器中安装nginx
将打包好的前端包放到nginx下,就可以通过ip去访问它
5、部署前端项目
(1)build打包下项目
(2)把前端打好的包放到nginx中的/html目录下