Nginx实现前后端分离
Nginx可以实现前后端分离，其大致过程如下：
- 安装 Nginx
在Linux系统上可以使用apt-get或yum包管理器进行安装，具体命令如下：
sudo apt-get update
sudo apt-get install nginx
- 创建一个前端目录和一个API目录
在服务器上创建一个前端目录（例如：/var/www/frontend）和一个API目录（例如：/var/www/api）。
前端目录存放的是前端静态文件。API目录是后端API的集合点。
- 添加示例前端代码和后端API代码
在前端目录下放一个示例index.html文件，同时在API目录下放一个示例的API代码文件
index.html内容如下：
<!DOCTYPE html>
<html>
<head>
<title>Frontend</title>
</head>
<body>
<h1>Welcome to the Frontend!</h1>
</body>
</html>
API代码文件如下：
from flask import Flask
app = Flask(__name__)
@app.route('/')
def hello_world():
return 'Welcome to the API!'
if __name__ == '__main__':
app.run()
- 配置 Nginx
要将请求响应到正确的部分，需要配置nginx。在 /etc/nginx/sites-available 目录下创建一个名为 myapp 的文件。
文件内容如下：
server {
listen 80;
server_name example.com;
location /api {
proxy_pass http://localhost:5000;
}
location / {
root /var/www/frontend/;
try_files $uri $uri/ /index.html;
}
}
这个配置文件有两个主要的部分。
/api部分用来代理到后端API。-
/部分用来提供静态前端文件并唯一路由除/api之外的所有请求。 -
重启 Nginx
执行以下命令以使更改生效：
sudo service nginx restart
至此，Nginx实现前后端分离的过程就完成了。
附两个示例：
- 使用React框架中Nginx实现前后端分离
安装React框架：
npm install -g create-react-app
create-react-app my-app
cd my-app
npm start
执行建立一个本地开发的express后端，使用了cors，用于测试Nginx实现前后端分离：
npm install express cors
touch index.js
代码如下：
const express = require('express');
const cors = require('cors');
const app = express();
const port = process.env.PORT || 5000;
app.use(cors());
app.use(express.json());
app.get('/api', (_, res) => {
res.json({ message: 'Hello API' });
});
app.listen(port, () => {
console.log(`Server listening on port ${port}`);
});
在 Nginx 中添加配置文件：
server {
listen 80;
listen [::]:80;
server_name example.com;
location / {
root /var/www/frontend;
try_files $uri /index.html;
}
location /api {
proxy_pass http://localhost:5000;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
}
}
- 使用Node.js中的Nginx实现前后端分离
安装Node.js：
curl -sL https://deb.nodesource.com/setup_14.x | sudo -E bash -
sudo apt-get install -y nodejs
执行以下命令以建立本地服务器，使用了cors库，用于测试Nginx实现前后端分离：
npm init
npm install express cors --save
touch server.js
源代码如下：
const express = require('express');
const cors = require('cors');
const app = express();
const port = process.env.PORT || 5000;
app.use(cors());
app.use(express.json());
app.get('/api', (_, res) => {
res.json({ message: 'Hello API' });
});
app.listen(port, () => {
console.log(`Server listening on port ${port}`);
});
在 Nginx 中添加配置文件：
server {
listen 80;
listen [::]:80;
server_name example.com;
location / {
root /var/www/frontend;
try_files $uri /index.html;
}
location /api/ {
proxy_pass http://localhost:5000/;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
}
}