您当前的位置:首页 > 电脑百科 > 站长技术 > 服务器

「技术架构」在5分钟把前端应用程序安装到NGINX

时间:2019-09-27 09:38:57  来源:  作者:

Nginx是一个流行的web服务器,用于提供web应用程序的静态资源(客户端源)。我将解释如何将Nginx设置为静态内容资源web服务器,以及如何将它配置为linux系统上的反向代理(连接客户机和后端)。基本上如何设置前端+后端与Nginx在Linux上。如果你:

  1. 希望将您的Angular/React/Vue或任何其他基于前端的框架应用程序放在Nginx上;
  2. 希望将Nginx上的客户端与后端连接(如Node.js或JAVA App);
  3. 要将域调用委托给内部web服务器,例如在其他端口(代理)上工作;

在Nginx上的前端应用

如果您使用任何框架(如Vue、Angular或React)开发前端应用程序,那么您最终将生成一个产品包——准备部署在web服务器上的文件(html、js、css)。在大多数框架中,运行生产构建将类似于npm构建,或者例如在Vue: Quasar构建中使用Quasar。您的生产文件应该在项目文件夹中生成的dest文件夹中。

在destfolder中生成的文件(前端应用程序)可以放在web服务器上,比如Apache或Nginx。

我假设您已经在目标机器上安装了Nginx(就像您的服务器机器一样)。

Nginx前端应用配置

Nginx配置可以在/etc/ Nginx下找到主配置文件名为nginx.conf。取决于你的系统配置可以有一点不同:

  1. nginx.conf文件中的整个配置(例如Arch linux)
  2. nginx中的主配置。conf,每个域分割域配置(就像在Ubuntu中,域配置可以在insitesavailable文件夹中找到)

假设您的域名是domain.com。您希望在http://domain.com(默认80端口)下设置前端应用程序。

nginx的配置如下:

  • server {
  • server_name domain.com;
  • location / {
  • root /usr/share/nginx/html/domain;
  • try_files $uri $uri/ /index.html;
  • }
  • }
 

如果您的配置基于nginx.conf (例如Arch linux):

在nginx.conf的http部分粘贴上面的配置

如果你使用Ubuntu:

  1. 在/etc/nginx/sites-available中创建文件domain.com(touch domain.com)
  2. 将上面的配置粘贴到文件中
  3. 转到/etc/nginx/sites-enabled并调用:sudo ln -s /etc/nginx/sites-available/domain.com /etc/nginx/sites-enabled/

下一步是向nginx resources文件夹提供前端应用程序内容。首先构建前端应用程序(例如,npm构建取决于您的设置)。然后将前端应用程序dist文件夹中创建的每个文件/文件夹移动到/usr/share/nginx/html/domain(必须在/usr/share/nginx/html下创建域文件夹)。

最后一步:sudo systemctl restart nginx.service

现在访问http://domain.com应该呈现前端应用程序。

连接后端

使用Angular/Vue/React,你可能正在开发服务器上工作,它会在更改后重新加载你的代码,并将你的请求代理到后端。现在,Nginx配置中必须提供类似的代理配置。

让我们假设所有从客户端到后端执行的请求都有/api前缀,例如get('/api/myWallet')正在对本地主机8888/api/myWallet后端服务器执行请求。您的配置可能不同,但通常情况下是这样工作的。

