如何使用 docker 和 nginx 反向代理托管具有相同域但路径不同的多个网站例如：domain.fr/siteA、domain.fr/siteB、/siteC

Posted 2023-02-22

【中文标题】如何使用 docker 和 nginx 反向代理托管具有相同域但路径不同的多个网站例如：domain.fr/siteA、domain.fr/siteB、/siteC

【英文标题】：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

【发布时间】：2021-07-29 13:11:53

【问题描述】：

只是想知道两者有什么区别

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

和

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

两者似乎都有效 但是当我在 nuxt.config.js 中添加以下行时

router: 
     base: '/siteA/'
   ,

我有以下错误：

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

上下文： 我有 3 个 nuxt 网站，我想放在同一个域下

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

至于我的 nginx 配置

server 
    ...
    server_name example.com;
    ...
    location /siteA 
        root /var/www/siteA/dist;
        ...
    
    location /siteB 
        root /var/www/siteB/dist;
        ...
    
    ...

【问题讨论】：

这个问题的答案：@ vs ~ 前缀有什么区别由Sezerc回答-> ***.com/a/67448513/13370946。

【参考方案1】：

您遇到的错误意味着您正在尝试浏览您已经在使用的网址。它与您提到的前缀（别名）没有任何关系。它们只是“src”目录的快捷方式，可以轻松导入您需要的组件。

【参考方案2】：

似乎这种方法不好。 我最终要做的是通过 nginx 的反向代理在同一个域下拥有多个网站/webapp，并通过它们的路径/位置分隔。

如果您有兴趣，您需要在您的 VPS 中安装 docker 和 nginx。

首先，如果您还没有完成，请在 docker 中部署您的应用 本指南也适用于 nuxt、vue 和其他节点应用。如果你有其他的也可以，最重要的是在桥中运行你的网络应用程序/站点。例如：docker run -network=bridge -p 127.0.0.1:<hostport>:<containerport> 而 host 是您将向 nginx 公开的内容，而 containerport 是访问容器内您的应用程序的端口。 更多文档：https://nodejs.org/en/docs/guides/nodejs-docker-webapp/ https://tecadmin.net/tutorial/docker/docker-manage-ports/ 在每个容器中运行所有应用程序后，就可以使用 nginx 进行反向代理了。 在你的 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

我的 nginx 命令sudo docker run --name nginx -v /docker/nginx:/etc/nginx --log-opt max-size=10m --log-opt max-file=5 --network=host 所以在 /docker/nginx 里面我有 nginx.conf 和我运行的每一个更改 docker restart nginx 来应用更改。

享受吧！