01-angular4-on-docker-with-volumes

.gitignore

@@ -1,12 +1,14 @@
 # See http://help.github.com/ignore-files/ for more about ignoring files.
 
 # compiled output
-/dist
+/nginx/logs/
+/nginx/frontend/node_modules/
+/nginx/frontend/dist
 /tmp
 /out-tsc
 
 # dependencies
-/node_modules
+/nginx/frontend/node_modules
 
 # IDEs and editors
 /.idea
@@ -34,8 +36,8 @@ testem.log
 /typings
 
 # e2e
-/e2e/*.js
-/e2e/*.map
+/nginx/frontend/e2e/*.js
+/nginx/frontend/e2e/*.map
 
 # System Files
 .DS_Store

README.md

@@ -1,21 +1,26 @@
+# Docker example for Angular4 running on Nginx
 
-# Dockerized Angular 4 App (with Angular CLI)
+## 1. Building the image and running the container
 
-[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)
-
-## Build docker image
-
-```
-$ docker build -t myapp . 
+```sh
+docker-compose up -d --build
 ```
 
-## Run the container
+## 2. Identification of the IP address of the container
+
+```sh
+docker inspect angular4dockerexample_nginx_1 | grep IPA
+          #  "SecondaryIPAddresses": null,
+          #  "IPAddress": "",
+          #          "IPAMConfig": null,
+          #          "IPAddress": "172.18.0.2",
 
 ```
-$ docker run -d -p 8080:80 myapp
-```
+
+Open your browser on [172.18.0.2](http://172.18.0.2/)
 
 
-The app will be available at http://localhost:8080
+## 3. Actual issue
+The landing page is stoping at `Loading...`.
 
-You can easily tweak the nginx config in ```nginx/default.conf```
+No error message is found in the console.

docker-compose.yml

@@ -0,0 +1,11 @@
+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

nginx/Dockerfile

@@ -0,0 +1,25 @@
+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
+
+# this is needed when calling another server. Just google it for more details.
+# RUN echo "upstream php-upstream { server node:9000; }" > /etc/nginx/conf.d/upstream.conf
+
+EXPOSE 80 443
+
+CMD ["nginx", "-g", "daemon off;"]

nginx/default.conf

@@ -1,30 +1,9 @@
-
-
-
 server {
+    server_name angular4.dev;
+    root /var/www/frontend/src;
 
-  listen 80;
-
-  sendfile on;
-
-  default_type application/octet-stream;
-
-
-  gzip on;
-  gzip_http_version 1.1;
-  gzip_disable      "MSIE [1-6]\.";
-  gzip_min_length   256;
-  gzip_vary         on;
-  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;
-  gzip_comp_level   9;
-
-
-  root /usr/share/nginx/html;
-
-
-  location / {
-    try_files $uri $uri/ /index.html =404;
-  }
+    try_files $uri $uri/ /index.html;
 
-}
+    error_log /var/log/nginx/angular4_error.log;
+    access_log /var/log/nginx/angular4_access.log;
+}

nginx/default1.conf

@@ -0,0 +1,28 @@
+
+server {
+
+  listen 80;
+
+  sendfile on;
+
+  default_type application/octet-stream;
+
+
+  gzip on;
+  gzip_http_version 1.1;
+  gzip_disable      "MSIE [1-6]\.";
+  gzip_min_length   1100;
+  gzip_vary         on;
+  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;
+  gzip_comp_level   9;
+
+
+  root /usr/share/nginx/html;
+
+
+  location / {
+    try_files $uri $uri/ /index.html =404;
+  }
+
+}

nginx/default2.conf

@@ -0,0 +1,13 @@
+server {
+    server_name angular4.dev;
+    root /usr/src/app/frontend; # have to think about it
+
+    # try_files $uri $uri/ src/index.html;
+
+    error_log /var/log/nginx/angular4_error.log;
+    access_log /var/log/nginx/angular4_access.log;
+}
+
+location / {
+  try_files $uri $uri/ /index.html =404;
+}