Nginx反向代理(解决纯前端项目部署到服务器上无法访问接口数据)

目录一、安装Nginx1. 下载Nginx安装包2. 上传安装包到Linux环境3. 解压Nginx安装包4. 执行安装5. 启动Nginx服务二、对要部署到服务器上的项目用Nginx进行反向代理①配置反向代理，增加对应的location②启动Nginx服务③访问项目一、安装Nginx建议不要用yum进行安装，因为可能会找不到yum源，会报错找不到nginx安装包！！！1. 下载Nginx安装包

ღ冷风20°C᭄ꦿ࿐

7302人浏览 · 2022-05-09 18:56:15

ღ冷风20°C᭄ꦿ࿐ · 2022-05-09 18:56:15 发布

目录

二、对要部署到服务器上的项目用Nginx进行反向代理

①配置反向代理，增加对应的location

②启动Nginx服务

③访问项目

一、安装Nginx

建议不要用yum进行安装，因为可能会找不到yum源，会报错找不到nginx安装包！！！

1. 下载Nginx安装包

可以去下面网盘中找到 nginx-1.21.6.tar.gz 进行下载：

链接：https://pan.baidu.com/s/1_TzifQLjQO65_u_wM5qIPQ
提取码：yyds

2. 上传安装包到Linux环境

利用 Winscp 软件将 nginx-1.21.6.tar.gz 安装包上传到 Linux环境下的 /usr/local/nginx 目录下(根据自己喜好存放)

3. 解压Nginx安装包

利用 Xshell 软件进行远程连接，解压Nginx安装包。

进入存放nginx安装包的文件夹：

cd /usr/local/nginx

解压安装包：

tar -zxvf nginx-1.21.6.tar.gz

解压后的文件目录：

4. 执行安装

①进入nginx目录下的conf文件夹：

cd /usr/local/nginx/conf

②执行configure命令：

./configure

③执行make命令：

make

④执行make install命令：

make install

到这里Nginx基本上就安装完了，但是如果你的服务器已经装了Apache，两者默认端口都是80，造成冲突。

解决方法：修改两者中任何一个的端口即可！（这里我以修改Nginx的默认端口为例）

把Nginx的默认端口80修改为81，即修改nginx.conf文件

首先进入conf目录：

cd /usr/local/nginx/conf

编辑修改文件：

vim nginx.conf

按 i 键进行编辑修改，把80修改为81，按 Esc 键退出编辑模式，再按 Shift+：之后键盘敲入 wq 进行保存退出！

5. 启动Nginx服务

首先是进入sbin目录下：

cd /usr/local/nginx/sbin

如果不确定之前有没有使用过81端口，建议先杀死占用端口(81端口)

fuser -k 81/tcp

启动nginx服务

./nginx

如果没显示端口占用的话，就是启动nginx服务成功啦！

二、对要部署到服务器上的项目用Nginx进行反向代理

1、配置实现访问项目地址即可访问到项目

2、对项目接口进行反向代理，即可在自己的服务器上访问到项目接口的数据。

①配置反向代理，增加对应的location

首先进入conf目录：

cd /usr/local/nginx/conf

编辑修改文件：

vim nginx.conf

按 i 键进行编辑修改，根据下面内容进行修改，按 Esc 键退出编辑模式，再按 Shift+：之后键盘敲入 wq 进行保存退出！

修改以下位置即可：

上图中的proxy_pass配置项目后台接口；root是配置你项目上传到服务器下的目录

location /api {
           proxy_pass http://gmall-h5-api.atguigu.cn;
        }


location / {
            root   /home/Shangpinhui;
            index  index.html;
            try_files $uri $uri/ /index.html;
        }