前端蠢萌初涉全栈（koa+vue）+项⽬部署
本项⽬是前端蠢萌，想要了解下前端+后端分离的全栈项⽬的基本运作⽽整的。
本项⽬的技术架构⼤概是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端⼝；所以在fig.js中增加了如下代理，就能进⾏本地接⼝调⽤开发了：
3 项⽬中的jwt登录验证
（1）做token权限控制，排除不需要进⾏token校验的path，⽐如login；其他的接⼝则需要进⾏token校验的，即需要通过token校验中间件./middleware/tokenVerify
（2）login不需要经过token验证，登录成功后，会签发token，以便其他接⼝携带去进⾏token校验
（3）tokenVerify⾥⾯的token校验逻辑mysql下载后的初次使用
4 项⽬部署
4.1 服务器中安装Node
（1）下载Node安装包，放到服务器/usr/local/node；在/usr/local新建⼀个node⽬录mkdir node
（2）解压缩node安装包，tar -vxf node-v14.17.
（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
（2）安装软件包到yum库rpm -arch.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管理静态资源
⾸先，需要将fig.js⾥⾯的：publicPath的值改为./；
其次，在Koa的app.js主⽂件⾥⾯加上koa-static这个中间件使⽤
constpath=require('path')
constkoa-static=require('koa-static');
app.use(solve('dist')));
最后，使⽤koa-server-http-proxy代理。【因为build打包后在fig.js⾥⾯的代理就不起作⽤了，需在服务器配置下代理】// 使⽤koa-server-http-proxy代理
constkoaServerHttpProxy=require("koa-server-http-proxy");
app.use(koaServerHttpProxy("/api",{
target:"localhost:3000",
pathRewrite:{'/api':''},
changeOrigin:true
}));
（3）使⽤nginx反向代理
本项⽬的前后端的包管理是分开的，所以，可以直接把后端模块的⽬录server搞到服务器去部署；再把前端打包好的dist包放到nginx中去管理就可以了。
服务器安装nginx
使⽤nginx代理转发请求
（1）将项⽬npm run build后的dist⾥的⽂件，放到/usr/local/nginx/html中；【要注意fig.js中的publicPath的值，将其设置为./】（2）在f配置⽂件中，添加代理配置：
location/api/{
}
（3）由于前端⽤的history模式，刷新的时候会404，所以在f中可以改下配置：
error_page404/index.html;
（4）由于项⽬中使⽤koa-jwt做了鉴权，所以需要在f中http块⼉中增加如下配置：
add_headerAccess-Control-Allow-HeadersAuthorization;
4.4 主要参考
【B站学习的服务器部署知
识】www.bilibili/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

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。