Nginx是一个流行的web服务器,用于提供web应用程序的静态资源(客户端源)。我将解释如何将Nginx设置为静态内容资源web服务器,以及如何将它配置为linux系统上的反向代理(连接客户机和后端)。基本上如何设置前端+后端与Nginx在Linux上。如果你:
如果您使用任何框架(如Vue、Angular或React)开发前端应用程序,那么您最终将生成一个产品包——准备部署在web服务器上的文件(html、js、css)。在大多数框架中,运行生产构建将类似于npm构建,或者例如在Vue: Quasar构建中使用Quasar。您的生产文件应该在项目文件夹中生成的dest文件夹中。
在destfolder中生成的文件(前端应用程序)可以放在web服务器上,比如Apache或Nginx。
我假设您已经在目标机器上安装了Nginx(就像您的服务器机器一样)。
Nginx配置可以在/etc/ Nginx下找到主配置文件名为nginx.conf。取决于你的系统配置可以有一点不同:
假设您的域名是domain.com。您希望在http://domain.com(默认80端口)下设置前端应用程序。
nginx的配置如下:
如果您的配置基于nginx.conf (例如Arch linux):
在nginx.conf的http部分粘贴上面的配置
如果你使用Ubuntu:
下一步是向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。这是配置:
将此配置粘贴到server{}部分(您在上面定义的)。
最后它应该是这样的:
最后 :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
讨论:请加入知识星球或者小红圈【首席架构师圈】