search

yaoningvital / blog

my blog
31 stars 4 forks source link

在一个服务器上，同一个IP，相同端口上，nginx怎样配置以支持多个应用？ #198

Open yaoningvital opened 4 years ago

yaoningvital commented 4 years ago

一、问题场景

怎样在同一个IP，相同端口上，通过配置nginx.conf，使得一个nginx支持多个应用？

即实现如下的访问：

http://服务器IP/应用A      ===>  访问应用A
http://服务器IP/应用B      ===>  访问应用B
http://服务器IP/应用C      ===>  访问应用C

二、解决办法

第一步、nginx.conf 的设置

nginx.conf 的配置如下：

server {
    listen      80;
    server_name localhost;
    location / {
               # 这里的root应该配置成用不带二级路径的url访问时要显示的应用的打包文件所在的目录
               # 比如当 http://xxx.xx.com 访问时我要显示 华容道 这个应用，那么这里的root 应该配置成华容道打包文件所在的路径：/home/yaoning/hua-rong-dao
        root    /home/yaoning/hua-rong-dao; 
        index   index.html index.htm;
    }

    location ^~/chinese-chess {
               # 配置应用 chinese-chess
        alias   /home/yaoning/chinese-chess;
        index   index.html;
        try_files   $uri  $uri/  /chinese-chess/index.html;
    }

    location ^~/hua-rong-dao {
               # 配置应用 hua-rong-dao
        alias   /home/yaoning/hua-rong-dao;
        index   index.html;
        try_files   $uri  $uri/  /hua-rong-dao/index.html;
    }

    location ^~/jigsaw-puzzle {
               # 配置应用 jigsaw-puzzle
        alias   /home/yaoning/jigsaw-puzzle;
        index   index.html;
        try_files   $uri  $uri/  /jigsaw-puzzle/index.html;
    }
}

第二步、修改react项目的 package.json

在项目文件 package.json 中，需要增加一个配置项，添加下面的 homepage ：

{
...
  "homepage": "."
}

说明： 添加 homepage ，值为'.' 后，react项目再打包之后，在 index.html 中引用的静态打包文件的路径下如下所示：

// package.json 中 homepage: '.'
<head>
    ...
    <link href="./favicon.ico" rel="icon"/>
    ...
    ...
    <link href="./logo192.png" rel="apple-touch-icon"/>
    <link href="./manifest.json" rel="manifest"/>
    <link href="./static/css/2.4a7d1208.chunk.css" rel="stylesheet">
    <link href="./static/css/main.2c66994c.chunk.css" rel="stylesheet">
</head>
<script src="./static/js/2.77ae6bf6.chunk.js"></script>
<script src="./static/js/main.bc1b218c.chunk.js"></script>

即它会从与 index.html 同一级的目录下去找这些静态资源。

如果不配置 homepage 为 '.'，打包后的 index.html 中引用的静态资源路径如下所示：

// package.json 中不配置 homepage为'.'
<head>
    ...
    <link href="/favicon.ico" rel="icon"/>
    ...
    ...
    <link href="/logo192.png" rel="apple-touch-icon"/>
    <link href="/manifest.json" rel="manifest"/>
    <link href="/static/css/2.4a7d1208.chunk.css" rel="stylesheet">
    <link href="/static/css/main.2c66994c.chunk.css" rel="stylesheet">
</head>
<script src="/static/js/2.77ae6bf6.chunk.js"></script>
<script src="/static/js/main.bc1b218c.chunk.js"></script>

那么它会从 nginx.conf 中配置的 root 路径下去找 相应的资源。

具体看下面的配置案例分析。

三、配置案例分析

1、案例一

package.json不配置homepage；nginx.conf 配置如下：

server {
    listen      80;
    server_name localhost;
    location / {
        root    /home/yaoning/jigsaw-puzzle; 
        index   index.html index.htm;
    }

    location ^~/chinese-chess {
        alias   /home/yaoning/chinese-chess;
        index   index.html;
        try_files   $uri  $uri/  /chinese-chess/index.html;
    }
}

