前言
在本文中我会用最基本的技术来教大家如何从零开始，来搭建一个前后端分离的项目
环境以及工具
- 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可以说是核心，我们在里面配置了俩个服务nginx、app-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端口就能被访问
