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

2条回答

Root（大扎）

2楼-- · 2019-01-22 15:43

If anyone still struggling with 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 app at HOST: http://example.com and PORT: 8080 Note - HOST and PORT might be different in your case.

Make sure you have <base href="/"> in you index.html head tag.

Firstly, go to your angular repo (i.e. /home/user/helloWorld) path at your machine.
Then build /dist for your production server using the following command:

ng build --prod --base-href http://example.com:8080
Now copy /dist (i.e. /home/user/helloWorld/dist) folder from your machine's angular repo to the remote machine where you want to host your production server.

Now login to your remote server and add 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.
That's it !! Now you can access your angular app at http://example.com:8080

Hope it will be helpful.

0人赞添加讨论(0) 举报

\"骚年 ilove

3楼-- · 2019-01-22 15:46

One thing that's wrong is that you are trying to publish your source files, instead of doing a production build using the cli and publish the output of these files. ng start is used for local development. When you are happy with your outcome, you can use ng build --prod to build your application, and whatever resides in your /dist folder should be placed in the docker.

If you want to have everything in your docker, you should ng build --prod after creating your new project, and then point the root of your nginx to /var/www/frontend/dist;. This will highly increase the boot time of your docker though. Obviously depending on the size of your project

0人赞添加讨论(0) 举报

How to config nginx to run angular4 application

1. Running the angular application through @angular/cli

1.1. Installation of @angular/cli and creation of an angular4 application

1.2. Serving the application through npm start

2. Running the angular application on nginx

2.1. Dockerfile file for nginx

2.2. The config of nginx is below:

2.3. The docker-compose.yml

2.4. building the docker image and running the container

2.5. Identification of the IP address of the container

The issue

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间

1.2. Serving the application through `npm start`

2.1. `Dockerfile` file for nginx

2.3. The `docker-compose.yml`