同一服务器实例上多个静态站点的 Nginx 配置

Question

我有三个静态站点。我正在为每个文件夹使用 Vue 2 和运行构建。

我想在同一个服务器实例上托管所有三个静态文件。现在我没有域，所以我想托管在服务器的 IP 上。

我在 html/www 文件夹中有文件夹

first_folder
second_folder
third_folder

以上三个文件夹中都有index.html个文件

假设我有一个 IP 地址 3.12.178.229

我想访问像

这样的文件夹

http://3.12.178.229     // i.e path for first_folder
http://3.12.178.229/second_path    // i.e path for second_folder
http://3.12.178.229/third_path     // i.e path for third_folder

我可以访问 first_folder 拥有的 index.html 文件，但是当我尝试使用 IP http://3.12.178.229/second_folder 访问 second_folder 时，它没有显示任何内容。

{
   listen 80;
   server_name 3.12.178.229;

   location / {
     root path_to_first_folder/first_folder; // I am able to access this
     index  index.html index.htm;
     try_files $uri $uri/ /index.html;
   }

   location /second_path {
     root path_to_first_folder/second_folder; // I am able to access this

     index  index.html index.htm;
     try_files $uri $uri/ /index.html;
   }

   location /third_path {
     root path_to_first_folder/third_folder; // I am able to access this

     index  index.html index.htm;
     try_files $uri $uri/ /index.html;
   }

}

Answer 1

请求文件的路径名是通过将 root 指令的值与 URI 连接起来构造的。因此，如果（例如）second_path 和 second_folder 实际上是同一个名称，则只能对子文件夹使用 root。有关详细信息，请参阅 this document。

例如：

location /foo {
    root /path/to/root;
}

URI /foo/index.html 位于 /path/to/root/foo/index.html

其中 second_path 和 second_folder 是不同的名称，您需要使用 alias 指令。有关详细信息，请参阅 this document。

例如：

location /foo {
    alias /path/to/root/bar;
}

URI /foo/index.html 位于 /path/to/root/bar/index.html

同一服务器实例上多个静态站点的 Nginx 配置

Nginx configuration for multiple static sites on same server instance

nginx

vue.js

nginx-location

vue-router

nginx-config