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

【问题标题】：Nginx configuration for multiple static sites on same server instance同一服务器实例上多个静态站点的 Nginx 配置
【发布时间】：2019-07-22 10:15:12
【问题描述】：

我有三个静态网站。我正在使用 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;
   }

}

【问题讨论】：

标签： nginx vue.js vue-router nginx-location nginx-config

【解决方案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

【讨论】：