[英]How to set up nginx reverse proxy with multiple node apps
I have two Vue.js apps that I want to run on the same domain (eg, https://localhost:8080/app1 and https://localhost:8080/app2 ).我有两个 Vue.js 应用程序想要在同一个域上运行(例如, https://localhost:8080/app1和https://localhost:8080/app2 )。 Both apps run in separate docker containers, and i have set up a third docker container running nginx with a reverse proxy in order to have ssl.
这两个应用程序都在单独的 docker 容器中运行,并且我已经设置了第三个 docker 容器,该容器运行带有反向代理的 nginx 以便拥有 ssl。
I am able to visit the apps at the wanted locations, but there are some resources missing (images, fonts etc).我可以在所需位置访问应用程序,但缺少一些资源(图像、字体等)。 I realize that my nginx server looks for them at https://localhost:8080/my_resource , but I can't figure out how to forward these to the correct locations (ie, https://localhost:8080/app1/my_resource , and similar for app2).
我意识到我的 nginx 服务器在https://localhost:8080/my_resource 寻找它们,但我不知道如何将它们转发到正确的位置(即https://localhost:8080/app1/my_resource ,和 app2 类似)。
I've tried using the "try_files" directive in nginx, like so:我尝试在 nginx 中使用“try_files”指令,如下所示:
location / {
try_files $uri $uri/ http://app1:8080 http://app2:8080
}
but it does not work.但它不起作用。
Here is my nginx config file这是我的 nginx 配置文件
server {
listen 80;
listen [::]:80;
server_name localhost;
return 301 https://$server_name$request_uri;
}
# Change the default configuration to enable ssl
server {
listen 443 ssl;
listen [::443] ssl;
ssl_certificate /etc/nginx/certs/my_app.crt;
ssl_certificate_key /etc/nginx/certs/my_app.key;
server_name localhost;
server_tokens off;
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;
location / {
if ($http_referer = "https://localhost:8080/app1/") {
proxy_pass http://app1:8080;
break;
}
if ($http_referer = "https://localhost:8080/app2/") {
proxy_pass http://app2:8080;
break;
}
}
location /app1/ {
proxy_pass http://app1:8080/;
}
location /app2/ {
proxy_pass http://app2:8080/;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root /usr/share/nginx/html;
}
}
And this is my docker-compose这是我的 docker-compose
version: "3.6"
services:
app1:
image: "app1"
expose:
- "8080"
command: ["serve", "-s", "/app/app1/dist", "-l", "8080"]
app2:
image: "app2"
expose:
- "8080"
command: ["serve", "-s", "/app/app2/dist", "-l", "8080"]
nginx:
image: "nginx"
ports:
- "8080:443"
depends_on:
- "app1"
- "app2"
Thanks for any input :)感谢您的任何输入:)
After a lot of trial and error, I found a solution.经过大量的反复试验,我找到了解决方案。 I do not think this is the optimal solution, but it's working.
我不认为这是最佳解决方案,但它正在起作用。 Here is my nginx configuration:
这是我的nginx配置:
# Pass any http request to the https service
server {
listen 80;
listen [::]:80;
server_name localhost;
return 301 https://$server_name$request_uri;
}
# Configure the ssl service
server {
listen 443 ssl;
listen [::443] ssl;
ssl_certificate /etc/nginx/certs/my_app.crt;
ssl_certificate_key /etc/nginx/certs/my_app.key;
server_name localhost;
server_tokens off;
proxy_set_header Host $http_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;
location / {
proxy_intercept_errors on;
error_page 404 = @second;
proxy_pass http://app1:80;
}
location @second {
proxy_pass http://app2:80;
}
location /app1/ {
rewrite ^/app1(.*) /$1 break;
proxy_pass http://app1:80;
}
location /app2/ {
rewrite ^/app2(.*) /$1 break;
proxy_pass http://app2:80;
}
# redirect server error pages to the static page /50x.html
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root /usr/share/nginx/html;
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.