Nginx实现前后端分离

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

  1. 安装 Nginx

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

sudo apt-get update
sudo apt-get install nginx
  1. 创建一个前端目录和一个API目录

在服务器上创建一个前端目录(例如:/var/www/frontend)和一个API目录(例如:/var/www/api)。

前端目录存放的是前端静态文件。API目录是后端API的集合点。

  1. 添加示例前端代码和后端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()
  1. 配置 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实现前后端分离的过程就完成了。

附两个示例:

  1. 使用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;
    }
}
  1. 使用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技术站

(0)
上一篇 2023年5月16日
下一篇 2023年5月16日

相关文章

  • 在Nginx服务器上配置Google反向代理的基本方法

    在Nginx服务器上配置Google反向代理的基本方法主要包括以下步骤: 1. 安装nginx服务器 使用apt或yum等包管理工具,执行以下命令安装Nginx服务器 sudo apt-get update sudo apt-get install nginx 2. 配置反向代理 打开Nginx配置文件/etc/nginx/nginx.conf,在http段…

    Nginx 2023年5月16日
    00
  • 关于Nginx开启gzip的配置的问题

    关于Nginx开启gzip的配置的问题,我为您提供如下攻略: 1. 开启gzip压缩的必要性 gzip是一种常见的压缩算法,可以大幅度缩小网页资源的大小,降低网站的带宽消耗,提高网站的响应速度。因此,开启gzip压缩是优化网站的必要手段之一。 2. 配置Nginx开启gzip压缩 2.1 第一步:检查gzip模块是否已经安装 在配置gzip之前,我们需要先确…

    Nginx 2023年5月16日
    00
  • Nginx CONTENT阶段 autoindex、index模块

    L 66       autoindex 指令 syntax : on | off; default : off; context : http,server,location; autoindex_exact_size 指令  针对xml格式 向用户显示相对路径还是绝对路径 syntax : on | off; default : on; context …

    Nginx 2023年4月13日
    00
  • 如何配置Nginx的gzip压缩?

    要配置Nginx的gzip压缩,需要按照以下步骤进行: 打开nginx的配置文件,一般位于/etc/nginx/nginx.conf。 在http模块中添加如下配置: http { gzip on; gzip_types text/plain text/css application/json application/javascript text/xml …

    Nginx 2023年4月19日
    00
  • nginx会话保持

    nginx会话保持主要有以下几种实现方式。 1、ip_hash ip_hash使用源地址哈希算法,将同一客户端的请求总是发往同一个后端服务器,除非该服务器不可用。 ip_hash语法: upstream backend {   ip_hash;   server backend1.example.com;   server backend2.example.…

    Nginx 2023年4月11日
    00
  • nginx 反向代理memcached、websocket及nginx文件方面的优化

    安装memcached服务,并启动添加数据 yum -y install memcached systemctl start memcached.service 启动 [root@python ~]# telnet 127.0.0.1 11211 Trying 127.0.0.1… Connected to 127.0.0.1. Escape chara…

    Nginx 2023年4月13日
    00
  • nginx报502

    环境nginx+php-fpm 1.502 Bad Gateway错误    在php.ini和php-fpm.conf中分别有这样两个配置项:max_execution_time和request_terminate_timeout。 这两项都是用来配置一个PHP脚本的最大执行时间的。当超过这个时间时,PHP-FPM不只会终止脚本的执行, 还会终止执行脚本的…

    Nginx 2023年4月11日
    00
  • 详解基于CentOS 7配置Nginx自启动

    我来为您详细讲解如何在CentOS 7上配置Nginx自启动的完整攻略。 1. 安装Nginx 在安装Nginx之前,您需要确保已经安装了EPEL存储库和更新的系统。然后,您可以使用以下命令在CentOS 7上安装Nginx: sudo yum install nginx 2. 配置Nginx 安装Nginx后,需要配置Nginx以便它在启动时自动启动。这可…

    Nginx 2023年5月16日
    00
合作推广
合作推广
分享本页
返回顶部