记录折磨了自己俩天的项目部署到服务器并通过axios请求后台数据(无数据库)的问题
看了很多很多回答,说实话很失望,没有一篇是完完整整的,所以我决定给大家说一下完整的步骤,nginx部署网站就不说了,自行百度。
1.掌握node.js中编写接口的知识,学习express(基于node封装的专门用来创建 Web 服务器的),简单理解就是比写原生更加简单。
(1)创建一个文件夹,进行初始化
$ npm init
(2)在项目中安装依赖(建议指定版本,也可不指定)
$ npm i express@4.17.1
(3)创建web服务器(基本格式如下),这里的router是另apirouter.js文件(注意要引入),意为访问需带有/api前缀,便匹配到apirouter.js下的请求中,这样不在主文件app.js中直接写请求,结构更加清晰一点。
//1.引入express const express = require('express') //2.创建实列 const app=express() //解决跨域 var cors=require('cors') app.use( cors ({ "origin": "*", "methods": "GET,HEAD,PUT,PATCH,POST,DELETE", "preflightContinue": false, "optionsSuccessStatus": 200 }) ) //配置解析表单数据的中间件 app.use(express.urlencoded({extended:false})) //导入路由模块 const router=require('./apiRouter') //把路由模块注册到app(router注册为全局中间件) 通过前缀/api可访问路由模块 app.use('/api',router) //请求到来后进入到路由模块匹配路由 app.listen(6666,()=>{ console.log('服务启动在6666端口'); })
2.你所写的这个6666端口就是你axios请求的端口,数据就在这个端口。但是当前开启的是你本地计算机上的6666端口,服务器上得开启这个端口你才能请求到对吧,所以
(1)添加你服务器的防火墙规则
(2)给大家避个坑,我个人认为用不着express框架上传到服务器,这里我只上传了express写的js文件。
(3)由于我是nginx托管我的静态页面,所以就涉及到了代理问题,我自己现在也不是很明白,mark一下,以后好好学习(画大饼)。只需要知道一点,当你的网站地址中带有/api字样时,就要将请求转发给你存取数据的那个端口,它来处理请求并给你返回你请求的接口的数据,这就是代理的作用,附nginx配置图:(遮掉的部分写上你自己的公网ip)
这里的location /xxx写你定义的接口名称,所有带有/api的请求就会转发到6666端口 ,这是最重要的一步!!
最后一步: 你当然可以直接用xshell连接服务器然后node app.js开启端口,但这样你一退出端口也就会关闭,数据自然就访问不到。所以需要热部署(保持一直开启),这里我用的是forever,安装也很简单
npm install forever -g
启动文件:(切换到文件所在目录!)
forever start 文件名.js
启动成功,获取数据成功:(输入你自己服务器的外网ip)
以上是我个人遇到问题的处理经验,有什么不对的地方恳请指正,有什么不懂的也可以评论直接问我,一起学习,一起交流。