• 使用nginx部署多个前端项目


    • 基于域名配置
    • 基于端口配置
    • 基于location配置

    在正式开始之前,我们先来看一下nginx安装的默认配置文件: /etc/nginx/nginx.conf 文件

    可以看到图中的:include /usr/nginx/modules/*.conf,这句话的作用就是可以在nginx启动加载所有 /usr/nginx/modules/ 目录下的 *.conf 文件。 所以,平时我们为了方便管理,可以在此目录下面定义自己的 xx.conf 文件即可。

    基于域名配置

    基于域名配置,前提是先配置好了域名解析。比如说你自己买了一个域名:www.fly.com。 然后你在后台配置了2个它的二级域名: a.fly.com、 b.fly.com。

    配置文件如下:

    • 配置 a.fly.com 的配置文件:

    vim /usr/nginx/modules/a.conf

    1. server {
    2. listen 80;
    3. server_name a.fly.com;
    4. location / {
    5. root /data/web-a/dist;
    6. index index.html;
    7. }
    8. }
    • 配置 b.fly.com 的配置文件:

    vim /usr/nginx/modules/b.conf

    1. server {
    2. listen 80;
    3. server_name b.fly.com;
    4. location / {
    5. root /data/web-b/dist;
    6. index index.html;
    7. }
    8. }

    这种方式的好处是主机只要开放80端口即可。然后访问的话直接访问二级域名就可以访问。

    基于端口配置

    配置文件如下:

    • 配置 a.fly.com 的配置文件:

    vim /usr/nginx/modules/a.conf

    1. server {
    2. listen 8000;
    3. location / {
    4. root /data/web-a/dist;
    5. index index.html;
    6. }
    7. }
    8. # nginx 80端口配置 (监听a二级域名)
    9. server {
    10. listen 80;
    11. server_name a.fly.com;
    12. location / {
    13. proxy_pass http://localhost:8000; #转发
    14. }
    15. }
    • 配置 b.fly.com 的配置文件:

    vim /usr/nginx/modules/b.conf

    1. server {
    2. listen 8001;
    3. location / {
    4. root /data/web-b/dist;
    5. index index.html;
    6. }
    7. }
    8. # nginx 80端口配置 (监听b二级域名)
    9. server {
    10. listen 80;
    11. server_name b.fly.com;
    12. location / {
    13. proxy_pass http://localhost:8001; #转发
    14. }
    15. }

    可以看到,这种方式一共启动了4个server,而且配置远不如第一种简单,所以不推荐。

    基于location配置

    配置文件如下:

    • 配置 a.fly.com 的配置文件:

    vim /usr/nginx/modules/ab.conf

    1. server {
    2. listen 80;
    3. location / {
    4. root /data/web-a/dist;
    5. index index.html;
    6. }
    7. location /web-b {
    8. alias /data/web-b/dist;
    9. index index.html;
    10. }
    11. }

    注意: 这种方式配置的话,location / 目录是root,其他的要使用alias。

    可以看到,这种方式的好处就是我们只有一个server,而且我们也不需要配置二级域名,并且前端项目里要配置二级目录。

    nginx location 目录匹配详解

    nginx location 加不加 / 匹配原则

    nginx每个location都是一个匹配目录,nginx的策略是:访问请求来时,会对访问地址进行解析,从上到下逐个匹配,匹配上就执行对应location大括号中的策略,并根据策略对请求作出相应。

    1. server {
    2. listen 80;
    3. server_name localhost; # http://localhost/wddd01/xxx -> http://localhost:8080/wddd01/xxx
    4. location /wddd01/ {
    5. proxy_pass http://localhost:8080;
    6. }
    7. # http://localhost/wddd02/xxx -> http://localhost:8080/xxx
    8. location /wddd02/ {
    9. proxy_pass http://localhost:8080/;
    10. }
    11. # http://localhost/wddd03/xxx -> http://localhost:8080/wddd03*/xxx
    12. location /wddd03 {
    13. proxy_pass http://localhost:8080;
    14. }
    15. # http://localhost/wddd04/xxx -> http://localhost:8080//xxx,请注意这里的双斜线,好好分析一下。
    16. location /wddd04 {
    17. proxy_pass http://localhost:8080/;
    18. }
    19. # http://localhost/wddd05/xxx -> http://localhost:8080/hahaxxx,请注意这里的haha和xxx之间没有斜杠,分析一下原因。
    20. location /wddd05/ {
    21. proxy_pass http://localhost:8080/haha;
    22. }
    23. # http://localhost/api6/xxx -> http://localhost:8080/haha/xxx
    24. location /wddd06/ {
    25. proxy_pass http://localhost:8080/haha/;
    26. }
    27. # http://localhost/wddd07/xxx -> http://localhost:8080/haha/xxx
    28. location /wddd07 {
    29. proxy_pass http://localhost:8080/haha;
    30. }
    31. # http://localhost/wddd08/xxx -> http://localhost:8080/haha//xxx,请注意这里的双斜杠。
    32. location /wddd08 {
    33. proxy_pass http://localhost:8080/haha/;
    34. }
    35. }

    location目录后加"/",只能匹配目录,不加“/”不仅可以匹配目录还对目录进行模糊匹配。而proxy_pass无论加不加“/”,代理跳转地址都直接拼接。

  • 相关阅读:
    生产企业如何选择适合自己的工业网关?
    RK3399系统移植 | 基于 ubuntu core 20.04 构建根文件系统
    Selenium基础 — Selenium元素定位(一)
    速锐得解码新款丰田大灯总成CAN矩阵应用随动转向系统灯光改装
    如何查询文件夹中文本文件的内容 (LINQ) (C#)
    torch 写模型遇到 RuntimeError: Found dtype Double but expected Float
    悬浮工具球(仿 iphone 辅助触控)
    Netty之非阻塞处理
    (49)STM32——照相机实验
    tomcat线程池-深度分析tomcat线程池设计与现实
  • 原文地址:https://blog.csdn.net/huang714/article/details/125553083