前端蠢萌初涉全栈(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端口;所以在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目录下

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,937评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,503评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,712评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,668评论 1 276
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,677评论 5 366
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,601评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,975评论 3 396
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,637评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,881评论 1 298
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,621评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,710评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,387评论 4 319
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,971评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,947评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,189评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 44,805评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,449评论 2 342

推荐阅读更多精彩内容