Как настроить nginx для запуска приложения angular4

я новичок в angular, и я хотел бы поставить приложение на Nginx сервер в контейнере docker.

1. Запуск углового приложения через @angular / cli

для этого я сделал следующее:

1.1. Установка @angular / cli и создание приложения angular4

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

1.2. Обслуживание приложения через npm start

угловое приложение работает правильно через 

npm start

теперь я хочу избежать команды npm start потому что я думаю о разработке докеризованного приложения. Чтобы сделать это, ниже:

2. Запуск углового приложения на nginx

2.1. Dockerfile файл для 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 ниже:

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. создание образа docker и запуск контейнер

docker-compose up -d --build

2.5. Идентификация IP-адреса контейнера

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

откройте браузер на 172.18.0.2

вопрос

я думаю, что пакеты npm недоступны... Я не уверен, что именно не так. Но я могу сказать, что страница пуста и без какого-либо сообщения об ошибке в консоли.

Ниже приведен код, полученный при использовании 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>

это код страницы, полученный с помощью команды 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>

что случилось???

РЕПО для этого примера доступно на github

10
angular nginx

2 ответов

одна вещь, которая неправильно, что вы пытаетесь опубликовать исходные файлы, вместо того, чтобы делать сборку производства с помощью cli и публиковать выходные данные этих файлов. ng start используется местные развитие. Когда вы довольны своим результатом, вы можете использовать ng build --prod для построения приложения, и все, что находится в /dist папка должна быть помещена в docker.

если вы хотите иметь все в своем докере, вы должны ng build --prod после создания новый проект, а затем укажите корень вашего nginx до /var/www/frontend/dist;. Это значительно увеличит время загрузки вашего docker. Очевидно, в зависимости от размера вашего проекта

9

если кто-то все еще борется с производственной настройкой angular 2/4/5 app + Nginx (т. е. без Докера), то вот полное решение:

Предположим, вы хотите развернуть свое угловое приложение на хосте:http://example.com и порт: 8080 Примечание-хост и порт могут отличаться в вашем случае.

убедитесь, что у вас есть <base href="/"> в индексации.тег html head.

  1. во-первых, перейдите в свой угловой РЕПО (т. е. /home/user/helloWorld) путь на вашем машина.

  2. затем создайте / dist для вашего производственного сервера, используя следующую команду:

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

  3. теперь скопируйте /dist (т. е./home/user/helloWorld / dist) папку из углового РЕПО вашей машины на удаленную машину, где вы хотите разместить свой производственный сервер.

  4. теперь войдите на свой удаленный сервер и добавьте следующий сервер nginx конфигурация.

    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.

    }

}

  5. теперь перезапустите nginx.

  6. вот именно !! Теперь вы можете открыть ваш угловой приложения http://example.com:8080

надеюсь, это будет полезно.

15