搭建[Docker] Docker + Nginx + Angular的开发环境

工作环境

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 作業環境を以下に更新しました

 

    上記に伴い、これまで「作業環境」と「補足」で挙げていた内容は当該環境での動作未確認につき、取り消し線で修飾しました
環境バージョン備考macOS Catalinav10.15.7
Docker Desktop for Macv3.0.3
Dockerv20.10.0, build 7287ab3$ docker --versionDocker Composev1.27.4, build 40524192$ docker-compose --versionAngular CLIv11.0.5$ ng --versionAngularv11.0.5同上Node.jsv12.18.3$ node --versionnpmv6.14.6$ npm --version
ng version 的结果:$ ng version

_ _ ____ _ ___
/ \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _|
/ △ \ | ‘_ \ / _` | | | | |/ _` | ‘__| | | | | | |
/ ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | |
/_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___|
|___/

Angular CLI: 11.0.5
Node: 12.18.3
OS: darwin x64

Angular: 11.0.5
… 动画模块, 命令行界面, 公共模块, 编译器, 编译器命令行界面, 核心模块, 表单模块
… 浏览器平台模块, 浏览器动态平台模块, 路由模块
Ivy Workspace: 是的

包名 版本
———————————————————
@angular-devkit/architect 0.1100.5
@angular-devkit/build-angular 0.1100.5
@angular-devkit/core 11.0.5
@angular-devkit/schematics 11.0.5
@schematics/angular 11.0.5
@schematics/update 0.1100.5
rxjs 6.6.0
typescript 4.0.2

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. 確認操作是否有效

スクリーンショット 2020-12-27 13.19.08.png

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 日本語ドキュメント-ワークスペースとプロジェクトのファイル構造