Nginx Question posted in
The official documentation can be found here.

How to host multiple website with same domain but different path ex: domain.fr/siteA, domain.fr/siteB, /siteC with docker and nginx reverse proxy

Just wondering what is the difference between

import { getContent } from '@/assets/welcome-content.js'
import Navigation from '@/components/Navigation'

and

import { getContent } from '~/assets/welcome-content.js'
import Navigation from '~/components/Navigation'

Both seems to work
but when I add the lines below in nuxt.config.js

router: {
     base: '/siteA/'
   },

I have the following error :

Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location: "/".

Context :
I have 3 nuxt website that I want to put under the same domain

  • mysite.fr/siteA/
  • mysite.fr/siteB/
  • mysite.fr/siteC/

As for my Nginx conf

server {
    ...
    server_name example.com;
    ...
    location /siteA {
        root /var/www/siteA/dist;
        ...
    }
    location /siteB {
        root /var/www/siteB/dist;
        ...
    }
    ...
}
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Seems like this approach is not good. What I end up doing to have multiple website / webapp under the same domain separated by their path / location is via reverse proxy of nginx.

    If you are interested, you'll need to have docker and nginx in your VPS.

    1. First if you haven't done it yet, deploy your apps in docker This guide also works with nuxt, vue and other node apps. if you have other then its also ok, the most important is to run your web app/site in bridge. ex : docker run -network=bridge -p 127.0.0.1:<hostport>:<containerport> whereas host is what you'll expose to nginx, and containerport is the port to access your app inside the container.
      For more doc:
      https://nodejs.org/en/docs/guides/nodejs-docker-webapp/
      https://tecadmin.net/tutorial/docker/docker-manage-ports/
    2. Once all your apps running in each container, time to reverse proxy with nginx. Inside your nginx.conf
    server { # domain.fr

    listen 443 ssl; # managed by Certbot
    ssl_certificate /etc/letsencrypt/live/domain.fr/fullchain.pem; # managed by Certbot
    ssl_certificate_key /etc/letsencrypt/live/domain.fr/privkey.pem; # managed by Certbot

    server_name domain.art;

    add_header Referrer-Policy                      "no-referrer"   always;
    add_header X-Content-Type-Options               "nosniff"       always;
    add_header X-Download-Options                   "noopen"        always;
    add_header X-Frame-Options                      "SAMEORIGIN"    always;
    add_header X-Permitted-Cross-Domain-Policies    "none"          always;
    add_header X-Robots-Tag                         "none"          always;
    add_header X-XSS-Protection                     "1; mode=block" always;
    add_header Strict-Transport-Security            "max-age=15768000";

    # Remove X-Powered-By, which is an information leak
    fastcgi_hide_header X-Powered-By;

    # set max upload size
    client_max_body_size 512M;
    fastcgi_buffers 64 4K;

    location /sitea {
      proxy_pass http://127.0.0.1:<hostport>/;
      proxy_set_header Host $host;
      proxy_set_header X-Real-IP $remote_addr;
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
      proxy_set_header X-Forwarded-Proto $scheme;
      proxy_read_timeout 90;

      access_log /nginx/sitea/access.log;
      error_log /nginx/sitea/error.log;
    }
    
    location /siteb {
      ...
    }
} # end of domain.fr

    my nginx command sudo docker run --name nginx -v /docker/nginx:/etc/nginx --log-opt max-size=10m --log-opt max-file=5 --network=host so that inside /docker/nginx I have nginx.conf and every changes I run docker restart nginx to apply changes.

    1. Enjoy !

  2. 0

    The error you are getting means that you are trying to navigate an url you are already on. It does not have any relations with the prefixes (aliases) you mentioned. They are just shortcuts to the "src" directory to be able to easily import the components you need.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search