diff --git a/.gitignore b/.gitignore index 54bfd20..797c95c 100644 --- a/.gitignore +++ b/.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 diff --git a/Dockerfile b/Dockerfile deleted file mode 100644 index 3c9437f..0000000 --- a/Dockerfile +++ /dev/null @@ -1,21 +0,0 @@ -FROM nginx:1.13-alpine - -ENV APP_PATH /app -ENV PATH $APP_PATH/node_modules/@angular/cli/bin/:$PATH - -RUN apk add --update --no-cache nodejs && mkdir $APP_PATH && rm -rf /etc/nginx/conf.d/* -WORKDIR $APP_PATH - -COPY . . - -COPY nginx/default.conf /etc/nginx/conf.d/ - -RUN npm install \ - && ng build --aot --prod \ - && rm -rf /usr/share/nginx/html/* \ - && mv ./dist/* /usr/share/nginx/html/ \ - && npm cache clean \ - && apk del nodejs libstdc++ libgcc libuv http-parser ca-certificates \ - && rm -rf ./* - -CMD ["nginx", "-g", "daemon off;"] diff --git a/README.md b/README.md index 31c4e69..f174fcb 100644 --- a/README.md +++ b/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. diff --git a/docker-compose.yml b/docker-compose.yml new file mode 100644 index 0000000..a16d215 --- /dev/null +++ b/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 diff --git a/nginx/Dockerfile b/nginx/Dockerfile new file mode 100644 index 0000000..341bfe8 --- /dev/null +++ b/nginx/Dockerfile @@ -0,0 +1,25 @@ +FROM debian:jessie + +MAINTAINER NGINX Docker Maintainers "docker-maint@nginx.com" + +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;"] diff --git a/nginx/default.conf b/nginx/default.conf index 5c967f9..247f90b 100644 --- a/nginx/default.conf +++ b/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; +} \ No newline at end of file diff --git a/nginx/default1.conf b/nginx/default1.conf new file mode 100644 index 0000000..2513593 --- /dev/null +++ b/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; + } + +} diff --git a/nginx/default2.conf b/nginx/default2.conf new file mode 100644 index 0000000..bb0c70a --- /dev/null +++ b/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; +} diff --git a/LICENCE b/nginx/frontend/LICENCE similarity index 100% rename from LICENCE rename to nginx/frontend/LICENCE diff --git a/e2e/app.e2e-spec.ts b/nginx/frontend/e2e/app.e2e-spec.ts similarity index 100% rename from e2e/app.e2e-spec.ts rename to nginx/frontend/e2e/app.e2e-spec.ts diff --git a/e2e/app.po.ts b/nginx/frontend/e2e/app.po.ts similarity index 100% rename from e2e/app.po.ts rename to nginx/frontend/e2e/app.po.ts diff --git a/e2e/tsconfig.e2e.json b/nginx/frontend/e2e/tsconfig.e2e.json similarity index 100% rename from e2e/tsconfig.e2e.json rename to nginx/frontend/e2e/tsconfig.e2e.json diff --git a/karma.conf.js b/nginx/frontend/karma.conf.js similarity index 100% rename from karma.conf.js rename to nginx/frontend/karma.conf.js diff --git a/package.json b/nginx/frontend/package.json similarity index 100% rename from package.json rename to nginx/frontend/package.json diff --git a/protractor.conf.js b/nginx/frontend/protractor.conf.js similarity index 100% rename from protractor.conf.js rename to nginx/frontend/protractor.conf.js diff --git a/src/app/app.component.html b/nginx/frontend/src/app/app.component.html similarity index 100% rename from src/app/app.component.html rename to nginx/frontend/src/app/app.component.html diff --git a/src/app/app.component.sass b/nginx/frontend/src/app/app.component.sass similarity index 100% rename from src/app/app.component.sass rename to nginx/frontend/src/app/app.component.sass diff --git a/src/app/app.component.spec.ts b/nginx/frontend/src/app/app.component.spec.ts similarity index 100% rename from src/app/app.component.spec.ts rename to nginx/frontend/src/app/app.component.spec.ts diff --git a/src/app/app.component.ts b/nginx/frontend/src/app/app.component.ts similarity index 100% rename from src/app/app.component.ts rename to nginx/frontend/src/app/app.component.ts diff --git a/src/app/app.module.ts b/nginx/frontend/src/app/app.module.ts similarity index 100% rename from src/app/app.module.ts rename to nginx/frontend/src/app/app.module.ts diff --git a/src/assets/.gitkeep b/nginx/frontend/src/assets/.gitkeep similarity index 100% rename from src/assets/.gitkeep rename to nginx/frontend/src/assets/.gitkeep diff --git a/src/environments/environment.prod.ts b/nginx/frontend/src/environments/environment.prod.ts similarity index 100% rename from src/environments/environment.prod.ts rename to nginx/frontend/src/environments/environment.prod.ts diff --git a/src/environments/environment.ts b/nginx/frontend/src/environments/environment.ts similarity index 100% rename from src/environments/environment.ts rename to nginx/frontend/src/environments/environment.ts diff --git a/src/favicon.ico b/nginx/frontend/src/favicon.ico similarity index 100% rename from src/favicon.ico rename to nginx/frontend/src/favicon.ico diff --git a/src/index.html b/nginx/frontend/src/index.html similarity index 100% rename from src/index.html rename to nginx/frontend/src/index.html diff --git a/src/main.ts b/nginx/frontend/src/main.ts similarity index 100% rename from src/main.ts rename to nginx/frontend/src/main.ts diff --git a/src/polyfills.ts b/nginx/frontend/src/polyfills.ts similarity index 100% rename from src/polyfills.ts rename to nginx/frontend/src/polyfills.ts diff --git a/src/styles.sass b/nginx/frontend/src/styles.sass similarity index 100% rename from src/styles.sass rename to nginx/frontend/src/styles.sass diff --git a/src/test.ts b/nginx/frontend/src/test.ts similarity index 100% rename from src/test.ts rename to nginx/frontend/src/test.ts diff --git a/src/tsconfig.app.json b/nginx/frontend/src/tsconfig.app.json similarity index 100% rename from src/tsconfig.app.json rename to nginx/frontend/src/tsconfig.app.json diff --git a/src/tsconfig.spec.json b/nginx/frontend/src/tsconfig.spec.json similarity index 100% rename from src/tsconfig.spec.json rename to nginx/frontend/src/tsconfig.spec.json diff --git a/src/typings.d.ts b/nginx/frontend/src/typings.d.ts similarity index 100% rename from src/typings.d.ts rename to nginx/frontend/src/typings.d.ts diff --git a/tsconfig.json b/nginx/frontend/tsconfig.json similarity index 100% rename from tsconfig.json rename to nginx/frontend/tsconfig.json diff --git a/tslint.json b/nginx/frontend/tslint.json similarity index 100% rename from tslint.json rename to nginx/frontend/tslint.json diff --git a/yarn.lock b/nginx/frontend/yarn.lock similarity index 100% rename from yarn.lock rename to nginx/frontend/yarn.lock