I am new to angular and I would like to put the application on Nginx server on a docker container.
1. Running the angular application through @angular/cli
To do that, I did the following steps:
1.1. Installation of @angular/cli and creation of an angular4 application
sudo npm install -g @angular/cli
ng new angular4-on-nginx-with-docker
1.2. Serving the application through npm start
The angular application is working correctly through
npm start
Now, I want to avoid the command npm start because I am thinking about developing a dockerized application. To do that, below is:
2. Running the angular application on nginx
2.1. Dockerfile file for nginx
FROM debian:jessie
MAINTAINER NGINX Docker Maintainers "[email protected]"
ENV NGINX_VERSION 1.11.9-1~jessie
RUN apt-key adv --keyserver hkp://pgp.mit.edu:80 --recv-keys 573BFD6B3D8FBC641079A6ABABF5BD827BD9BF62
&& echo "deb http://nginx.org/packages/mainline/debian/ jessie nginx" >> /etc/apt/sources.list
&& apt-get update
&& apt-get install --no-install-recommends --no-install-suggests -y
ca-certificates
nginx=${NGINX_VERSION}
&& rm -rf /var/lib/apt/lists/*
# forward request and error logs to docker log collector
RUN ln -sf /dev/stdout /var/log/nginx/access.log
&& ln -sf /dev/stderr /var/log/nginx/error.log
EXPOSE 80 443
CMD ["nginx", "-g", "daemon off;"]
2.2. The config of nginx is below:
server {
server_name angular4.dev;
root /var/www/frontend/src;
try_files $uri $uri/ index.html;
error_log /var/log/nginx/angular4_error.log;
access_log /var/log/nginx/angular4_access.log;
}
2.3. The docker-compose.yml
version: '2'
services:
nginx:
build: nginx
ports:
- 88:80
volumes:
- ./nginx/frontend:/var/www/frontend
- ./nginx/default.conf:/etc/nginx/conf.d/default.conf
- ./nginx/logs/nginx/:/var/log/nginx
2.4. building the docker image and running the container
docker-compose up -d --build
2.5. Identification of the IP address of the container
docker inspect angular4onnginxwithdocker_nginx_1 | grep IPA
#"SecondaryIPAddresses": null,
#"IPAddress": "",
# "IPAMConfig": null,
# "IPAddress": "172.18.0.2",
Open your browser on 172.18.0.2
The issue
I think that npm packages are not accessible... I am not sure what is wrong exactly. But, what I can say is that the page is empty and without having any error message in the console.
Below is the code obtained when using nginx
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Angular4 on nginx with docker</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
</body>
</html>
This the code of the page obtained by the use of the command npm start
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Angular4 on nginx with docker</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
<script type="text/javascript" src="inline.bundle.js"></script><script type="text/javascript" src="polyfills.bundle.js"></script><script type="text/javascript" src="styles.bundle.js"></script><script type="text/javascript" src="vendor.bundle.js"></script><script type="text/javascript" src="main.bundle.js"></script></body>
</html>
So, what is wrong???
A repo for that example is available on github
See Question&Answers more detail:
os 
