如何使用Docker容器将以Nginx为特色的AngularJS应用容器化

Docker是一个平台，可以让你构建、管理和运送应用程序。这些应用程序通常被安装在被称为容器的特定区域。与传统的虚拟机不同，Docker容器超级轻便，资源密集度低。

简介

Docker容器允许开发者将一个应用程序连同其所有必要的组件打包，包括依赖关系和其他库，并作为一个单一的软件包分发。这使得软件能够在不同的平台或操作系统上以同样的方式运行。在这篇文章中，我们将学习如何将AngularJS应用程序容器化。

AngularJS是一个JavaScript前端框架，用于构建创新和先进的Web应用。它使用与React.js和Vue.js相同的技术。AngularJS也可以用来创建后端API，以及全栈应用程序。

目标

在本指南中，我们将设置一个简单的Docker-compose脚本，以容器化我们的AngularJS应用

设置本地环境

首先，在你的电脑上安装Docker。

接下来，在你的命令行中运行docker version ，以确认Docker是否被成功安装。

如果安装成功，你应该看到以下信息。

继续并从这个仓库下载AngularJS应用程序。

或者，你也可以使用以下命令克隆该仓库。

git clone https://github.com/Rose-stack/dockerizing-an-angular-app.git

克隆成功后，通过运行以下命令安装应用程序的依赖项。

npm install

创建一个Dockerfile

Dockerfile是一个文本文件，包含创建Docker镜像的说明。

在克隆的AngularJS项目的根部，创建一个Dockerfile ，如下图所示。

我们将使用的一些重要的Docker 命令包括。

• FROM - 它创建了一个构建过程，并从DockerHub拉取最新的镜像。
• RUN - 它执行并为基础镜像添加一个新层。
• WORKDIR - 它指定了首选的工作文件夹，配置文件将被存储在其中。如果找不到该路径，将创建该目录。
• COPY - 该命令将项目的源文件从主机的根文件夹复制到容器的工作目录。
• EXPOSE - 它指定了一个网络端口，以通知Docker，容器在运行时将监听一个特定的端口号。

让我们写下Dockerfile的说明。

第1步 - 设置Node.js

在Dockerfile里面添加以下命令。

    FROM node:14.17.0-alpine as build-step
    RUN mkdir -p /app
    WORKDIR /app
    COPY package.json /app
    RUN npm install
    COPY . /app
    RUN npm run build --prod

在上面的命令中，我们要。

• 从DockerHub的14.17.0版本检索一个Node.js镜像。
• 然后，我们正在创建一个名为app 的directory 。
• 导航到app 文件夹。
• 将package.json 文件从我们的project 目录复制到app 目录。
• 在app 文件夹内，我们正在通过运行npm install 命令来安装依赖项。
• 将项目文件夹中的其他内容复制到app文件夹中。
• 最后，我们在app文件夹中构建项目。

第2步 - 设置Nginx服务器

Nginx是一个基于C语言的开源Web浏览器服务器，同时也是一个反向代理和负载平衡器。在这篇文章中，我们正在使用Nginx服务器观察Angular文件。

    FROM nginx:1.20.1
    COPY --from=build-step /app/dist/ng-docker-example /usr/share/nginx/html
    EXPOSE 4200:80

在上面的命令中，我们是。

• 从Dockerhub版本1.20.1 ，获得一个Nginx镜像。
• 将所有build 的内容复制到配置好的Nginx HTML 文件夹中。
• 将4200 作为我们的容器port ，将80 作为我们的主机端口。

设置docker-compose.yml文件

在项目的根部，创建一个文件并命名为docker-compose.yml 。

将以下内容添加到该文件中。

version: "3.7"
services:
    angular-service:
       container_name: ng-docker-example
       build: .
       ports:
           - "4200:80"

现在我们来了解一下上述组件的作用。

• 我们将使用version 3.7 来编制文件。
• 在services 部分，我们定义我们应用程序的服务，在我们的例子中是angular-service 。我们还说明了容器名称、构建文件夹以及适当的端口。

测试容器化的AngularJS应用程序

从你的终端（在项目的根部），通过运行来构建你的镜像。

    docker-compose build <name_of_your_service>

输入docker-compose 文件中指定的服务名称，作为<name_of_your_service>。在我们的例子中，它是angular-service 。

构建命令应该如下图所示。

docker-compose build angular-service

在所有步骤完成后，运行以下命令来初始化所有在docker-compose 文件中指定的services 。

docker-compose up

docker化的AngularJS应用程序现在已经启动并运行。你可以通过导航到http://localhost:4200 ，从你的浏览器访问容器化的应用程序。

你可以通过运行以下命令确认你的Docker build image 。

docker images

设置好镜像后，你可以将其部署到Dockerhub或与队友分享。

总结

Docker虚拟化的确是一项不可思议的技术。它几乎可以用于虚拟化任何类型的应用程序。AngularJS主要用于开发前端网页设计。然而，你仍然可以将它与Node.js等后端技术一起使用。有趣的是，你仍然可以把它作为一个全栈应用程序进行dockerize。