前端和后台同用一个域名nginx怎么搭建

前端与后台同域名下，使用Nginx搭建的指南 🌐🔧

在互联网时代,前端和后台的分离已经成为一种主流的开发模式，为了简化部署和维护，很多开发者会选择将前端和后台部署在同一域名下，而Nginx作为一款高性能的Web服务器，可以很好地满足这一需求，下面，我们就来探讨一下如何使用Nginx搭建前端和后台同域名下的环境。🎯

准备工作 🛠️

在开始搭建之前,我们需要做好以下准备工作：

1. 安装Nginx：确保你的服务器上已经安装了Nginx。
2. 配置文件：创建或修改Nginx的配置文件，通常位于/etc/nginx/nginx.conf

   或

   /etc/nginx/sites-available/

   目录下。

3. 目录下。
4. 前端代码：将前端代码放置在服务器上，例如
/var/www/html

目录。

5. 目录。
6. 后台代码：将后台代码放置在服务器上，例如
/var/www/api

目录。

7. 目录。

配置Nginx 🌟

以下是一个基本的Nginx配置示例,它将前端和后台部署在同一域名下：

server {    listen 80;    server_name yourdomain.com;    # 前端配置    location / {        root /var/www/html;        index index.html index.htm;        try_files $uri $uri/ /index.html;    }    # 后台配置    location /api/ {        proxy_pass http://localhost:3000; # 假设后台运行在3000端口        proxy_set_header Host $host;        proxy_set_header X-Real-IP $remote_addr;        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;        proxy_set_header X-Forwarded-Proto $scheme;    }}

解释配置文件：

• listen 80;

  ：指定Nginx监听80端口。

• ：指定Nginx监听80端口。
server_name yourdomain.com;

：设置服务器的域名。

• ：设置服务器的域名。
location / { ... }

：配置前端请求的处理。

• root /var/www/html;

  ：指定前端代码的根目录。

• ：指定前端代码的根目录。
index index.html index.htm;

：设置默认首页。

• ：设置默认首页。
try_files $uri $uri/ /index.html;

：尝试直接服务文件，如果找不到则返回index.html。

• ：尝试直接服务文件，如果找不到则返回index.html。
location /api/ { ... }

：配置后台请求的处理。

• proxy_pass http://localhost:3000;

  ：将/api/路径下的请求转发到本地3000端口。

• ：将/api/路径下的请求转发到本地3000端口。
proxy_set_header

：设置一些HTTP头部信息，以便正确转发请求。

• ：设置一些HTTP头部信息，以便正确转发请求。

测试配置 🚀

配置完成后,保存文件并重启Nginx服务：

sudo nginx -t  # 测试配置文件是否正确sudo systemctl restart nginx  # 重启Nginx服务

打开浏览器访问你的域名,如果前端页面正常显示，同时通过API接口测试后台服务，那么恭喜你，已经成功搭建了前端和后台同域名下的Nginx环境！🎉

通过以上步骤,你可以轻松地将前端和后台部署在同一域名下，使用Nginx进行反向代理，实现高效的开发和部署，希望这篇文章能帮助你！🌈👍