目录

一、安装Nginx

1. 下载Nginx安装包

2. 上传安装包到Linux环境

3. 解压Nginx安装包

4. 执行安装

5. 启动Nginx服务

二、对要部署到服务器上的项目用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;}

②启动Nginx服务

首先是进入sbin目录下：

cd /usr/local/nginx/sbin

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

fuser -k 81/tcp

启动Nginx服务

./nginx

③访问项目

在浏览器输入服务器ip+配置的nginx端口(81端口)进行访问项目：

http:// 服务器ip地址 :81/

我们可以看到项目成功获取到数据，这得益于我们用Nginx进行了反向代理！

如果没有用Nginx进行反向代理，是会出现访问不到服务器数据的报错！

利用Nginx反向代理就能完美解决上面这个问题！

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

自己的项目部署到服务器上的部分问题解决办法
关于项目部署到服务器上,访问方面的部分优化: 1.一般我们的项目部署到tomcat下的webapps下,我们访问时需要输入:http://XXXXXX:8080/项目名/index.html 但是为了 ...
vue反向代理解决跨域及部署nginx端口转发解决跨域
1. 前言本文是为了解决vue反向代理解决跨域及部署服务器nginx端口转发解决跨域,因为踩了不少的坑,百度了很多,也试了太多的方法,最终得以解决,所以记录一下,希望遇到同样问题的友友们可以高效的解 ...
通过nginx反向代理解决跨域
先写一个发送跨域请求的页面index.html <html> <head><title></title> </head> <body& ...
利用nginx 反向代理解决跨域问题
利用nginx 反向代理解决跨域问题参考文章: (1)利用nginx 反向代理解决跨域问题 (2)https://www.cnblogs.com/hpx2020/p/9928175.html 备忘一 ...
nginx反向代理解决跨域问题，使本地调试更方便
nginx反向代理解决跨域问题,使本地调试更方便参考文章: (1)nginx反向代理解决跨域问题,使本地调试更方便 (2)https://www.cnblogs.com/gwf93/p/102951 ...
如何将本地python项目部署到服务器上_如何将本地的Django项目部署到云服务器
如何将本地的Django项目部署到云服务器开发环境开发语言: Python 后台框架:Django 前端框架:bootstrap web服务器:nginx wsgi服务器:uwsgi 查看本地项目 ...
项目部署到服务器上页面上的时间与数据库相差8小时
更多详细请关注博客原文:盐鱼律己-项目部署到服务器上页面上的时间与数据库相差8小时问题描述项目在本地运行时页面上的时间与数据库中的相同,但是部署到服务器上后页面上显示的时间比数据库中早8个小时. ...
如何将项目部署到服务器上(全套教程)
点赞再看,养成习惯,本文介绍如何将本地项目部署到服务器上永久运行. 目录开场白一.购买服务器二.用Xshell连接服务器三.安装Java环境四.安装宝塔面板 ?五.部署总结开场白在写毕 ...
python 怎么部署_如何把Python项目部署到服务器上
如何把Python项目部署到服务器上一,不需要域名的情况下 1,访问阿里云官网 2,注册登录(建议支付宝授权) 3,登陆后--->产品-->云服务器ECS 4,滚动条拉倒页面底部--&g ...
webstorm前端使用Nginx 反向代理解决跨域问题
1.webstorm设置端口 2. 3. 4. 5. 把项目放到nginx安装目录的html文件夹下: 6. 配置nginx.conf文件 server {listen 8090; #监听端口serv ...

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

一、安装Nginx

1. 下载Nginx安装包

2. 上传安装包到Linux环境

3. 解压Nginx安装包

4. 执行安装

5. 启动Nginx服务

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

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

②启动Nginx服务

③访问项目

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

最新文章

热门文章