很久很久以前,就对前后端如何分离,后端如何把代码部署到服务器有浓厚的兴趣,最近在阿里云上申请了一个服务器,试试水吧!
由于前端要调用后端接口,因此我们先介绍后端接口的开发
1. 后端接口开发
1.1 使用 koa-generator 脚手架开发
npm install koa-generator -g //安装koa-generator,利用koa-generator快速搭建Node.js服务器
koa2 my-project //新建一个叫做my-project的koa2项目
cd my-project npm install
npm start //启动项目
localhost:3000 //打开
1.2 定义接口
router.get('/getJson', async (ctx, next) => {
ctx.body = 'json string'
})
router.get('/hello', async (ctx, next) => {
ctx.body = {
title: 'koa2 hello'
}
})
2前端代码开发;
2.1 脚手架的安装
vue较好的脚手架是:vue-cli
具体安装步骤,网上一搜一堆
大概步骤:
确保安装了node webpack
npm install -g vue-cli //全局安装 vue-cli
vue init webpack vue-demo //初始化项目
cd vue-demo //切换到项目目录
npm run dev //启动项目
2.2 连接后端接口
由于要请求后端接口,故要安装 axios
mounted:function(){
this.getData(); //初始化页面时,请求了两个接口 /getJson 和 /hello
},
methods:{
getData:async function(){
axios.get('http://localhost:3000/getJson').then((respone)=>{ //这里使用了异步函数 Promise 的then
this.querydata = respone.data
})
let {status,data} = await axios.get('http://localhost:3000/hello');//这里使用了 async 和 await
this.two = data.title
}
问题一:这样执行后,发现报错: 提示无法跨域的问题。即两个端口不一样。
方法一:修改前端代码:
axios.get('/getJson').then((respone)=>{
this.querydata = respone.data
})
同时修改config/index文件:
proxyTable: {
'/': {
target: 'http://localhost:3000',
changeOrigin: true,
pathRewrite: {
'^/': ''
}
}
}
即把每个请求,做一个代理;但是总觉得,处理跨域应该由服务端来做,因此有
方法二:
前端代码:
const domain = 'http://localhost:3000'
getData:async function(){
axios.get(domain+'/getJson').then((respone)=>{
this.querydata = respone.data
})
}
后端代码,在app.js:
const cors = require('koa2-cors');
app.use(cors());
参考文章: node.js 应答跨域请求实现
这样一个最简单的请求后端接口的实例完成了,这时我们在前端执行 npm run build, 把生成的dist文件夹的内容,放入koa项目的public中:
这时一般app.js中有:
app.use(require('koa-static')(__dirname + '/public'))
若没有,自己填写上,此时再次执行npm run dev,则服务端打开的 http://localhost:3000/#/ 自动成为前端的页面。(区分一下,前端的页面打开的是8080端口)
至此,在本地已经可以跑起来 调用后端定义的接口了,那么接下来如何将其部署到服务器上呢?
3.部署到服务器
首先想到的是 本地客户端 执行
ssh root@39.105.97.173
连接服务器,然后使用 scp -r ./* root@39.105.97.173:/root/www/
我们可以使用工具:Yummy FTP.app 来连接服务器,但是必须保证以下条件:
1)安装nvm/node环境 ;
2)更新yum源;
[1] 首先备份/etc/yum.repos.d/CentOS-Base.repo
mv /etc/yum.repos.d/CentOS-Base.repo /etc/yum.repos.d/CentOS-Base.repo.backup
[2] 进入yum源配置文件所在文件夹
cd /etc/yum.repos.d/
[3] 下载阿里云的yum源配置文件,放入/etc/yum.repos.d/(操作前请做好相应备份)
centos7
wget -O /etc/yum.repos.d/CentOS-Base.repo http://mirrors.aliyun.com/repo/Centos-7.repo
[4]清理
yum clean all
[5]更新缓存
yum makecache
yum install tree -y
yum update -y
3)安装sshd 在云服务器 ECS Linux CentOS 7 下重启服务不再通过 service 操作,而是通过 systemctl 操作。 操作说明如下:
查看状态:
systemctl status sshd.service
启动服务:
systemctl start sshd.service
重启服务:
systemctl restart sshd.service
开机自启:
systemctl enable sshd.service
关闭服务
systemctl stop sshd.service
下面表示已经开启:
4)开启服务器控制器的 安全组配置 打开22端口
5)
注意下面:端口是22 协议选择SFTP
4 启动服务
通过上述方法,把 除了 node_modules 文件夹部署到服务器上,然后在该文件夹下,npm install,执行npm run dev。然后访问 http://39.105.97.173:3000/#/ (注意这里有端口),即可访问到部署的页面!!!