☰

如何使用 Nginx 正確使用帶有虛擬路徑的文件內容？

tag-icon • tag-icon nginx
如何使用 Nginx 正確使用帶有虛擬路徑的文件內容？

我有一個 AngularJs 應用程式 (v1)，它建構成 Docker 映像（使用 Nginx 作為網頁伺服器）。它具有以下結構

-app
  --build
    --js
      |-app.min.js
      |-login.min.js
    --styles
      |-app.min.css
      |-login.min.css
  --assets
    --images
    --fonts
  --index.html
  --login.html

我有以下內容nginx 設定

server {
  listen 80;
  error_log  /var/log/nginx/error.log;
  access_log /var/log/nginx/access.log;

  root /usr/share/nginx/html;

  location /content {
    rewrite ^/content$ /index.html;
  }

  location /content/login {
    rewrite ^/content/login$ /login.html;
  }

}

這是索引.html文件

<html lang="en" data-ng-app="app">
  <header>
    <script src="build/js/app.min.js"></script>
    <link rel="stylesheet" href="build/styles/app.min.css">
  </header>
  <body>
    ...
  </body>
</html>

和登入.html文件


<html lang="en" data-ng-app="app-login">
  <header>
    <script src="build/js/login.min.js"></script>
    <link rel="stylesheet" href="build/styles/login.min.css">
  </header>
  <body>
    ...
  </body>
</html>

我想要實現什麼

當用戶訪問http://localhost:3000/content該應用程式時index.html，login.html如果用戶訪問http://localhost:3000/content/login.

和 都是/contentAngularjs/content/login應用程式中不存在的路由。

我得到了什麼

http://localhost:3000/content/login訪問應用程式時載入以下 2 個文件

  • http://localhost:3000/content/build/js/login.min.js
  • http://localhost:3000/content/build/styles/login.min.css

他們都收到了 404 錯誤代碼。

我期待什麼

我希望 Nginx 直接提供http://localhost:3000/content/build/js/login.min.js包含來自http://localhost:3000/build/js/login.min.js.它也適用於 CSS 文件。

相關內容