web-dev-qa-db-ja.com

angular4アプリケーションを実行するためにnginxを設定する方法

angularが初めてで、アプリケーションをDockerコンテナのNginxサーバーに配置したいと思います。

1. @ angular/cliを介してangularアプリケーションを実行する

そのために、次の手順を実行しました。

1.1。 @ angular/cliのインストールと、angular4アプリケーションの作成

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

1.2。 npm startを介してアプリケーションを提供する

angularアプリケーションは、

npm start

Docker化されたアプリケーションの開発を考えているので、コマンドnpm startを避けたいと思います。それを行うには、次のとおりです。

2. nginxでangularアプリケーションを実行する

2.1。 Dockerfile nginxのファイル

FROM debian:jessie

MAINTAINER NGINX Docker Maintainers "[email protected]"

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。 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 で利用可能です

angularnginx
16
Amine Jallouli

間違っていることの1つは、cliを使用してプロダクションビルドを実行し、これらのファイルの出力を公開するのではなく、ソースファイルを公開しようとしていることです。 ng startはlocal開発に使用されます。結果に満足したら、ng build --prodを使用してアプリケーションを構築し、あなたの/distフォルダーは、ドッカーに配置する必要があります。

すべてをドッカーに入れたい場合は、ng build --prod新しいプロジェクトを作成した後、nginxのルートを/var/www/frontend/dist;。ただし、これにより、ドッカーの起動時間が非常に長くなります。プロジェクトのサイズに応じて明らかに

9
PierreDuc

angular 2/4/5 app + Nginx（i.e。Dockerなし））の本番セットアップにまだ苦労している場合、完全なソリューションは次のとおりです。

angular Hostのアプリ：http://example.comおよびPORT：8080注-ホストとPORTは、ケースによって異なる場合があります。

<base href="/">あなたのindex.htmlヘッドタグ。

  1. まず、マシンのangular repo（i.e./home/user/helloWorld）パスに移動します。

  2. 次に、次のコマンドを使用して、運用サーバー用に/ distをビルドします。

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

  3. ここで、/ dist（つまり/ home/user/helloWorld/dist）フォルダーをマシンのangular repoから本番サーバーをホストするリモートマシンにコピーします。

  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. それでおしまい ！！これで、angular app - http://example.com:808 にアクセスできます

役に立てば幸いです。

21
viks