我想在GitHub上管理Angular在Docker环境下的部署

2 年 ago
宇, 华
3 minutes

0. 介绍

因为我以前从未接触过Angular和Docker，所以决定试试看。
顺便一提，还决定将它们上传到GitHub进行管理。

1. 安装Docker Engine

按照以下官方网站的说明，安装DockerEngine。

    • 以下のリンクはUbuntuの手順。環境によって手順は異なるので、自身の環境に応じて変更。

https://docs.docker.com/engine/install/ubuntu/

以下是从公式中直接复制粘贴的命令。(Ubuntu)sh
# 卸载旧版本
$ sudo apt-get remove docker docker-engine docker.io containerd runc

# 安装方法

## 设置仓库
$ sudo apt-get update
$ sudo apt-get install \
ca-certificates \
curl \
gnupg \
lsb-release
$ sudo mkdir -p /etc/apt/keyrings
$ curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo gpg –dearmor -o /etc/apt/keyrings/docker.gpg
$ echo \
“deb [arch=$(dpkg –print-architecture) signed-by=/etc/apt/keyrings/docker.gpg] https://download.docker.com/linux/ubuntu \
$(lsb_release -cs) stable” | sudo tee /etc/apt/sources.list.d/docker.list > /dev/null

## 安装 Docker 引擎
$ sudo apt-get update
$ sudo apt-get install docker-ce docker-ce-cli containerd.io docker-compose-plugin
$ sudo docker run hello-world

2. 安装Docker Desktop

为了使用Docker Compose，按照以下官方网站上的说明，安装Docker Desktop。

    • Docker Composeは、Docker Desktopに内包されているので、Docker DesktopをインストールすればOK

 

    • 以下のリンクはUbuntu。環境によって手順は異なる。

https://docs.docker.com/desktop/install/ubuntu/

以下是从公式中复制并粘贴的命令。（适用于Ubuntu）在执行命令之前，请确保获取最新的包（Ubuntu的DEB包）。

https://docs.docker.com/desktop/release-notes/

sh
# 前提条件
$ sudo apt install gnome-terminal
$ sudo apt remove docker-desktop

# 安装Docker Desktop
$ sudo apt-get update
$ sudo apt-get install ./docker-desktop–.deb # 使用下载的DEB包在此处安装

创建Docker + Angular的配置文件

在适当的目录下创建配置文件组。

# 作業ディレクトリの確認（どこでもいいです）
$ pwd
/home/your-account-name/

# アプリのルートディレクトリの作成
$ mkdir sample-angular-on-docker
$ cd sample-angular-on-docker

# 構成ファイル群を作成
$ touch README.md            # Git管理したいので、とりあえず作成
$ touch docker-compose.yml   # Docker Composeで環境構築していく（3.2章参照）
$ mkdir app/                 # Angularのファイル群が格納される（5章参照）
$ mkdir doc/                 # Markdown（Mermaid記法）の設計書を入れていきたい（今回は不使用）
$ mkdir env/                 # Dockerfile群を格納
$ mkdir env/node             # Angularを稼働させるため、nodeのDockerfileを管理
$ touch env/node/Dockerfile  # Angularを稼働させるため、nodeのDockerfile（3.1章参照）

创建Dockerfile

使用Vim等工具创建./env/node/Dockerfile。

FROM    node
WORKDIR /projects
RUN     npm install -g @angular/cli
EXPOSE  4200

3.2. 创建 docker-compose.yml 文件

使用像vim这样的工具，创建./docker-compose.yml文件。

version: "3"
services:
  node:
    build: ./env/node
    ports:
      - "4200:4200"
    volumes:
      - ".:/projects"
    tty: true

4. 启动Docker容器

在第三章的时候，构建文件已经完成，因此可以使用以下命令启动Docker容器。

# `-d`を付ける事で、バックグラウンドで実行
$ sudo docker compose up -d

查看容器列表和镜像列表。

如需查看正在运行的容器清单和已创建的镜像清单，请执行以下命令。

