node+express 开发接口,项目开发+部署服务器+配置域

2019-07-18  本文已影响0人  LilyLaw

因工作需求,要用node+express 写一套接口,在此和大家一起了解一下流程

Tips:本文稍长,希望大家耐心看完,从开发到部署,让你在任何一个终端都可以访问自己的接口,一定会对你有所帮助!

开发阶段 创建一个express项目

(1)安装node环境(具体操作请自行查看官网文档 https://nodejs.org/zh-cn/download/
(2)创建文件夹,初始化项目

mkdir myExpressDemo
cd myExpressDemo
yarn init

(3)安装express依赖

yarn add express

(4)开始写接口

此处为了演示,只写两个简单的常用的get和post接口,具体代码如下:

// index.js

const express = require('express');
const app = express();
const bodyParser = require('body-parser');

// 允许跨域访问
app.all('*', function(req, res, next) {
   res.header("Access-Control-Allow-Origin", "*");
   res.header("Access-Control-Allow-Headers", "X-Requested-With");
   res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
   res.header("X-Powered-By",' 3.2.1');
   res.header("Content-Type", "application/json;charset=utf-8");
   next();
});

// 处理http请求,解析
app.use(bodyParser.urlencoded({ extended: false }));

// 定义变量,做为返回数据
let myPost = {method:"post",age:18,name:"lily"}
let myGet = {method:"get",age:20,name:"Jack"}

// get 请求
app.get('/',(req,res)=>{
    res.status(200);
    res.json(myGet);  // 返回处理结果
});

// post 请求
app.post('/',(req,res)=>{
    console.log(req.body);  //获取参数
    res.status(200);
    res.json(myPost);  // 返回处理结果
})

app.listen(3000, () => console.log('Example app listening on port 3000!'))

(5)本地测试
把项目运行起来

node index.js

若出现如下提示则表示运行成功


image.png

写一个简单的html请求一下接口

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <script src="./jquery-2.1.1.min.js"></script>
    <script>
        // post 请求
        $.ajax({
            url:'http://localhost:3000/',
            type:'post',
            data:{
                name:'lily',
                sex:'female'
            },
            success:function(res){
                console.log(res);
            }
        })

        // get 请求
        $.ajax({
            url:'http://localhost:3000/',
            type:'get',
            success:function(res){
                console.log(res);
            }
        })
    </script>
</body>
</html>

浏览器运行结果如下,则表示成功~
post

post请求
post返回

get

get请求
get返回

到了这里接口开发阶段完成啦!!!

服务器端部署

  1. 先买一个服务器:阿里云、百度云、亚马逊等等随便你挑~

  2. 将自己的项目放到服务器上
    推荐大家用git 把项目克隆到服务器上
    (1) 先把项目上传自己git的私有库上(注意上传的时候把node_modules 模块给去掉哦,建一个.gitignore文件)
    我的.gitignore 文件如下

    .gitignore
    (2)在自己服务器上安装git环境,然后克隆该项目到服务器
git clone git@github.com:你的git账号/你的项目仓库.git

如果有小伙伴不了解git,指路 https://git-scm.com/

  1. 服务器安装node环境

  2. 用yarn 安装你的项目依赖

cd 你服务器上的项目目录
yarn install

如果有小伙伴不了解yarn,指路https://yarn.bootcss.com/

  1. 安装pm2启动项目,并管理进程
    (1)安装pm2
yarn global add pm2

(2) 检测pm2 是否安装成功

pm2 -v

若出现如下结果,则说明你pm2 安装ok啦!


pm2 -v

(3)使用pm2 启动项目

cd 你服务器项目目录
pm2 start index.js

启动成功如下所示:


pm2 启动项目

pm2 是一个启动项目并管理程序的工具,如果你项目意外死掉了,它可以自动帮你重启。类似的工具还有很多,大家自行Google之~
如果有小伙伴不了解pm2,指路 http://pm2.keymetrics.io/docs/usage/quick-start/

(4)测试
我的项目使用的是3000端口,所以http://服务器ip:3000就可以访问啦,以下是我的ip+端口访问结果


ip+端口访问

到此服务器端部署算是完成啦!各位能看到此处实在是辛苦啦~
但还有一点小问题,我们平时调接口的时候很少见到ip+端口的方式,一来直接将ip暴露出来不安全,二来不符合我们的使用习惯,所以下一步我们就用域名把这一套封装起来,大家加油!

部署域名,并通过域名访问

首先,你得有一个域名。。。

  1. 买域名
    各大域名服务商各种域名应有尽有,国内的有阿里云、百度云、腾讯云、华为云等,国外的有亚马逊,Google,godaddy,namesilo等等,随便挑。
  2. 域名备案
    简单的说说域名备案是干啥的:工信部需要知道你的网站主要做啥,有没有经营违法犯罪活动,他们要审核,审核通过了,你的网站就可以被别人通过域名访问到了。类似于工商部给一个饭馆发放营业执照。

域名备案大概需要半个月时间,我买的百度云的,差不多两个星期才完全ok。

  1. 添加解析

为了方便快捷,直接用A指向,就不加什么cdn了。小伙伴们后续可自行优化。

可以使用主域名,或者分配一个二级域名,如下图我就分配了一个二级域名


image.png
  1. nginx 反向代理,将二级域名指向你的项目
    (1)安装nginx(请自行搜索具体操作)
    (2)配置该项目的反向代理
    创建一个后缀为conf的文件,并写入以下配置
server {
  listen 80;
  server_name express.xx.xx; # 此处填写你分配的二级域名
  location / {
      proxy_set_header X-Real-IP $remote_addr;
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
      proxy_set_header Host  $http_host;
      proxy_set_header X-Nginx-Proxy true;
      proxy_set_header Connection "";
      proxy_pass       http://127.0.0.1:3000;  // 你本机的提供http服务的地址
  }
}

此段nginx配置来源 https://blog.csdn.net/zimin1985/article/details/76612635 ,我自己不熟悉nginx,所以从网上找了一份能用的。

保存,并重载nginx(具体如何重载请根据服务器操作系统自行搜索,比如ubuntu和centos重载nginx的命令不一样)。

重载完成后,直接在浏览器输入你的二级域名,就可以看到如下结果:


域名访问结果

至此,我们可以通过域名跨域访问接口啦,完结,撒花~~~能看到这里的小伙伴太不容易了,希望这篇文档对你有所帮助!

Tips: 有的服务器部署项目阶段发现无法通过端口访问,遇到这种情况小伙伴到控制台开启相应端口就好了。我2018年用的阿里云默认不让访问3000端口,得手动开启。2019年用的百度云默认是可以访问的。如果还有其他问题小伙伴们请在评论区留言,大家一起讨论。

上一篇下一篇

猜你喜欢

热点阅读