All geek questions in one place

How to configure nginx to run angular4 application

I am new to angular and I would like to host the application on a Nginx server in a Nginx container.

1. Launching an angular app via @ angular / cli

To do this, I took the following steps:

1.1. Install @ angular / cli and create an application with angular 4

 sudo npm install -g @angular/cli ng new angular4-on-nginx-with-docker

1.2. Serving the application through npm start

The angular app works correctly through

 npm start

Now I want to avoid the npm start command because I'm thinking of developing a docked application. For this below:

2. Running 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. Nginx configuration 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. 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. docker imaging and container launch

 docker-compose up -d --build

2.5. Container IP Address Identification

 docker inspect angular4onnginxwithdocker_nginx_1 | grep IPA #"SecondaryIPAddresses": null, #"IPAddress": "", # "IPAMConfig": null, # "IPAddress": "172.18.0.2",

Open your browser at 172.18.0.2

Problem

I think npm packages are not available ... I'm not sure what exactly is wrong. But I can say that the page is empty and without an 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 page code obtained with the npm start command

 <!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's wrong ???

The repo for this example is available on github

+5
source share
2 answers

What is wrong is that you are trying to publish the source files, instead of creating an assembly using cli and publishing the output of these files. ng start used for local development. When you are happy with your result, you can use ng build --prod to create your application, and everything in your /dist folder should be placed in docker.

If you want to have everything in your docker, you must ng build --prod after creating a new project, and then point the root of your nginx to /var/www/frontend/dist; . However, this will significantly increase the loading time of your docker. Obviously, depending on the size of your project

+6
source

If someone is still struggling with the production setup of angular 2/4/5 app + Nginx (i.e. without docker), then here is the complete solution:

Suppose you want to deploy your angular application to HOST: http://example.com and PORT: 8080 Note. HOST and PORT may be different in your case.

Make sure you have <base href="/"> in your index.html header header.

  • First, go to your angular repo path (i.e. / home / user / helloWorld) on your computer.

  • Then create / dist for your production server using the following command:

    ng build --prod --base-href http://example.com:8080

  • Now copy the / dist (i.e. / home / user / helloWorld / dist) folder from your angular repo device to the remote computer on which you want to host your production server.

  • Now log in to your remote server and add the following nginx server configuration.

     server { listen 8080; server_name http://example.com; root /path/to/your/dist/location; # eg. root /home/admin/helloWorld/dist index index.html index.htm; location / { try_files $uri $uri/ /index.html; # This will allow you to refresh page in your angular app. Which will not give error 404. } }

  • Now restart nginx.

  • What is it! You can now access your angular app at http://example.com:8080

Hope this will be helpful.

+2
source

Source: https://habr.com/ru/post/1270146/

More articles:


All Articles