# 起動しているコンテナ一覧を表示
$ sudo docker ps
CONTAINER ID   IMAGE                           COMMAND                  CREATED          STATUS          PORTS                                       NAMES
60ff460a2f75   sample-angular-on-docker-node   "docker-entrypoint.s…"   49 minutes ago   Up 33 minutes   0.0.0.0:4200->4200/tcp, :::4200->4200/tcp   sample-angular-on-docker-node-1

# 作成済みのイメージ一覧を表示
$ sudo docker images
REPOSITORY                      TAG       IMAGE ID       CREATED             SIZE
sample-angular-on-docker-node   latest    16e654b2053b   About an hour ago   1.05GB

停止容器和删除镜像。

如果要停止正在运行的容器并删除已创建的镜像，请执行以下命令。

# 起動しているコンテナの停止（60ff460a2f75 = `docker ps`で得たコンテナID）
$ sudo docker stop 60ff460a2f75

# 作成済みのイメージ一覧を表示（16e654b2053b = `docker images`で得たイメージID）
$ sudo docker rmi -f 16e654b2053b

创建一个Angular项目

进入正在运行的容器，并创建一个Angular项目。

# 以下のコマンドでDockerコンテナに入る
$ sudo docker compose exec node bash


# ここから先はDockerコンテナ内での操作（Dockerコンテナから出るには`exit`を実行）
root@60ff460a2f75:/projects# pwd
/projects

root@60ff460a2f75:/projects# ls -la
total 28
drwxr-xr-x 6 root root 4096 Oct 31 07:15 .
drwxr-xr-x 1 root root 4096 Oct 31 06:56 ..
-rw-r--r-- 1 root root    0 Oct 31 06:05 README.md
drwxr-xr-x 6 root root 4096 Oct 31 07:14 app
drwxr-xr-x 2 root root 4096 Oct 31 06:05 doc
-rw-r--r-- 1 root root  134 Oct 31 06:55 docker-compose.yml
drwxr-xr-x 3 root root 4096 Oct 31 06:54 env

# Angularアプリの作成（カレントディレクトリのapp配下に作成。Git管理はapp配下ではなくホームディレクトリで行いたいので、ここではスキップ。）
root@60ff460a2f75:/projects# ng new app --skip-git

# Angularアプリの実行確認
root@60ff460a2f75:/projects# cd app
root@60ff460a2f75:/projects/app# ng serve --host 0.0.0.0

如果您可以访问以下网址，并且能够看到以下页面，那就没问题了。

    http://localhost:4200/
image.png

一旦确认了Angular应用的运行情况，可以通过退出命令在Docker容器中退出。

# Angularアプリの実行確認ができたら、`exit`でDockerコンテナから出ておく
root@60ff460a2f75:/projects/app# exit
exit

# Dockerコンテナから出た事を確認
$ pwd
/home/your-account-name/sample-angular-on-docker

6. Git 管理

Angular在Docker上的环境已经搭建完成，接下来将在GitHub上进行管理。

6.1. 创建存储库

根据以下的公式创建一个代码仓库。

    • https://docs.github.com/ja/get-started/quickstart/create-a-repo

 

    • リポジトリ名は、以下としている（好きにしていいです）

sample-angular-on-docker

6.2. 首次提交 cì

创建仓库后，会出现“按照以下步骤进行第一次提交”，请按照指示进行提交。

# Git管理対象ディレクトリ
$ pwd
/home/your-account-name/sample-angular-on-docker

# 公式に基づいてfitst commit
$ git init
$ git add README.md
$ git commit -m "first commit"
$ git branch -M main
$ git remote add origin git@github.com:your-account-name/sample-angular-on-docker.git  # 6.1章にて自身で付けたリポジトリ名を指定
$ git push -u origin main

7. 结束 🙂 🙂 )

只要安装了Docker Engine和Docker Desktop，这个就可以在任何地方运行了。

7.1 以后想要做的事情

    • フロントエンドはAngularで、バックエンドはPython(Django)やRuby(Rails)にしてみたい

MySQLとかNginxとかを共存させるにはどうしたらいいか試したい
複数コンテナを立ち上げて、コンテナ間通信をしてみたい

关于此事，请参考以下网站。

    • https://qiita.com/A-Kira/items/8693a78873ca9cab0738

 

    https://qiita.com/PRONakahira/items/f507d0f912974d1b8c58
bannerAds