我在nginx上有一个用于Angular应用程序的docker容器，名为“网站”。我想从其他名为“ test.nginx”的nginx反向代理容器访问此容器。但是我不知道如何为反向代理配置nginx.conf。
首先，我正在为angular应用创建docker镜像。 Dockerfile：
FROM nginx:alpine
COPY default.conf /etc/nginx/conf.d/default.conf
COPY angular /usr/share/nginx/html
这里的角度文件夹包含角度构建文件（index.html，main.js，runtime.js ...）
default.conf：
server {
listen 80;
server_name localhost;
location / {
root /usr/share/nginx/html;
index index.html index.htm;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root /usr/share/nginx/html;
}
}
docker-compose.yml
version: '3.4'
services:
nginx:
image: nginx:latest
container_name: test.nginx
volumes:
- ./nginx.conf:/etc/nginx/nginx.conf
ports:
- 2020:80
environment:
- NETWORK_ACCESS=internal
website:
image: website
container_name: website
restart: on-failure
ports:
- 2121:80
和test.nginx容器使用此nginx.conf
worker_processes 1;
events { worker_connections 1024; }
http {
server {
location /client/ {
proxy_pass http://website/;
proxy_redirect 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-Host $server_name;
}
}
}
当我尝试使用http://localhost:2121到达有角度的应用程序时，一切都很好。 但是如果我尝试使用此http://localhost:2020/client/，我会收到这些错误
website | 192.168.208.2 - - [30/Apr/2019:15:11:18 +0000] "GET / HTTP/1.0" 304 0 "-" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.103 Safari/537.36" "192.168.208.1"
test.nginx | 192.168.208.1 - - [30/Apr/2019:15:11:18 +0000] "GET /client/ HTTP/1.1" 304 0 "-" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.103 Safari/537.36"
test.nginx | 2019/04/30 15:11:18 [error] 6#6: *5 open() "/etc/nginx/html/runtime.js" failed (2: No such file or directory), client: 192.168.208.1, server: , request: "GET /runtime.js HTTP/1.1", host: "localhost:2020", referrer: "http://localhost:2020/client/"
test.nginx | 192.168.208.1 - - [30/Apr/2019:15:11:18 +0000] "GET /runtime.js HTTP/1.1" 404 556 "http://localhost:2020/client/" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.103 Safari/537.36"
test.nginx | 2019/04/30 15:11:18 [error] 6#6: *3 open() "/etc/nginx/html/polyfills.js" failed (2: No such file or directory), client: 192.168.208.1, server: , request: "GET /polyfills.js HTTP/1.1", host: "localhost:2020", referrer: "http://localhost:2020/client/"
test.nginx | 192.168.208.1 - - [30/Apr/2019:15:11:18 +0000] "GET /polyfills.js HTTP/1.1" 404 556 "http://localhost:2020/client/" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.103 Safari/537.36"
test.nginx | 2019/04/30 15:11:18 [error] 6#6: *4 open() "/etc/nginx/html/styles.js" failed (2: No such file or directory), client: 192.168.208.1, server: , request: "GET /styles.js HTTP/1.1", host: "localhost:2020", referrer: "http://localhost:2020/client/"
test.nginx | 192.168.208.1 - - [30/Apr/2019:15:11:18 +0000] "GET /styles.js HTTP/1.1" 404 556 "http://localhost:2020/client/" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.103 Safari/537.36"
test.nginx | 2019/04/30 15:11:18 [error] 6#6: *1 open() "/etc/nginx/html/vendor.js" failed (2: No such file or directory), client: 192.168.208.1, server: , request: "GET /vendor.js HTTP/1.1", host: "localhost:2020", referrer: "http://localhost:2020/client/"
test.nginx | 192.168.208.1 - - [30/Apr/2019:15:11:18 +0000] "GET /vendor.js HTTP/1.1" 404 556 "http://localhost:2020/client/" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.103 Safari/537.36"
test.nginx | 192.168.208.1 - - [30/Apr/2019:15:11:18 +0000] "GET /main.js HTTP/1.1" 404 556 "http://localhost:2020/client/" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.103 Safari/537.36"
test.nginx | 2019/04/30 15:11:18 [error] 6#6: *6 open() "/etc/nginx/html/main.js" failed (2: No such file or directory), client: 192.168.208.1, server: , request: "GET /main.js HTTP/1.1", host: "localhost:2020", referrer: "http://localhost:2020/client/"
当我仅使用index.html文件而不是有角构建文件时，我可以同时从http://localhost:2020/client/和http://localhost:2121到达index.html文件
请有人帮帮我吗？ 谢谢：）
***编辑：
我认为我遇到此错误是因为angular是单页应用程序。 现在的问题是如何为水疗中心配置位置和proxy_pass？
答案 0 :(得分：1)
您不能仅使用NGINX和Angular进行反向代理。
我们要做的是将haproxy（http://www.haproxy.org/）添加为单独的服务，并对其进行配置，以使其能够查看nginx服务器。
此docker映像可能是一个很好的开始（https://hub.docker.com/_/haproxy）
对于我们的nginx配置，它看起来类似于：
# Api Endpoint
location /api/{
proxy_pass https://api.company.com:1234/;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
然后，在我们的HA代理中（使用HTTPS）。我添加了一些评论来帮助您完成此操作。
global
log /dev/log local0
log /dev/log local1 notice
chroot /var/lib/haproxy
stats socket /run/haproxy/admin.sock mode 660 level admin expose-fd listeners
stats timeout 30s
user haproxy
group haproxy
daemon
# Default SSL material locations
ca-base /etc/ssl/certs
crt-base /etc/ssl/private
server=haproxy
ssl-default-bind-ciphers ECDH+AESGCM:DH+AESGCM:ECDH+AES256:DH+AES256:ECDH+AES128:DH+AES:RSA+AESGCM:RSA+AES:!aNULL:!MD5:!DSS
ssl-default-bind-options no-sslv3
frontend server1 #Where the user is coming from (anywhere)
mode http
bind 0.0.0.0:443 ssl crt /etc/ssl/certificate.pem
acl api url_reg ^\/API/.* # Check the contents of the URL from the user's browser
use_backend api_server if api # If the ACL above is true:
# Use the api_server desription below
backend api_server # Define the api_server
mode http
server appsrv-1 10.1.1.3:443/API/ check ssl verify none
# appsrv-1 is just a title of the server.
# Use the IP to where the Backend is
# specify the port and the location. In your case
# you would use /client/
defaults
log global
mode http
option httplog
option dontlognull
timeout connect 5000
timeout client 50000
timeout server 50000
errorfile 400 /etc/haproxy/errors/400.http
errorfile 403 /etc/haproxy/errors/403.http
errorfile 408 /etc/haproxy/errors/408.http
errorfile 500 /etc/haproxy/errors/500.http
errorfile 502 /etc/haproxy/errors/502.http
然后，当您完成配置HA代理并指向您的nginx服务器时，请确保您的用户使用FQDN的IP地址首先进入haproxy。然后，HA代理将为您处理反向代理。
关于您在SPA上的问题，我的理解是，您在NGINX配置中添加了：
proxy_pass http://api.company.com:1234/; # Where the proxy is
proxy_intercept_errors on; # IF there is a problem
error_page 404 = /index.html; # Serve the index.html as the 404 page