前端是vue,后端是nodejs

前端打包成dist目录,后端接口是localhost:4000/api

server
{
listen 80;
#listen [::]:80;
server_name yourdomain;
index index.html;
root /home/wwwroot/yourfolder/dist; # vue router开启了history 模式,nginx匹配不到的路由,就返回index.html,这样不报404
location / {
try_files $uri $uri/ /index.html;
}
# 反向代理
location /api/ {
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $http_host;
proxy_set_header X-Nginx-Proxy true;
proxy_set_header Connection "";
proxy_pass http://127.0.0.1:4000/api/;
} location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$
{
expires 30d;
} location ~ .*\.(js|css)?$
{
expires 12h;
} location ~ /.well-known {
allow all;
} location ~ /\.
{
deny all;
} access_log off;
}

nginx部署vue工程和反向代理nodejs工程的更多相关文章

  1. 部署基于.netcore5.0的ABP框架后台Api服务端,以及使用Nginx部署Vue+Element前端应用

    前面介绍了很多关于ABP框架的后台Web API 服务端,以及基于Vue+Element前端应用,本篇针对两者的联合部署,以及对部署中遇到的问题进行处理.ABP框架的后端是基于.net core5.0 ...

  2. nginx部署vue项目

    nginx是一个高性能的HTTP和反向代理服务器.因此常用来做静态资源服务器和后端的反向代理服务器.本文主要记录使用nginx去部署使用vue搭建的前端项目,项目基于vue官方的脚手架vue-cli构 ...

  3. 使用Nginx对.NetCore站点进行反向代理

    前言 之前的博客我已经在Linux上部署好了.NetCore站点且通过Supervisor对站点进行了进程守护,同时也安装好了Nginx.Nginx的用处非常大,还是简单说下,它最大的功能就是方便我们 ...

  4. Centos 7 上使用nginx为Node.js配置反向代理时错误:(13: Permission denied) while connecting to upstream

    错误来源:Centos 7 上使用nginx为Node.js配置反向代理时产生(13: Permission denied) while connecting to upstream的错误 nginx ...

  5. nginx配置虚拟主机、反向代理和负载均衡

    为了实现这个功能,需要修改nginx的配置文件,将nginx.conf清理一下,使结构更清晰. worker_processes ; events { worker_connections ; } h ...

  6. 入门级Nginx反向代理nodejs

    本着想实现前后端分离开发的初衷,我决定学习一下关于nignx反向代理的配置. 1.下载Nginx稳定版本 2.打开nginx配置文件 nginx.conf: 3.在http模块的server部分配置 ...

  7. 前nginx后Apache+Node反向代理

    前几天一直在被一个问题困扰,机器上跑的站点太多了,Apache上面有十几个,NodeJS的也有一堆,记端口号都要烦死,于是萌生了使用反向代理的想法.出发点貌似太low了,完全不是出于负载均衡.高并发什 ...

  8. 使用nginx为ArcGIS Server做反向代理

    1.下载nginx软件:官网地址http://nginx.org/ 2.修改conf文件夹下nginx.conf配置信息, 配置文件中以下内容: server { listen       80; s ...

  9. nginx配置二级目录,反向代理不同ip+端口

    场景描述: 通过二级目录(虚拟目录,应用程序)的方式访问同一ip+端口的不同应用,例如location是用户使用页面,location/admin/是管理页面,location部署在192.168.1 ...

随机推荐

  1. zufe 蓝桥选拔

    https://zufeoj.com/contest.php?cid=1483 问题 A: A 代码: #include <bits/stdc++.h> using namespace s ...

  2. 怎么设置table(表格)手机端自适应宽度

    我们在wordpress文章页面经常会用到表格,有些是从其他网页或者文档复制粘贴过来的,在电脑设备网页上都能很好的展示,但是在移动设备上或者低分辨率设备上却经常撑破列宽,很是影响美观和客户体验.这里就 ...

  3. 在vue-cli创建的项目里配置scss

    第一步,gitbash进入到项目目录 npm install node-sass --save-dev npm install sass-loader --save-dev 第二步:打开webpack ...

  4. CSS设计指南之伪类

    伪类这个叫法源自它们与类相似,但实际上并没有类会附加到标记中的标签上.伪类分两种. UI伪类会在HTML元素处于某个状态时(比如鼠标指针位于链接上),为该元素应用CSS样式. 结构化伪类会在标记中存在 ...

  5. Aspose.Pdf合并PDF文件

    使用Aspose.Pdf类库,有很多种方法可以合并PDF文件,这里简单介绍小生见到的几种: Doucment.Pages.Add PdfFileEditor.Append PdfFileEditor. ...

  6. CSS3基础选择器

    /*选择器分组:多个选择器使用同一个样式*/ h1,h2,a{ color: blue; } strong{ color: aquamarine; } /*选择器继承:body中未设置样式的会使用继承 ...

  7. 【算法】01分数规划 --- HNOI2009最小圈 & APIO2017商旅 & SDOI2017新生舞会

    01分数规划:通常的问法是:在一张有 \(n\) 个点,\(m\) 条边的有向图中,每一条边均有其价值 \(v\) 与其代价 \(w\):求在图中的一个环使得这个环上所有的路径的权值和与代价和的比率最 ...

  8. 【学习笔记】Learning OpenCV3——Ch8 working with video

    Reading Video with the cv::VideoCapture Object 对象创建的三种方法: // 1. Input filename cv::VideoCapture::Vid ...

  9. 洛谷 P1379 八数码难题 解题报告

    P1379 八数码难题 题目描述 在3×3的棋盘上,摆有八个棋子,每个棋子上标有1至8的某一数字.棋盘中留有一个空格,空格用0来表示.空格周围的棋子可以移到空格中.要求解的问题是:给出一种初始布局(初 ...

  10. bzoj4145 AMPPZ2014 The Prices 状压dp

    这个题.......很可以,很小清晰......反正正经的东西我都没想到:重点在于——————我不会处理那个多出来的路费所以当时我就骚骚的弄了一颗树包状压其实这是一个类01背包的状压在每个状态用01背 ...