vue+nginx 请求出现302_Web应用架构5分钟把前端应用程序部署到NGINX

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://pub.intelligentx.net/setup-frontend-application-nginx-5-minutes

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

微信公众号	【首席架构师智库】 适合物业仔细反复阅读。 精彩图文详解架构方法论，架构实践，技术原理，技术趋势。 我们在等你，赶快扫描关注吧。
微信小号	激烈深度讨论，报上你想加入的群：企业架构，云计算，大数据，数据科学，物联网，人工智能，安全，全栈开发，DevOps，数字化. 社群已经有5000人，赶快加入讨论。
QQ群	深度交流企业架构，业务架构，应用架构，数据架构，技术架构，集成架构，安全架构。以及大数据，云计算，物联网，人工智能等各种新兴技术。 QQ大群，不用担心群满。
视频号	【首席架构师智库】 1分钟快速了解架构相关的基本概念，模型，方法，经验。 每天1分钟，架构心中熟。
知识星球	向大咖提问，近距离接触，或者获得私密资料分享。	知识星球【首席架构师圈】
微信圈子	志趣相投的同好交流。	微信圈子【首席架构师圈】
喜马拉雅	路上或者车上了解最新黑科技资讯，架构心得。	【智能时刻，架构君和你聊黑科技】
知识星球	认识更多朋友，职场和技术闲聊。	知识星球【职场和技术】

谢谢大家关注，转发，点赞和在看。