工作环境

Rasppberry Pi3

Ubuntu MATE 16.04.5 LTS ( GNU/Linux 4.4.38-v7+ armv7l )
Docker CE ( 18.06.0~ce~3-0~ubuntu )
Docker Compose v1.23.0dev

Angular CLI v7.2.2
Angular v7.2.0
Node.js v10.12.0
npm v6.4.1

填补

已经确认在Raspberry Pi3以及其他环境中可以正常运行。

Windows 10 Pro 64bit

Docker for Windows

Mac OSX Mojave( 10.14.x )

Docker Desktop for Mac

工作环境

• 2020/12/27 作業環境を以下に更新しました

上記に伴い、これまで「作業環境」と「補足」で挙げていた内容は当該環境での動作未確認につき、取り消し線で修飾しました

0. 預先準備

首先按照以下结构创建目录。
这将是本文章所要进行的基本结构（Docker环境的基础）。

angular-in-docker          # ルートディレクトリ
└ angular-app/             # Angular アプリや Dockerfile 等を管理するディレクトリ

创建 Angular 项目

下一步，在 angular-app 目录下创建一个 Angular 项目。

$ cd angular-app/
$ ng new app

2. 建立 Docker 环境

这次要在 Docker 环境中进行 Angular 项目的环境搭建。

2.1. 创建Dockerfile

进行Angular应用的构建，并设置将构建好的资产部署到Nginx上的配置。
该Dockerfile的基本概念如下。

1. Angular项目在生成Docker容器时进行构建

1. 将构建的资产复制（部署）到Nginx的资产中

1. 准备用于本项目的nginx.conf文件，并在该文件中控制Nginx的行为

应用程序在Nginx上运行

请参考下方的评论以获取详细信息。

# -----------------------------------------------------
# Angular アプリをビルドするための環境を構築する
# -----------------------------------------------------
# Angualr のビルドする環境として node をインストール
# 12.18.3 は開発で使用しているバージョン
FROM node:12.18.3 as build-stage

WORKDIR /app
COPY ./app/package*.json /app/

# npm install 中に下記 Warning がでるが回避策が現状見当たらないので放置するしかない
# 内容はプラットフォームが Mac OSX ではないからスキップするというもので、
# 対象となっている fsevents は node_modules 中のライブラリが依存関係で使用しているライブラリ

# Warning の内容
#   npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.6 (node_modules/fsevents):
#   npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.6: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

RUN npm install
COPY ./app/ /app/
ARG configuration=production

# Angular アプリをビルドする
RUN npm run build -- --output-path=./dist/out --configuration $configuration

# -----------------------------------------------------
# Nginx の Docker 環境を構築する
# -----------------------------------------------------
FROM nginx:1.15

# ビルドした成果物を Docker 上の Nginx のドキュメントとして扱うためにコピー(デプロイ)
COPY --from=build-stage /app/dist/out/ /usr/share/nginx/html

# Nginx の設定ファイルを Docker 上の Nginx にコピー
COPY ./docker/nginx/nginx.conf /etc/nginx/nginx.conf

创建 .dockerignore 文件。

在构建Docker镜像时，指定要从复制目标中排除的资源。
在本例中，我们排除了Angular项目中的node_modules。原因是该文件夹下有大量的依赖库。

./app/node_modules

2.2. 创建 nginx.conf 文件

将nginx.cong作为Docker上Nginx的配置文件，创建在angular/app/docker/nginx/路径下。通过编辑该文件中的内容可以控制Nginx的行为，因此以后会继续更新此文件。

这里仅仅是展示初期设置的内容。

worker_processes  1;

events {
    worker_connections  1024;
}

http {
    server {
        listen 8080;
        server_name  localhost;

        root   /usr/share/nginx/html;
        index  index.html index.htm;
        include /etc/nginx/mime.types;

        gzip on;
        gzip_min_length 1000;
        gzip_proxied expired no-cache no-store private auth;
        gzip_types text/plain text/css application/json application/javascript application/x-javascript text/xml application/xml application/xml+rss text/javascript;

        location / {
            try_files $uri $uri/ /index.html;
        }
    }
}

2.3. 创建 docker-compose.yaml 文件

创建一个用于通过Docker Compose管理Docker容器的配置文件。

version: '3'
services:
  app:
    build: angular-app/
    container_name: "angular-app"
    ports:
      - "80:8080"
    environment:
      TZ: "Asia/Tokyo"

3. 项目的最终构成

以下是Angular项目和包含Docker的各个配置文件的结构。
前端开发将在这个架构下进行。

为了方便使用Git进行管理，生成Angular项目时的.editorconfig、.gitignore和README.md等文件已经移动到根目录下。

angular-in-docker        # ルートディレクトリ
├ .editorconfig          # エディタの設定ファイル(ng new で勝手に生成される)
├ .gitignore             # Git 管理から除外する資産を管理する
├ LICENSE                # ライセンスファイル
├ README.md              # アプリケーションの README
├ angular-app/           # Angular アプリや Dockerfile 等を管理するディレクトリ
│ ├ .dockerignore        # Docker イメージ作成時にコピー対象から除外する資産を管理する
│ ├ Dockerfile           # Docker コンテナを管理する
│ ├ app/                 # Angular アプリ
│ │ ├ angular.json       # Angular プロジェクトの設定ファイル
│ │ ├ e2e/               # e2e テストの資産
│ │ ├ karma.conf.js      # JavaScript のテストランナー Karma の設定ファイル
│ │ ├ node_modules/      # npm install で導入されるライブラリ群
│ │ ├ package.json       # プロジェクトの依存関係を管理する. プロジェクト配下での npm install は初期状態ではこれを元にライブラリがインストールされる
│ │ ├ src/               # Angular プロジェクトの本体となるソース群
│ │ ├ tsconfig.app.json  # TypeScriptおよびAngularテンプレートコンパイラオプションを含む、アプリケーション固有の TypeScript の設定
│ │ ├ tsconfig.json      # TypeScript -> JavaScript へのトランスパイルの設定
│ │ ├ tsconfig.spec.json # アプリケーションテスト用の TypeScript の設定
│ │ └ tslint.json        # 静的解析のチェッカーファイル
│ └ docker/              # Docker 用 Nginx の設定ファイル
│   └ nginx/
│      └ nginx.conf
└ docker-compose.yaml    # 複数の Docker コンテナを管理する

有关Angular应用程序的每个配置文件，请参考官方的Angular日本语文档-工作区和项目文件结构。

4. 启动和确认 Docker 容器

现在我们来动手试试一下已经创建好的环境。

通过 Docker Compose 启动 Docker 容器

运行以下命令以启动Docker容器。

$ docker-compose up -d --build

-d是一个在后台启动的选项。
如果在下一个操作中没有屏幕显示，请将-d选项去除并运行命令，会在控制台上输出启动信息，从而解决问题。

4.2. 確認操作是否有效

4.3 使用Docker Compose停止服务和容器的方法

根据需要执行以下命令，使用Docker Compose停止服务或停止容器。

サービスの停止

停止服务，但不会删除Docker容器。

$ docker-compose stop

コンテナの停止

停止服务并删除提供服务的容器，然后删除网络。

$ docker-compose down

本次文章中所创建的环境。

如果您方便的话，可以参考我在这里上传的资料。

Please provide the original sentence you would like to paraphrase in Chinese.

• Angular in Docker with Nginx

• Your Angular apps as Docker containers

Angular 日本語ドキュメント-ワークスペースとプロジェクトのファイル構造