如何使用VS Code扩展来将Angular 7容器化的Docker方案

1 年 ago

逸, 科

2 minutes

使用VS Code扩展功能来操作Docker的方法

由大津秀一所著

视频解说（日语）

视频解说（英文）

动作环境

本次，我們將介紹Visual Studio Code的Docker擴展功能。

而且，在使用此擴展功能的同時，我們將創建Angular7的Docker映像。

作为服务器，我们将使用在Alpine Linux上运行的Nginx，而不是内置在Angular中的服务器。

考虑到这种环境，我们决定本次使用在WSL（Windows Subsystem for Linux）上的Ubuntu系统上运行的Docker，而不是使用Docker for Windows。

安装Visual Studio Code的Docker扩展功能

首先，打开在WSL上安装的Ubuntu。

然后，在命令行中输入”code .”，打开Visual Studio Code。

undefined

当打开VS Code后，点击左侧的扩展图标，然后在搜索框中输入”Docker”。

然后，在搜索结果列表中会显示出微软公司开发的Docker扩展功能，您只需点击安装。

undefined

当Docker的说明页面显示出来后，点击重新加载并激活它。

现在Docker扩展功能已经启用。

在这里先关闭 VS Code。

生成 Angular 7 用于测试。

undefined

在这里，我们将创建一个用于测试的Angular7项目。

我們決定首先檢查運行環境。

首先，在命令行中输入ng –version来确认Angular和Node.js的版本。

Angular的版本是7.0，而Node.js的版本是10.12。请牢记这个Node.js的版本，因为它以后会变得很重要。

undefined

下一步，我们将创建一个用于测试的Angular 7项目。

输入命令ng new ng7-initial。

ng7-initial是项目名称，也可以使用其他名称。

undefined

首先，我们需要确定是否需要添加路由功能，这里我们假设要添加（选项：是）。

接下来有关样式表格式的问题，请选择SCSS进行尝试。

接下来，安装将会开始。

这个过程需要一些时间。

undefined

当安装完成后，转到该项目目录，输入code .，启动Visual Studio Code。

undefined

当您打开VS Code后，按下“control + @”键可以打开命令行窗口。

然后，输入”ng s -o”并启动本地服务器。

undefined

显示了Angular的默认页面。

好的。

返回到VS Code，并使用control + c停止本地服务器。

创建Docker文件。

undefined

这个Dockerfile的结构是分为两个阶段。

首先，在Node.js上安装Angular 7，并在此基础上以生产模式编译此项目，生成用于发布的压缩JavaScript文件。

然后，在Alpine Linux上生成Nginx，并将该压缩JavaScript与必要的Node.js一起复制到其主页目录中。

undefined

为了明确这是在Nginx上运行的页面，我们将稍微修改默认页面的内容。

创建Docker镜像

undefined

有了Docker拓展功能，接下来就是创建Docker镜像，这个操作变得非常简单。

使用VS Code打开Dockerfile，并在其中右键点击以显示弹出菜单。

然后，只需要选择”Build Image”即可。

有人询问生成图像的名称，因此我们将其命名为”ng7-initial:1.0″。

以下是指定版本的选项。

然后开始生成。

这个过程需要一些时间。

undefined

在路上发生了错误。

根据错误信息显示，最新版本的Node.js在样式格式上选择了SCSS时似乎存在问题。

因此，我們將首先檢查啟動的Node.js版本並進行更改。

undefined

这个版本是10.12版本。

# stage 1
FROM node:10.12 as node
WORKDIR /app
COPY . .
RUN npm install
RUN npm run build --prod

# stage 2
FROM nginx:alpine
COPY --from=node /app/dist/ng7-initial /usr/share/nginx/html

修改Docker文件，并重新生成Docker镜像。

这次可以。

启动Docker镜像

undefined

在这里，我们将检查是否已生成Docker镜像。

点击VS Code左侧的Docker图标。

undefined

然后，选择”图像”。

然后确实可以看出，生成了ng7-initial。

undefined

接下来，我决定在本地启动这个镜像。

在VS Code的命令行中，输入docker run –rm -d -p 80:80 ng7-initial:1.2。

以下是每个选项的指定：

每个选项的设定如下：

当参数 “–rm” 被指定时，容器在结束时会自动被删除。

以后台模式运行容器

– 指定容器端口号: 指定容器端口号供外部访问使用

表示着。

Nginx在内部使用80端口，意味着它可以直接通过80端口对外提供访问。

undefined

在这里，我们将在浏览器中确认运行情况。

因为我们已经在外部开放了80端口，所以可以进行访问。

我应该可以直接访问 http://localhost。

我成功验证了在Docker上运行的Angular7和Nginx。

好的。

请提供完整的要求。

参考文献

https://www.udemy.com/angular5-l/

✖

将在 10 秒后关闭

bannerAds