How to config nginx to run angular4 application

user_2269738 0
Viewed 40231

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 "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


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

angular nginx
3 Answers

If anyone still have problems serving angular with docker and ssl.

Dockerfile

FROM nginx:stable

## From ‘builder’ stage copy over the artifacts in dist folder to default nginx public folder
COPY --from=builder /app/dist/my-app /usr/share/nginx/html/


## Skip this if you are using kubernetes config map 
COPY nginx.conf /etc/nginx/nginx.conf

## Serve
CMD ["nginx", "-g", "daemon off;"]

Provide nginx.conf via kubernetes config map definition as follows: 

volumeMounts:
- mountPath: /etc/nginx/nginx.conf
  name: config
  subPath: nginx.conf
volumes:
- configMap:
    defaultMode: 420
    name: config-map-name

nginx.conf

worker_processes auto;
pid /tmp/nginx.pid;

events {
  worker_connections 1024;
  use epoll;
  multi_accept on;
}

http {
  # this is necessary for us to be able to disable request buffering in all cases

  include       /etc/nginx/mime.types;
  default_type  application/octet-stream;
  keepalive_timeout  65;

  log_format timed_combined 'remote_addr - '
    '"$request" $status $body_bytes_sent '
    '"$http_referer" "$http_user_agent" '
    '$request_time $upstream_response_time $pipe';

  access_log /dev/stdout timed_combined;

  server {

    listen 0.0.0.0:443 ssl;
    listen [::]:443 ssl default_server;
    server_tokens off;


    root /usr/share/nginx/html;

    # SSL
    ssl_certificate /etc/nginx/cert/tls.crt;
    ssl_certificate_key /etc/nginx/cert/tls.key;

    # Recommendations from https://raymii.org/s/tutorials/Strong_SSL_Security_On_nginx.html
    ssl_protocols TLSv1.1 TLSv1.2;
    ssl_ciphers '!aNULL:kECDH+AESGCM:ECDH+AESGCM:RSA+AESGCM:kECDH+AES:ECDH+AES:RSA+AES:';
    ssl_prefer_server_ciphers on;
    ssl_session_cache shared:SSL:10m;

    # disable any limits to avoid HTTP 413 for large image uploads
    client_max_body_size 0;

    # required to avoid HTTP 411:
    chunked_transfer_encoding on;

    location / {
        try_files $uri$args $uri$args/ /index.html;
    }
  }
}
user_125385070
Related