nginx代理部署Vue与React项目
nginx代理部署Vue与React项目
一,介绍与需求
1.1,介绍
1.2,需求
打包代理部署web项目
二,安装配置nginx
主要记录在windows10 下安装nginx
第一步:到nginx官网上下载相应的安装包
第二步:下载进行解压,将解压后的文件放到自己心仪的目录下,我的解压文件放在了d盘根目录下,如下图所示:
第三步:进入window的cmd窗口,输入如下图所示的命令,进入到nginx目录(D:\nginx-1.15.8),使用“start nginx.exe ”进行nginx的启动,如下图所示:
启动成功后,在“任务管理器”中会看到“nginx.exe”进程
第四步:在浏览器地址栏输入:127.0.0.1,会看nginx欢迎界面;如果发现进程中并没有,那么说明启动失败,你可以到你的D:\nginx-1.15.8目录输入ngnix查看,
解决办法:修改nginx配置文件nginx.conf,将默认端口80改成其他的
server {
listen ;#->8
server_name localhost; #charset koi8-r;
相应的命令:start nginx.exe 命令了。
nginx.exe -s stop //停止nginx
nginx.exe -s reload //重新加载nginx
nginx.exe -s quit //退出nginx
注:以上的命令中,.exe可以去掉
效果:
三,代理部署项目
2,Vue项目打包
配置ngnix的配置文件nginx.conf,然后重启运行即可
#gzip on; server {
listen ;
server_name localhost; #charset koi8-r; #access_log logs/host.access.log main; root F:\project\web\dist;#react/vue项目的打包后的dist
# index index.html index.htm; # location / {
# try_files $uri $uri/ /index.html;
# } #代理后台接口
location /api/ {
proxy_pass http://127.0.0.1:9080;#转发请求的地址
proxy_connect_timeout ;#链接超时设置
proxy_read_timeout ;#访问接口超时设置
}
#error_page /.html; # redirect server error pages to the static page /50x.html
#
error_page /50x.html;
location = /50x.html {
root html;
}
}
参数介绍
proxy_pass http://127.0.0.1:9080;#转发请求的地址;设置被代理服务器的端口或套接字,以及URL
proxy_connect_timeout ;//后端服务器连接的超时时间_发起握手等候响应超时时间
proxy_read_timeout ;//连接成功后_等候后端服务器响应时间_其实已经进入后端的排队之中等候处理(也可以说是后端服务器处理请求的时间)
proxy_send_timeout ;//后端服务器数据回传时间_就是在规定时间之内后端服务器必须传完所有的数据
proxy_buffer_size 256k;//设置从被代理服务器读取的第一部分应答的缓冲区大小,通常情况下这部分应答中包含一个小的应答头,默认情况下这个值的大小为指令proxy_buffers中指定的一个缓冲区的大小,不过可以将其设置为更小
proxy_buffers 256k;//设置用于读取应答(来自被代理服务器)的缓冲区数目和大小,默认情况也为分页大小,根据操作系统的不同可能是4k或者8k
nginx代理部署Vue与React项目的更多相关文章
- Nginx中配置vue,react项目地址
如题 像以前在Nginx中配置域名解析的时候只需要在conf.d文件夹下添加对应的xx.conf文件(当然了你也可以在nginx.conf)下配置. 如果是以前的老项目只需要在配置文件中server内 ...
- 在nginx上部署vue项目(history模式);
在nginx上部署vue项目(history模式): vue-router 默认是hash模式,使用url的hash来模拟一个完整的url,当url改变的时候,页面不会重新加载.但是如果我们不想has ...
- 在nginx上部署vue项目(history模式)--demo实列;
在很早之前,我写了一篇 关于 在nginx上部署vue项目(history模式) 但是讲的都是理论,所以今天做个demo来实战下.有必要让大家更好的理解,我发现搜索这类似的问题还是挺多的,因此在写一篇 ...
- nginx反向代理部署vue项目(history模式)的方法
前言: 根据标题我们要区分出两个信息 1. history 模式部署 ( vue的路由模式如果使用history,刷新会报404错误.) 2. Nginx 做反向代理 问题1思考: vue-route ...
- win10系统本地iis或nginx服务器部署vue.js项目
1.前端框架一般依赖node.js,我们首先要安装node.js.请参考: http://www.cnblogs.com/wuac/p/6381819.html to:安装好node.js后npm也安 ...
- 服务器部署 Vue 和 Django 项目的全记录
本篇记录我在一个全新服务器上部署 Vue 和 Django 前后端项目的全过程,内容包括服务器初始配置.安装 Django 虚拟环境.python web 服务器 uWSGI 和反向代理 Nginx ...
- 关于如何在Linux上使用Nugix反向代理部署net core3.1项目
本文意在教大家如何在Linux上部署net core web项目,本人通过实践已经成功可以通过外网访问我部署在阿里云服务器上的站点. 一:需要用到的东西如下: 1:一个基于net core框架下的we ...
- liunx从0开始部署vue+spring boot项目(包含:安装jdk、mysql、nginx)
单纯记录,若有不合理不规范的地方请忽略. 0.配置JDK 0.下载liunx的jdk解压到/usr/local目录下. tar -xzvf jdk-8u291-linux-x64.tar.gz -C ...
- CentOS+Nginx+Supervisor部署ASP.NET Core项目
对.Net Core的学习和实践,已经进行了一年多的世间,截止目前,微软已经发布.Net Core2.1,关于.NetCore的应用部署的文章比比皆是.今天借此,回顾下.net core环境的部署过程 ...
随机推荐
- 【转载】C#将图片转换为二进制流调用
在C#中可以使用MemoryStream类.BinaryFormatter类等来操作图片,将图片读取到二进制数据流中,最终转成二进制数据流进行调用,详细的实现如下方法所示. private byte[ ...
- asp.net MVC NPOI导出excel通用
一.创建一个类文件添加 public class ExportToExcelColumn { public ExportToExcelColumn(string _Columnnames, strin ...
- [PHP] 抽象类abstract的回顾
1.abstract定义为抽象的类不能被实例化. 2.它里面至少有一个方法是被声明为抽象的,那么这个类就必须被声明为抽象的. 3.被定义为抽象的方法只是声明了其调用方式(参数),不能定义其具体的功能实 ...
- Java开发笔记(七十九)利用反射技术操作私有属性
早在介绍多态的时候,曾经提到公鸡实例的性别属性可能被篡改为雌性,不过面向对象的三大特性包含了封装.继承和多态,只要把性别属性设置为private私有级别,也不提供setSex这样的性别修改方法,那么性 ...
- @RequestParam Map<String, Object> paramMap
@RequestParam 请求方式 url = "/edit?device=${device}&type=${type}" Controller @RequestMapp ...
- mysql查找字段在哪个表中
select table_schema 数据库名称,table_name 表名 from information_schema.columns where column_name = 'compar ...
- Oracle11g: datetime
--上一月,上一年 select add_months(sysdate,-1) last_month,add_months(sysdate,-12) last_year from dual; --下一 ...
- WebView断网提示
转载请标明出处,维权必究:https://www.cnblogs.com/tangZH/p/9913968.html 重写WebViewClient中的方法,然后WebView.setWebViewC ...
- Android为TV端助力 集成第三方播放器,实现全屏播放
下面这Demo链接:Android实现全屏播放,各种格式支持直播,点播,不收费!
- Docker Data Center系列(二)- UCP安装指南
本系列文章演示如何搭建一个mini的云平台和DevOps实践环境. 基于这套实践环境,可以部署微服务架构的应用栈,演练提升DevOps实践能力. 1 系统要求 1.1 硬件和软件要求 Linux内核版 ...