使用Nginx和Spring进行Dockerizing React，通过Web浏览器访问两者 [英] Dockerizing React with Nginx and Spring, access via web browser to both
问题描述
我的应用程序包含两个组件:
I have the application that contains of two components:
- React的前端在Nginx上工作
- 春季后端
两者都已被docker化，并且位于同一Docker网络中.
Spring应用程序提供了用于前端的API.
在 http://mypublicaddress.com 端口80上可以使用前端
我想将前端和后端Docker容器配置为能够从外部"用户角度显示数据.这意味着前端应能够从后端获取JSON数据并将其显示给用户.
Both have been dockerized and are located in the same Docker network.
Spring application provides API which is used in front-end.
Front-end is available on http://mypublicaddress.com port 80
I would like to configure front-end and back-end Docker containers to be able to display data from 'external' user perspective. It means front-end shall be able to fetch JSON data from back-end and display it to user.
我从基本方案开始，其中前面是Spring应用程序的URL: http://backendcontainer:8080/people?name = john
当然，从Web浏览器的角度来看，不可能通过这样的地址获取人员列表.容器backendcontainer仅可从Docker网络获得.
I started from base scenario, where in fronted there was URL of the Spring app: http://backendcontainer:8080/people?name=john
Of course, from Web browser perspective it is not possible to get list of people by such address. Container backendcontainer is only available from Docker network.
下一步是通过添加反向代理来扩展Nginx配置:
Next step was to extend Nginx configuration by adding reverse proxy:
location /people {
root /usr/share/nginx/html;
proxy_pass http://backendcontainer:8080;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $http_host;
proxy_redirect off;
}
前端的后端URL的完整地址也被替换为相对的"/people"
Also full address of backend URL in frontend was replaced with relative "/people"
在致电后立即前进
http://mypublicaddress.com/people?name=john 我得到了502 Bad Gateway.
我在做什么错了?
Step forward, by now after call
http://mypublicaddress.com/people?name=john I get 502 Bad Gateway.
What am I doing wrong?
完整的nginx.conf
Full nginx.conf
user nginx;
worker_processes 1;
error_log /var/log/nginx/error.log warn;
pid /var/run/nginx.pid;
events {
worker_connections 1024;
}
http {
include /etc/nginx/mime.types;
default_type application/octet-stream;
log_format main '$remote_addr - $remote_user [$time_local] "$request" '
'$status $body_bytes_sent "$http_referer" '
'"$http_user_agent" "$http_x_forwarded_for"';
access_log /var/log/nginx/access.log main;
sendfile on;
keepalive_timeout 65;
server {
listen 80;
server_name localhost;
location / {
root /usr/share/nginx/html;
index index.html index.htm;
}
location /people {
root /usr/share/nginx/html;
proxy_pass http://backendcontainer:8080;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $http_host;
proxy_redirect off;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root /usr/share/nginx/html;
}
}
}
Dockerfile:
Dockerfile:
### STAGE 1: Build ###
FROM node:11-alpine as build
RUN mkdir /app
WORKDIR /app
ENV PATH /app/node_modules/.bin:$PATH
ENV NPM_CONFIG_LOGLEVEL warn
COPY package.json /app/package.json
RUN npm config set unsafe-perm true
RUN npm install --silent
RUN npm install react-scripts -g --silent
COPY . /app
RUN npm run build
### STAGE 2: Production Environment ###
FROM nginx:1.14-alpine
COPY --from=build /app/build /usr/share/nginx/html
COPY nginx.conf /data/conf/nginx.conf
EXPOSE 80
CMD ["nginx", "-c", "/data/conf/nginx.conf", "-g", "daemon off;"]
最后，我明白了.我已经替换了
Finally, I have got it. I have replaced
location /people {
root /usr/share/nginx/html;
proxy_pass http://backendcontainer:8080;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $http_host;
proxy_redirect off;
}
具有:
location /people/ {
proxy_pass http://backendcontainer:8080;
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;
}
，它开始工作.但是，不确定该片段的哪一部分是问题的根源.
and it starts work. However, not sure what part of the snippet was the source of the problem.
推荐答案
旧版Docker链接:使用docker链接将后端容器与前端应用程序容器链接. /p>
Legacy Docker Links: Link backend container with frontend app container using docker links.
nginx.conf
worker_processes 1;
events {
worker_connections 1024;
}
http {
server {
listen 8080;
server_name localhost;
root /usr/share/nginx/html;
index index.html index.htm;
include /etc/nginx/mime.types;
gzip on;
gzip_min_length 1000;
gzip_proxied expired no-cache no-store private auth;
gzip_types text/plain text/css application/json application/javascript application/x-javascript text/xml application/xml application/xml+rss text/javascript;
location / {
try_files $uri $uri/ /index.html;
}
location /people {
proxy_pass http://backend:8080;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $http_host;
proxy_redirect off;
}
}
}
Docker命令:
后端应用:
$ docker run -d -p 8080:8080 --name backend backendapp
前端应用:
$ docker run -p 9000:8080 --name frontent --link backend reactapp
输出:
37.36"
172.17.0.1 - - [01/Feb/2019:17:21:20 +0000] "GET /main.9712d6edfd3728dcfc56.bundle.js HTTP/1.1" 200 59020 "http://localhost:9000/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3578.98 Safari/537.36"
172.17.0.1 - - [01/Feb/2019:17:21:27 +0000] "GET /people?name=john HTTP/1.1" 200 10 "-" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3578.98 Safari/537.36
在这些情况下，使用docker compose总是更容易.
It is always easier to use docker compose in these cases.
docker-compose.yml
version: '3'
services:
frontend:
image: reactapp
ports:
- "9000:8080"
depends_on:
- backend
backend:
image: backendapp
ports:
- "8080:8080"
$ docker-compose up
这篇关于使用Nginx和Spring进行Dockerizing React，通过Web浏览器访问两者的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
