尝试在docker环境中启动Angular开发环境

2 年 ago
新, 韵
1 minute

首先

我叫naritomo。

我现在是一名基础设施工程师。
最近对前端技术也很感兴趣，尝试使用Docker容器来部署Angular应用。

如果您能给我一些不同的建议，我会非常高兴。

项目概要

在Mac环境下，使用docker-compose来启动Angular容器。

源代码已经完成，位于以下位置。

 

为什么选择Docker这个选项呢？

作为基础架构工程师，我建议在开发环境中使用Docker，因为它更易于操作，并且我感受到了以下优点。

    • OS問わず同じ開発環境での開発が可能

 

    • 独立したフロントエンドコンテナを構築することにより、

 

    　バックエンドと分離した開発検証が可能。

事前准备 (shì

正在使用Mac+DockerCompose+VSCode+Git来构建环境。

请提供网址参考

Angular环境的构建步骤（在Docker上构建）

事前准备

使用Mac+DockerCompose+VSCode+Git搭建环境。

構建開發環境的方法(Angular)

构建Docker配置文件夹。

创建根文件夹。

mkdir angular-docker
cd angular-docker

请创建一个Dockerfile并将以下内容放入其中。

FROM node:latest

WORKDIR /app

RUN npm install -g @angular/cli

RUN ng new sample

创建一个Docker-compose.yml文件，并将以下内容放入其中。

version: '3'
services:
  sample-angular:
    image: sample-angular-image
    container_name: sample-angular-container
    build:
      context: .
      dockerfile: Dockerfile
    command: sh -c "ng serve --host=0.0.0.0"
    ports:
      - "4200:4200"
    volumes:
      - ./app:/app
    working_dir: /app

容器构建

docker-compose build

创建一个Angular项目

可以将”sample”部分改为任意喜欢的名称。

docker-compose run --rm sample-angular sh -c "ng new sample"
cd app/sample
rm -rf .git

编辑Docker启动文件

请将Docker-compose.yml文件编辑如下内容：

根据前一步骤的情况，调整”sample”部分。

version: '3'
services:
  sample-angular:
    image: sample-angular-image
    container_name: sample-angular-container
    build:
      context: .
      dockerfile: Dockerfile
    command: sh -c "ng serve --host=0.0.0.0"
    ports:
      - "4200:4200"
    volumes:
      - ./app:/app
    working_dir: /app/sample　→最後に"/sample"を追記する。

启动容器

docker-compose up -d

网站确认

请访问以下链接，确保能够显示出Angular的首页屏幕。

http://localhost:4200/

操作開発环境

启动开发环境容器/重新加载设置。

docker-compose up -d

停止开发环境容器。

docker-compose stop

销毁开发环境容器.

docker-compose down

最后

作为掌握前端技术的第一步，我尝试搭建了一个Anular工作的Docker环境。

希望这篇文章能对使用Angular的人有所帮助。

bannerAds