VueJs网站嵌套在React网站中

时间:2018-08-17 21:48:12

标签: nginx web-hosting nginx-reverse-proxy

你好

我知道这是一个奇怪的问题:D

我在domain.io托管了一个由React提供支持的网站

我在portfolio.domain.io托管由VueJs提供支持的投资组合

我正在尝试配置nginx,以便:domain.io/portfolio显示portfolio.domain.io的内容

我尝试了很多操作,例如proxy_pass或redirect,但似乎我做错了...

当前我在我的配置文件中有此内容:

location = /portfolio {
  rewrite ^ https://portfolio.domain.io$request_uri permanent;
}

也尝试过:

  location /portfolio {
    proxy_pass  https://portfolio.domain.io$request_uri;
    proxy_set_header Host  portfolio.domain.io;
  }

您对我可以尝试的方法有任何想法,或者甚至有可能吗?

谢谢!

编辑:(完整配置)

```

server {

        root /var/www/ivan/website/dist;
        index index.html index.php ndex.htm index.nginx-debian.html;

        server_name domain.io _;


    location = /portfolio {
            rewrite ^ https://portfolio.domain.io$request_uri permanent;            
    }

        location / {
                try_files $uri $uri/ =404;
        }

        location ~ /\.ht {
                deny all;
        }

        location ~*  \.(jpg|jpeg|png|gif|ico|css|js)$ {
            expires 15d;
        }

        location ~*  \.(pdf)$ {
            expires 30d;
        }
        listen [::]:443 ssl http2; 
    listen 443 ssl http2; 
        ssl_certificate /etc/letsencrypt/live/domain.io/fullchain.pem; # managed by Certbot
        ssl_certificate_key /etc/letsencrypt/live/domain.io/privkey.pem; # managed by Certbot
        include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
        ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot
}
server {
    if ($host = domain.io) {
        return 301 https://$host$request_uri;
    } # managed by Certbot

    server_name domain.io _;
    return 404; # managed by Certbot
}

```

1 个答案:

答案 0 :(得分:0)

我认为这不是您要寻找的答案,但可以解决问题。我曾经有个窍门,但这需要您的两个域都具有有效的SSL证书。

诀窍是让iframe占据100%的视图,并且其行为就像单页应用一样。 (我猜这是怎么回事?)。

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
        margin: 0;
        padding: 0;
        border: 0;
        font-size: 100%;
        font: inherit;
        vertical-align: baseline;
}

body {
    height: 100vh;
    width: 100vw;
    overflow: hidden;
}

iframe {
    height: 100%;
    width: 100%;
    overflow: hidden;
}
<!DOCTYPE html>
<html lang="fr">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="./style.css">
  <script src="script.js "></script>
  <title>Your Title</title>
</head>

<body>
  <iframe src="https://portfolio.domain.io/"></iframe>
</body>

</html>

没有有效的SSL证书可能无法显示iframe或呈现图片。