Node —— 从零开始部署一个前后端分离的项目

前言

在本文中我会用最基本的技术来教大家如何从零开始,来搭建一个前后端分离的项目

环境以及工具

  • Docker
  • Docker-compose
  • pm2
  • nginx

必须在本地安装了docker环境,没安装的同学可以参考我的另一篇文章

项目源码

项目我放到了gitee上,感兴趣的同学可以下载下来,对照本文进行学习,效果会更好。

如果你已经安装了docker,那么直接根目录下面执行docker-compose up就可以直接启动项目

git clone https://gitee.com/DayLoveNight/docker-koa-html-project.git

模块讲解

我们将项目分为以下几个模块分别讲解,这几个模块也分别对应这我们的项目文件夹。

  • 前台

    • 普通的html页面,使用ajax进行请求
  • 后台

    • 使用pm2运行js文件,启动我们的api服务
    • 使用Dockerfile定制我们的node.js镜像
  • nginx

    • 修改根目录文件夹的指向
    • 配置反向代理
  • docker-compose

    • 启动nginx镜像
    • 定制后台的nodejs镜像

前台

这个没什么好说的,就是一个普通html页面,请求用的ajax,写过前端的都知道,这里不做赘述。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <link rel="stylesheet" href="./css/index.css">
    <title>首页</title>
</head>

<body>
    <div class="container">
        <div class="response">
            服务器返回:<p class="responseText"></p>
        </div>
        <div class="actions">
            操作:<button class="user">请求/user(get)</button>
        </div>
    </div>

    <script>
        var actions = {
            response: document.querySelector(".responseText"),
            btn: document.querySelector(".user")
        }
        actions.btn.onclick = function () {
            ajax("/user", "get");
        }

        function ajax(api, method) {
            actions.response.innerHTML = "加载中..."
            $.ajax({
                url: "http://localhost:8080/api" + api,
                method: method,
                success(data) {
                    actions.response.innerHTML = JSON.stringify(data);
                },
                error(error) {
                    console.log(error);
                    actions.response.innerHTML = "加载失败..."
                }
            })
        }


    </script>
</body>

</html>

运行结果如下:


image.png

后台

后台没有用复杂的egg.js,只是用了koa和koa-router简单的实现了俩个接口,也没有跟数据库进行交互,这里提一句,一般正式项目都用阿里云的数据库,很少用本地的,本地的一般用来测试。

跨域用的是koa-cors,允许全部跨域,正式项目里面不会像我这么配置

const Koa = require ('koa');
const Router = require ('koa-router');
const cors = require ('koa2-cors');

const app = new Koa (); //创建koa实例
app.use (
  cors ({
    exposeHeaders: ['WWW-Authenticate', 'Server-Authorization', 'Date'],
    maxAge: 100,
    credentials: true,
    allowMethods: ['GET', 'POST', 'OPTIONS'],
    allowHeaders: [
      'Content-Type',
      'Authorization',
      'Accept',
      'X-Custom-Header',
      'anonymous',
    ],
  })
);
const router = new Router (); //创建router实例

router.get ('/api', ctx => {
  ctx.body = {
    path: '/',
    des: '新版首页',
  };
});
router.get ('/api/user', ctx => {
  ctx.body = {
    path: '/api/user',
    des: '用户',
    data: [
      {
        id: 1,
        name: '刘亦菲',
      },
      {
        id: 2,
        name: '张勇',
      },
      {
        id: 3,
        name: '李达',
      },
    ],
  };
});
app.use (router.routes ());
app.listen (3000, () => {
  console.log ('新版应用已启动 —— http://localhost:3000');
});

nginx

  • 监听80端口。(默认)
  • 指定资源文件夹为/project/www/html(如果nginx镜像里面没有这个路径,则会自动创建)
  • 配置反向代理 (比如:阿里云服务器的外网访问的ip为47.113.201.228):
    • 那当我访问的地址(也就是请求接口)为http://47.113.201.228:8080/api 就会被代理到docker镜像中的地址http://app-pm2:3000/api (也就是http://localhost:3000/api,因为我们的docker是在服务器启动的,服务器本地的3000端口,就会被当作api的端口,)
    • 这里面还有值得一提的就是我为什么访问的8080,而不是nginx默认的80端口,下面的docker-compose会有详细介绍。
server
{
    listen 80;
    # 修改根目录为 /project/www/html
    location / {
        root /project/www/html;
        index index.html index.htm;
    }
    # 配置反向代理
    location /api {
            proxy_pass http://app-pm2:3000;
            proxy_redirect     off;
            proxy_set_header   Host            $host;
            proxy_set_header   X-Real-Ip       $remote_addr;
            proxy_set_header   X-Forwarded-For $proxy_add_x_forwarded_for;
    }
}

docker-compose

docker-compose可以说是核心,我们在里面配置了俩个服务nginxapp-pm2,当我们在根目录执行命令docker-compose up的时候,docker-compose就会读取docker-compose.yml这个文件:

首先会启动nginx这个镜像服务,其次会启动app-pm2这个服务

version: "3.2"
services: 
    nginx:
        restart: always #在失败时,总是会重启
        image: nginx #镜像用nginx
        ports: 
            - 8080:80 #启动本地的8080端口,映射为镜像的80端口,本地8080端口就能被访问
        volumes: 
            - ./nginx/conf.d:/etc/nginx/conf.d #将本地nginx配置映射到nginx的配置
            - ./frontend:/project/www/html #将本地目录 映射为nginx的资源目录
    app-pm2:
        restart: always
        build: ./backend #build时,从./backend里面进行打包
        container_name: app-pm2 #指定打包容器的名字
        ports: 
            - 3000:3000 #启动本地的3000端口,映射为镜像的80端口,本地的3000端口就能被访问

推荐阅读更多精彩内容