Nginx实现前后端分离

Nginx可以实现前后端分离，其大致过程如下：

安装 Nginx

在Linux系统上可以使用apt-get或yum包管理器进行安装，具体命令如下：

sudo apt-get update
sudo apt-get install nginx

在服务器上创建一个前端目录（例如：/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;
    }
}

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：Nginx实现前后端分离 - Python技术站

相关文章