现在我们要做的就是将nginx设置为代理每个domain.com/api/*请求到本地主机:8888。这是配置:

  • location /api {
  • proxy_pass http://localhost:8888/api;
  • }

将此配置粘贴到server{}部分(您在上面定义的)。

最后它应该是这样的:

  • server {
  • server_name domain.com;
  • location / {
  • root /usr/share/nginx/html/domain;
  • try_files $uri $uri/ /index.html;
  • }
  •  
  • location /api {
  • proxy_pass http://localhost:8888/api;
  • }
  • }

最后 :sudo systemctl restart nginx.service

总结

Nginx是一个功能强大的工具,在简单的场景中可以处理前端web应用程序的静态资源,并有可能将请求代理到后端服务器——这就是我们所需要的。实际上,我们在服务器上得到了类似于facade的东西,可以设置它来过滤甚至平衡流量。

原文:https://pthomann.pl/setup-frontend-application-on-nginx-in-5-minutes/

本文:https://pub.intelligentx.net/setup-frontend-application-nginx-5-minutes

讨论:请加入知识星球或者小红圈【首席架构师圈】



Tags:NGINX   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,如有任何标注错误或版权侵犯请与我们联系(Email:2595517585@qq.com),我们将及时更正、删除,谢谢。
▌相关推荐
项目中,遇到了一个问题,就是PDF等文档不能够在线预览,预览时会报错。错误描述浏览器的console中,显示如下错误:nginx代理服务报Mixed Content: The page at ******** was loaded...【详细内容】
2021-12-17  Tags: NGINX  点击:(7)  评论:(0)  加入收藏
前言Nginx是前后端开发工程师必须掌握的神器。该神器有很多使用场景,比如反向代理、负载均衡、动静分离、跨域等等。把 Nginx下载下来,打开conf文件夹的nginx.conf文件,Nginx服...【详细内容】
2021-12-08  Tags: NGINX  点击:(18)  评论:(0)  加入收藏
最近客户有个新需求,就是想查看网站的访问情况,由于网站没有做google的统计和百度的统计,所以访问情况,只能通过日志查看,通过脚本的形式给客户导出也不太实际,给客户写个简单的页...【详细内容】
2021-10-09  Tags: NGINX  点击:(48)  评论:(0)  加入收藏
安全服务器是只允许所需数量的服务器。理想情况下,我们将通过单独启用其他功能来基于最小系统构建服务器。进行最少的配置也有助于调试。如果该错误在最小系统中不可用,则分别...【详细内容】
2021-09-26  Tags: NGINX  点击:(60)  评论:(0)  加入收藏
在今年的NGINX Sprint 2.0虚拟大会上,NGINX(来自流行的开源web服务器/负载均衡器和反向代理背后的公司F5),发布了NGINX现代应用参考架构(MARA)。该公司在一篇博客文章中说,这将帮...【详细内容】
2021-09-26  Tags: NGINX  点击:(61)  评论:(0)  加入收藏
Ubuntu下安装Nginx一、系统基本信息查看1、查看Ubuntu版本信息:使用命令:cat /proc/version 查看~$ cat /proc/versionLinux version 4.15.0-106-generic (buildd@lcy01-amd6...【详细内容】
2021-09-16  Tags: NGINX  点击:(60)  评论:(0)  加入收藏
出于安全审查或者对于系统安全性的要求,都要求我们生产环境部署的系统需要做一定的权限控制。那么如何简单快速地部署满足安全要求的权限系统呢?其实可以通过nginx的相关功能...【详细内容】
2021-09-07  Tags: NGINX  点击:(69)  评论:(0)  加入收藏
什么是NginxNginx(engine x)是一个高性能的HTTP和反向代理服务器,具有内存少,高并发特点强。1、处理静态文件,索引文件以及自动检索打开文件描述符缓冲2、无缓冲的反向代理加速...【详细内容】
2021-09-02  Tags: NGINX  点击:(70)  评论:(0)  加入收藏
本文适用于 php7.4+NGINX环境,适用于运行 wordpress 环境一、更新服务器sudo apt update二、命令快捷缩写设置通过ssh登录服务器,在用户目录下执行以下命令sudo nano .bashrca...【详细内容】
2021-08-31  Tags: NGINX  点击:(87)  评论:(0)  加入收藏
一、nginx正向代理介绍及配置(需要在客户端配置代理服务器进行指定网站访问)#模块 ngx_http_proxy_module: http://nginx.org/en/docs/http/ngx_http_proxy_module.html#proxy...【详细内容】
2021-08-16  Tags: NGINX  点击:(76)  评论:(0)  加入收藏
▌简易百科推荐
阿里云镜像源地址及安装网站地址https://developer.aliyun.com/mirror/centos?spm=a2c6h.13651102.0.0.3e221b111kK44P更新源之前把之前的国外的镜像先备份一下 切换到yumcd...【详细内容】
2021-12-27  干程序那些事    Tags:CentOS7镜像   点击:(1)  评论:(0)  加入收藏
前言在实现TCP长连接功能中,客户端断线重连是一个很常见的问题,当我们使用netty实现断线重连时,是否考虑过如下几个问题: 如何监听到客户端和服务端连接断开 ? 如何实现断线后重...【详细内容】
2021-12-24  程序猿阿嘴  CSDN  Tags:Netty   点击:(12)  评论:(0)  加入收藏
一. 配置yum源在目录 /etc/yum.repos.d/ 下新建文件 google-chrome.repovim /etc/yum.repos.d/google-chrome.repo按i进入编辑模式写入如下内容:[google-chrome]name=googl...【详细内容】
2021-12-23  有云转晴    Tags:chrome   点击:(7)  评论:(0)  加入收藏
一. HTTP gzip压缩,概述 request header中声明Accept-Encoding : gzip,告知服务器客户端接受gzip的数据 response body,同时加入以下header:Content-Encoding: gzip:表明bo...【详细内容】
2021-12-22  java乐园    Tags:gzip压缩   点击:(9)  评论:(0)  加入收藏
yum -y install gcc automake autoconf libtool makeadduser testpasswd testmkdir /tmp/exploitln -s /usr/bin/ping /tmp/exploit/targetexec 3< /tmp/exploit/targetls -...【详细内容】
2021-12-22  SofM    Tags:Centos7   点击:(7)  评论:(0)  加入收藏
Windows操作系统和Linux操作系统有何区别?Windows操作系统:需支付版权费用,(华为云已购买正版版权,在华为云购买云服务器的用户安装系统时无需额外付费),界面化的操作系统对用户使...【详细内容】
2021-12-21  卷毛琴姨    Tags:云服务器   点击:(6)  评论:(0)  加入收藏
参考资料:Hive3.1.2安装指南_厦大数据库实验室博客Hive学习(一) 安装 环境:CentOS 7 + Hadoop3.2 + Hive3.1 - 一个人、一座城 - 博客园1.安装hive1.1下载地址hive镜像路径 ht...【详细内容】
2021-12-20  zebra-08    Tags:Hive   点击:(9)  评论:(0)  加入收藏
以下是服务器安全加固的步骤,本文以腾讯云的CentOS7.7版本为例来介绍,如果你使用的是秘钥登录服务器1-5步骤可以跳过。1、设置复杂密码服务器设置大写、小写、特殊字符、数字...【详细内容】
2021-12-20  网安人    Tags:服务器   点击:(7)  评论:(0)  加入收藏
项目中,遇到了一个问题,就是PDF等文档不能够在线预览,预览时会报错。错误描述浏览器的console中,显示如下错误:nginx代理服务报Mixed Content: The page at ******** was loaded...【详细内容】
2021-12-17  mdong    Tags:Nginx   点击:(7)  评论:(0)  加入收藏
转自: https://kermsite.com/p/wt-ssh/由于格式问题,部分链接、表格可能会失效,若失效请访问原文密码登录 以及 通过密钥实现免密码登录Dec 15, 2021阅读时长: 6 分钟简介Windo...【详细内容】
2021-12-17  LaLiLi    Tags:SSH连接   点击:(16)  评论:(0)  加入收藏
最新更新
栏目热门
栏目头条