一学就会！Nginx轻松添加子项目，解决子项目JS和CSS资源无法加载的难题

Nginx添加子项目

1. 配置子项目

   • 创建子项目目录：在您的服务器上，创建一个新的目录来存放子项目。例如，如果您的子项目名为“B”，则可以在/var/www目录下创建/var/www/B目录。
   • 复制Nginx配置文件：将Nginx的主配置文件/etc/nginx/nginx.conf复制一份到/etc/nginx/sites-available/目录下，并将其重命名为<子项目名称>.conf。例如，如果您的子项目名为“B”，则将文件重命名为/etc/nginx/sites-available/B.conf。
   • 编辑Nginx配置文件：打开<子项目名称>.conf文件，并在其中添加以下内容：

   server {
       listen 80;
       server_name <子项目域名>;
       root <子项目目录>;
   
       location / {
           try_files $uri $uri/ /index.html;
       }
   }
   

   • 将<子项目域名>替换为您子项目的域名或IP地址，将<子项目目录>替换为您子项目的目录路径。

2. 启用子项目

   • 创建符号链接：在/etc/nginx/sites-enabled/目录下，创建一个指向<子项目名称>.conf文件的符号链接。例如，如果您的子项目名为“B”，则可以使用以下命令创建符号链接：

   ln -s /etc/nginx/sites-available/B.conf /etc/nginx/sites-enabled/B.conf
   

3. 重新加载Nginx

   • 使用以下命令重新加载Nginx：

   nginx -s reload
   

4. 测试子项目

   • 打开浏览器，访问您的子项目域名或IP地址。如果一切配置正确，您应该能够看到子项目的首页。

解决子项目JS和CSS资源无法加载的问题

1. 检查文件路径

   • 确保您的JS和CSS文件路径正确。在您的HTML代码中，这些文件的路径应该是相对于您的子项目根目录。例如，如果您的JS文件位于/js/main.js，则在HTML代码中，您应该使用<script src="/js/main.js"></script>。

2. 检查文件权限

   • 确保您的JS和CSS文件具有正确的文件权限。这些文件应该对Web服务器用户可读。在大多数情况下，Web服务器用户是www-data。

3. 检查Nginx配置

   • 确保您的Nginx配置正确。在<子项目名称>.conf文件中，您应该看到以下内容：

   location / {
       try_files $uri $uri/ /index.html;
   }
   

   • 这段配置告诉Nginx，如果请求的文件不存在，则尝试查找该文件的文件名加上“/”后的文件，然后尝试查找index.html文件。

4. 检查浏览器缓存

   • 有时，浏览器可能会缓存您的JS和CSS文件。如果您对这些文件进行了更改，但浏览器仍无法加载它们，则可以尝试清除浏览器缓存。

5. 检查服务器日志

   • 如果您仍然无法加载JS和CSS文件，则可以检查服务器日志以获取更多信息。Nginx的错误日志通常位于/var/log/nginx/error.log。