[英]Cannot serve angular app from its container through nginx container
I have a problem showing basic angular page through nginx. 我在通过nginx显示基本角度页面时遇到问题。 We have an angular and a nginx container. 我们有一个有角度的容器和一个nginx容器。
This is nginx.conf 这是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;
#tcp_nopush on;
keepalive_timeout 65;
#gzip on;
include /etc/nginx/conf.d/*.conf;
server {
server_name angular_test.dev;
proxy_cache_key $request_method$request_uri;
proxy_cache_min_uses 1;
proxy_cache_methods GET;
proxy_cache_valid 200 1y;
location /angular {
proxy_pass https://angular:4200;
rewrite ^/angular(.*)$ $1 break;
}
listen 80;
listen 443 ssl;
ssl_certificate /etc/letsencrypt/angular_test.dev.crt;
ssl_certificate_key /etc/letsencrypt/angular_test.dev.key;
}
}
So, I built angular app with docker file like this 所以,我用这样的docker文件构建了角度应用
FROM node:10.16.0-alpine as node
RUN mkdir -p /usr/src/app
WORKDIR /usr/src/app
#RUN npm install -g @angular/cli
COPY . .
RUN npm install
CMD ["npm", "start"]
And this is docker-compose file 这是docker-compose文件
version: '3.1'
services:
angular:
container_name: angular
restart: unless-stopped
build: ./wanderkite
expose:
- 4200
ports:
- "4200:4200"
nginx:
image: nginx
container_name: nginx
#restart: unless-stopped
volumes:
- ./nginx/nginx.conf:/etc/nginx/nginx.conf
- ./nginx/error.log:/etc/nginx/error_log.log
- ./nginx/cache/:/etc/nginx/cache
- ./certs/client:/etc/letsencrypt
ports:
- 80:80
- 443:443
I also cant access angular just by typing localhost:4200 in browser. 我也无法通过在浏览器中键入localhost:4200来访问angular。 So basically what I want is to server angular app through nginx both on different containers. 因此,基本上我想要的是通过Nginx在不同的容器上同时处理angular应用程序。 Am I missing something here? 我在这里想念什么吗? I also checked log from angular container and it is saying that angular live development server is listening on localhost:4200. 我还检查了有角容器的日志,它说有角实时开发服务器正在localhost:4200上侦听。 When I access page on my host machine (angular_test.dev), I get 404. 当我访问主机上的页面(angular_test.dev)时,我得到404。
this isn't how angular is intended to be served / hosted in a production environment, the npm start command is just for development purposes only. 这并不是在生产环境中打算如何提供/托管角度的,npm start命令仅用于开发目的。 The angular build process outputs a set of static files that can be served as a static site by any web server with some minor tweaks... read more here: https://angular.io/guide/deployment 角度构建过程输出一组静态文件,可以由任何Web服务器作为一些静态调整来充当静态站点...在此处阅读更多信息: https : //angular.io/guide/deployment
I'm not overly familiar with nginx or docker tbh and have never run a configuration like this. 我对nginx或docker tbh不太熟悉,并且从未运行过这样的配置。 But, my general expectation from past deployments / configurations would be that docker runs the build command like 但是,我对过去的部署/配置的总体期望是docker运行build命令,例如
RUN ng build --prod
and nginx is just configured to serve the outputted index.html on all (non 404) requests to port 80/443, rather than running the angular dev server inside of a docker container with nginx pointed at the dev server. 并且nginx刚刚配置为在对端口80/443的所有(非404)请求上提供输出的index.html,而不是在nginx指向dev服务器的docker容器内部运行有角dev服务器。
the specific nginx configuration from the deployment guide is here: 部署指南中的特定nginx配置位于此处:
try_files $uri $uri/ /index.html;
我是一个kubernetes家伙,所以我不确定您的docker compose文件的语法,但看来您尚未公开nginx容器的80和443端口。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.