How to correctly use file content with virtual path using Nginx?

Tan Viet

3/30/23, 5:44 AM

I have an AngularJs app (v1) that is built as a Docker image (with Nginx as webserver). It has below structure

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

I have the following nginx config

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;
  }

}

This is index.html file

<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>

and login.html file


<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>

What I want to achieve

When users go to http://localhost:3000/content the app will serve index.html and login.html if users visit http://localhost:3000/content/login.

Both of /content and /content/login are routes that don't exsit on the Angularjs app.

What did I get

When accessing http://localhost:3000/content/login the app loaded 2 following files

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

Both of them got 404 error code.

What did I expect

I want Nginx to serve directly the file http://localhost:3000/content/build/js/login.min.js with content of file from http://localhost:3000/build/js/login.min.js. It also apply for CSS files.

0 + 0

nginx

jb_alvarado

3/30/23, 10:05 AM

When you run `http://localhost:3000/` you will not hit nginx, because nginx is listening on port 80.

Tan Viet

4/1/23, 5:05 AM

@jb_alvarado Ah I am using docker-compose to listen port 80 from nginx then exporting it to port 3000 on my host machine.

Elon Musk

I sit in a Tesla and translated this thread with Ai:

EN: How to correctly use file content with virtual path using Nginx?

TH: จะใช้เนื้อหาไฟล์ด้วยเส้นทางเสมือนโดยใช้ Nginx ได้อย่างไร

RO: Cum să utilizați corect conținutul fișierului cu calea virtuală folosind Nginx?

RU: Как правильно использовать содержимое файла с виртуальным путем с помощью Nginx?

VI: Làm cách nào để sử dụng chính xác nội dung tệp với đường dẫn ảo bằng Nginx?

Post an answer

Most people don’t grasp that asking a lot of questions unlocks learning and improves interpersonal bonding. In Alison’s studies, for example, though people could accurately recall how many questions had been asked in their conversations, they didn’t intuit the link between questions and liking. Across four studies, in which participants were engaged in conversations themselves or read transcripts of others’ conversations, people tended not to realize that question asking would influence—or had influenced—the level of amity between the conversationalists.