本地Nginx+Hosts配置本地前端代码和后端代码联调

已于 2024-06-27 14:52:19 修改
阅读量843 收藏 2
点赞数
分类专栏： Nginx 文章标签： nginx Hosts
于 2021-03-24 15:18:41 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liuchang19950703/article/details/115177760
版权

需求概述：

本地有一个前端项目包，对接的域名都是测试环境的，我想利用这个前端项目在本地跑起来，对接的API后端接口是本地的项目

1.下载一个Nginx Windows版本的，解压后双击nginx.exe 默认是80端口 如果本地开了 IIS 需要关闭IIS 避免冲突

2.前端代码包放在 D:\WorkJava\Garden 路径

3.后端接口暴露的网关端口是10000

4.修改Hosts文件，让测试环境的域名解析到本地

5.修改Nginx配置文件nginx.conf 

在路上liu
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
10、前后端本地端联调
qq_43258522的博客
06-12 453
打开前端项目、在根目录下新建 .evn.development .env.production 两个文件，分别添加以下内容。// 添加环境变量（vite项目 前缀必须以 VITE 开头，通过 import.meta.env 来读取环境变量）// .env.production (暂时没有生产环境，先和开发环境一致，后面后端部署到生产时，再更改这个地址)更改Add.vue文件（其实跟5.4步骤的没有变化，确认以下最终代码，在页面新增测试）样式部分可以根据自己的喜欢来调整（项目重点是打通前后端流程及部署）
前后端联调
学无止境
02-08 1万+
在现代Web开发中，前后端分离是一种常见的架构模式，前端主要负责用户界面(UI)和用户体验(UX)，后端则负责处理业务逻辑、数据库交互等服务器端的任务。为了实现前后端联调，前端开发人员会调用后端提供的接口来获取数据或发送请求，然后对接口返回的数据进行处理，确保页面能够正确地显示所需的信息。1.从网页中抓取超链接，打开一个网页，按F12,elment下方有HTML，点击一下最下方的放大镜，再点击下上方界面中的超链接，定位到网页的超链接代码；1.确定数据接口的请求参数和返回数据格式。2.替换自己联调的超链接；
【flask-进阶】前端开发与后端联调时选择本地资源的部署方式
alexliu2360的专栏
01-18 539
1、背景 在前端和后端联调时候，经常会遇见不需要加载后端的静态html资源，只需要加载本地开发调试的静态资源，以方便调试，那么如何进行部署来达到加载本地的资源呢？ 2、部署方式 如下图： 如上图所示，在前端开发的时候，使用本地的webpack打包的资源，而在正式部署的时候，则取后端的静态资源。 比如使用vue框架，那么可以如下方式选择加载的是后端的url window.location.host...
hosts+nginx将域名请求指向IP
谁说学美术将来只能卖画了，我也有自己的梦想。
03-05 4793
＃1 修改/etc/hosts，把所有的lottery.xxx.com请求打到本机服务器处理127.0.0.1 lottery.xxx.com＃2 在nginx上做转发处理upstream lottery { server 172.xx.x.xx:8080 ; } server { listen 80; server_name lottery.xxx.c
hosts+nginx实现同一域名不同指向调试
yuhui666666的博客
05-14 221
同一域名不同指向调试 1，域名默认的指向 2，在本地配置host,改变此域名的指向的nginx,然后nginx代理到不同的后端 这样可以用前后端一端调试任意一端 nginx localtion匹配到会把相同部分截取，不同部分向下拼接，如果需要的被截取就在代理中加上 ...
nginx_host绕过
最新发布
m0_63069714的博客
02-10 1813
创建ca文件存放证书密钥文件生成私钥以及证书的请求文件最终生成crt证书文件。
本地host,nginx配置
weixin_53900696的博客
05-24 1173
本地host, 路径: c/windows/system32/drivers/etc/host ip 域名 127.0.0.1 image.jt.com 127.0.0.1 manage.jt.com 127.0.0.1 web.jt.com 配置文件 根目录/coof/nginx.conf http{ server { # 端口 listten:80; # 域名 server_name www.baidu.com; #文件位置 localhost / { #根目
day19-后台项目启动+变更前后端域名+Nginx
weixin_58678891的博客
08-13 1852
1. 后台项目启动 1.1 解决 session关闭.服务停止 的问题 命令: java -jar 8091.jar & 该方式是前台启动方式.服务会与当前的session进行绑定. 如果session关闭.则服务停止. 命令: nohup java -jar 8091.jar => 8091.log & 可以实现后台启动,不会与session绑定 1.2 浏览文件 cat 输出文件所有的内容 文件内容较少的场景 300~几千行代码 more 输出文档所有的内容，分页输出，空
微服务本地开发走网关配置
lishunfeilsf的专栏
11-20 1234
今天要说的是微服务本地开发调用接口地址的写法与测试环境接口调用写发不一致导致部署到测试环境出现很多错误，今天要解决的问题是本地使用服务器写发实现本地开发。 1.首先你的有一个Windows版的nginx。下载地址在百度上搜索 nginx-1.10.3\conf\下创建一个.conf的nginx配置文件 upstream push-view{ server 127.0...
用了这个 IDE 插件，5分钟解决前后端联调！
程序猿DD
04-08 8503
点击上方蓝色“程序猿DD”，选择“设为星标”回复“资源”获取独家整理的学习资料！作者 |李海庆我是一个 Web 开发前端工程师，受到疫情影响，今天是我在家办公的第78天。开发了两周，...
Nginx 基本概念(反向代理、动静分离、负载均衡、高可用)、安装配置（JDK\Tomcat\Nginx\Keepalived）、配置实例效果
07-12 702
理想中是平均分配 现在80端口是开放的 如修改了nginx的配置文件nginx.conf，就需要重新加载才能生效，注意不是重启nginx，只是重新加载配置文件 以某个域名访问的时候，首先会在本地的hosts文件查找是否有这个域名与ip的映射配置，没有才会走dns域名解析 ...
前后端hosts配置访问问题解决思路
runwuwushengxiyu的博客
09-02 173
前后端hosts配置访问问题解决思路
前端代码放在服务器什么位置,前端代码在服务器上如何配置
weixin_35851654的博客
08-05 2431
前端代码在服务器上如何配置 内容精选换一换代码迁移工具进行代码迁移时，需要调用Linux下的rpm、deb等命令才能完成扫描和迁移相关任务，这些命令和逻辑必须在后端Linux运行。IDE插件只支持以Web模式使用root用户安装工具，不支持以CLI模式安装工具。由于root用户拥有最高权限，直接使用root用户登录服务器可能会存在安全风险。建议您使用普通用户登录服务器后切换为ro代码迁移工具进行代...
请求数据出现跨域问题。本地启动两个端口号，一个脚手架搭建的前端，一个用node启动的后台服务。
柠檬不萌只是酸i
11-09 2447
问题描述： 本地启动两个服务，一个前台，一个后台，访问的时候出现跨域问题。 请求跨域结果如下： Access to XMLHttpRequest at 'http://localhost:5000/users/api/login.do' from origin 'http://localhost:3000' has been blocked by CORS policy: Response ...
前端代码开发完成后如何与后台代码统一部署呢
weixin_36998547的博客
07-24 1670
上线统一部署 　　前端代码开发完成后如何与后台代码统一部署呢，这里就用到了webpack之类的打包工具，使用打包工具可以把前端项目打包成静态压缩文件，即一个index.html一个css一个js压缩文件，然后把他们放在后台工程目录里面运行整个项目就行了，这里要注意文件路径问题，并且之前的跨域处理也要去掉。 ...
前端开发，自定义本地域名解析，更改host，模拟线上环境
qq_17335549的博客
11-29 1584
前段开发，自定义本地域名解析，更改host，模拟线上环境
前后端本地联调
热门推荐
qq_62022086的博客
10-24 1万+
前端和后端进行本地联调的操作步骤。
Vue的Nginx前端代理配置
独行猫a 的沉淀、积累、总结。天天学习，好好向上...c/c++,嵌入式 linux,Android,HarmonyOS)
08-20 1736
当用vue开发好前端需要打包时，一般都需要配置下代理方便访问后台接口，避免出现找不到链接或者跨域问题。 记录下配置，假如vue中配置的跟url是/mock-server ,实际接口地址是127.0.0.1:8886 则nginx.conf文件中，增加如下配置： location /mock-server { proxy_pass http://127.0.0.1:8886; #api请求地址的实际地址 rewrite ^.+mock-server/?(.*)$ /$1 break; #
nginx和hosts配置
qq_49644567的博客
09-10 2046
nginx.conf（nginx/conf/nginx.conf） server { listen 80; //网络路径 server_name image.jt.com; location / { //本地路径 root D:/images; } } hosts(C:/Windows/System32/drivers/etc/hosts) //图片服务器配置 127.0.0.1 image.jt.com //前端服务器配置 127.0.0.1 www.
Nginx+Tomcat+SSL配置教程：实现负载均衡
在部署Nginx+Tomcat的架构时，Nginx通常作为前端服务器，负责接收客户端的请求，然后根据预设的规则将请求转发到后端的Tomcat服务器集群。Nginx的反向代理功能使得这种架构可以轻松扩展，增加更多的Tomcat实例来处理...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值