查找资源的流程如下：

  1. 浏览器中访问： 'http://ip地址/chinese-chess '；

  2. nginx服务会根据 nginx.conf 中配置的 location chinese-chess 的部分，找到 /home/yaoning/chinese-chess 这个目录，在下面找到 index.html 文件；

  3. index.html 文件中会要去找很多静态资源，这些静态资源的路径是这样的：<script src="/static/js/main.bc1b218c.chunk.js"></script>；

  4. 因为 nginx.conf 中配置了 root，nginx会到这个 root 路径下去找这个静态资源，即它的查找路径是： /home/yaoning/jigsaw-puzzle/static/js/main.bc1b218c.chunk.js ；显然，这个路径是错误的，在这个路径下是找不到目标文件的。

2、案例二

package.json不配置homepage；nginx.conf 配置如下：

server {
    listen      80;
    server_name localhost;
    #location / {
    #   root    /home/yaoning/jigsaw-puzzle; 
    #   index   index.html index.htm;
    # }

    location ^~/chinese-chess {
        alias   /home/yaoning/chinese-chess;
        index   index.html;
        try_files   $uri  $uri/  /chinese-chess/index.html;
    }
}

查找资源的流程如下：

  1. 浏览器中访问： 'http://ip地址/chinese-chess '；

  2. nginx服务会根据 nginx.conf 中配置的 location chinese-chess 的部分，找到 /home/yaoning/chinese-chess 这个目录，在下面找到 index.html 文件；

  3. index.html 文件中会要去找很多静态资源，这些静态资源的路径是这样的：<script src="/static/js/main.bc1b218c.chunk.js"></script>；

  4. nginx.conf 中没有配置 root，那么nginx 会要到默认的 root 路径下找。查找的路径如下： /usr/local/nginx-1.17.7/html/static/js/main.bc1b218c.chunk.js ；这里的 /usr/local/nginx-1.17.7/html 是nginx默认的 root 路径。显然这个路径也是错误的。chinese-chess 的静态资源放在 /home/yaoning/chinese-chess 下，必须要在这个路径下才能找到对应的静态资源。

3、案例三

package.json 中配置homepage为 '.' ；nginx.conf 配置如下：

server {
    listen      80;
    server_name localhost;
    location / {
        root    /home/yaoning/jigsaw-puzzle; 
        index   index.html index.htm;
    }

    location ^~/chinese-chess {
        alias   /home/yaoning/chinese-chess;
        index   index.html;
        try_files   $uri  $uri/  /chinese-chess/index.html;
    }
}

查找资源的流程如下：

  1. 浏览器中访问： 'http://ip地址/chinese-chess '；

  2. nginx服务会根据 nginx.conf 中配置的 location chinese-chess 的部分，找到 /home/yaoning/chinese-chess 这个目录，在下面找到 index.html 文件；

  3. index.html 文件中会要去找很多静态资源，这些静态资源的路径是这样的：<script src="./static/js/main.bc1b218c.chunk.js"></script>；

  4. 因为 index.html 中查找的静态资源的路径是 './static...' 开头的，所以它是在当前 index.html 文件的同一级目录下去找 static/js/... ，因为 这些静态资源就是在 /home/yaoning/chinese-chess 下，所以当然是可以找到的。

  5. nginx.conf 中的 root 应该配置成当你用 'http://xxx.xx.com' 访问，即不带二级路径访问时，显示的应用所在的路径。这里 root 配置成了应用 jigsaw-puzzle 所在的路径，所以用 'http://xxx.xx.com' 访问时，会显示应用 jigsaw-puzzle 。如果这里不配置 root，则会去找nginx默认的root路径，即 /usr/local/nginx-1.17.7/html 下去找 index.html 。