Programming Self-Study Notebook

勉強したことを忘れないように! 思い出せるように!!

「Swagger関連の記事」のまとめ

f:id:overworker:20200810130648p:plain:h150



自分がswaggerに関して学んだ内容の一覧です。

基礎知識

運用

  • Swaggerサイトを「git+dockerコンテナ」で管理する

その他

その他の記事へ

Swaggerの基礎知識

f:id:overworker:20200810130648p:plain:h150

Swaggerとは

Swagger Spec(Swagger Specification)

Swaggerの仕様に準じた、RESTful APIインターフェイスを記述するためのフォーマット

  • YAMLJSON形式で定義されるドキュメント

Swaggerのツール群

ツール名 説明
Swagger Core API実装コードからSwagger Specで記載された設計を自動生成
Swagger Editor Swagger Specの設計書を記載するためのエディタ
Swagger UI Swagger Specで記載された設計からドキュメントを自動生成するツール
Swagger Codegen Swagger Specで記載された設計からAPIのスタブを自動生成する

Swaggerで出来ること

f:id:overworker:20200810011234p:plain:h250

swaggerサイトの構築(docker-compose.yaml)

f:id:overworker:20200628105903p:plain



swagger-UI、及び、RedocAPIドキュメント表示した際の実施内容を記録します。

事前調査(dockerhub)

swaggerapi/swagger-ui

f:id:overworker:20200810165034p:plain:w400

redocly/redoc

f:id:overworker:20200810165442p:plain:w400

ポイント

ローカル環境のディレクトリ構成

swagger_sample
├─docker-compose.yaml
└─swagger
     └─openapi-doc.yaml

docker-compose.yaml

version: '3'
services:

  # ===================
  # Swaggerをブラウザでプレビューするためのコンテナ:Swagger-UI版
  # ===================
  sample-swagger-ui:

    # -------------
    # dpckerhub上に公開されているswagger-uiのdockerイメージ
    # -------------
    image: swaggerapi/swagger-ui

    # -------------
    # ローカルとコンテナ内部のディレクトリ対応を指定(ローカル:コンテナ)
    # -------------
    #   SwaggerUIのコンテナではNginxがHTTPサーバとしてコンテナ内で動作する
    #     - Nginxのドキュメントルートに任意のAPI仕様書をマウントすることで、
    #       Swagger UIからAPI仕様書が参照できるようになる。
    #     - Nginxでは下記のディレクトリにドキュメントルートが設定されている
    #         - /usr/share/nginx/html
    # -------------
    volumes:
      - ./swagger:/usr/share/nginx/html/swagger

    # -------------
    # 環境変数の設定
    # -------------
    #   API-URL(環境変数):Swagger UIの画面を開いたときに初期値として参照するURL
    # -------------
    environment:
      API_URL: ./swagger/openapi-doc.yaml

    # -------------
    # 接続ポート(ローカル:コンテナ)
    # -------------
    ports:
      - '8001:8080'

  # ===================
  # Swaggerをブラウザでプレビューするためのコンテナ:Redoc版
  # ===================
  sample-redoc:

    # -------------
    # dpckerhub上に公開されているredocのdockerイメージ
    # -------------
    image: redocly/redoc

    # -------------
    # ローカルとコンテナ内部のディレクトリ対応
    # -------------
    volumes:
      - ./swagger:/usr/share/nginx/html/swagger

    # -------------
    # 環境変数の設定
    # -------------
    #   SPEC_URL:Redocの画面を開いたときに初期値として参照するURL
    #   PORT:nginx port(default:80)
    # -------------
    environment:
      SPEC_URL: ./swagger/openapi-doc.yaml
      PORT: 8080

    # -------------
    # 接続ポート(ローカル:コンテナ)
    # -------------
    ports:
      - '8002:8080'

docker-compose up実行結果

D:\--省略--\swagger_sample>docker-compose up
Pulling sample-swagger-ui (swaggerapi/swagger-ui:)...
latest: Pulling from swaggerapi/swagger-ui
cbdbe7a5bc2a: Pull complete                                                                                                                                                                85434292d1cb: Pull complete                                                                                                                                                                75fcb1e58684: Pull complete                                                                                                                                                                2a8fe5451faf: Pull complete                                                                                                                                                                42ceeab04dd4: Pull complete                                                                                                                                                                fae5e705c0f3: Pull complete                                                                                                                                                                6ba588ee292c: Pull complete                                                                                                                                                                abd81e6781a4: Pull complete                                                                                                                                                                39bc4e09f7b2: Pull complete                                                                                                                                                                2a9006b44cf3: Pull complete                                                                                                                                                                ac3e1aecab21: Pull complete                                                                                                                                                                Digest: sha256:29a372b3b749334755c17004b47ed3e5bc9e5895f060a95224dc7f73b66c7e1c
Status: Downloaded newer image for swaggerapi/swagger-ui:latest
Pulling sample-redoc (redocly/redoc:)...
latest: Pulling from redocly/redoc
cbdbe7a5bc2a: Already exists                                                                                                                                                               85434292d1cb: Already exists                                                                                                                                                               75fcb1e58684: Already exists                                                                                                                                                               2a8fe5451faf: Already exists                                                                                                                                                               42ceeab04dd4: Already exists                                                                                                                                                               f53722546a91: Pull complete                                                                                                                                                                44df732874e7: Pull complete                                                                                                                                                                4a4183107acf: Pull complete                                                                                                                                                                2d13c86a983a: Pull complete                                                                                                                                                                555b9716c093: Pull complete                                                                                                                                                                Digest: sha256:d39e0efd5af1f0d8621ae54b01f9816d2ce73683eb96d745daae8e2527b94a08
Status: Downloaded newer image for redocly/redoc:latest
Creating swagger_sample_sample-redoc_1      ... done                                                                                                                                       Creating swagger_sample_sample-swagger-ui_1 ... done                                                                                                                                       Attaching to swagger_sample_sample-redoc_1, swagger_sample_sample-swagger-ui_1

ローカルサイトにアクセスする

openapi-doc.yamlを編集すると、サイトが更新されます。 - 表示内容を更新するためには、「ページのリロード(F5)」が必要になります。

swagger-UIサイト

swagger-UIサイト

redocサイト

redocサイト

コンテナを停止する

  • cont+cを連打

Dockerfileの基本的なコトのメモ

f:id:overworker:20200628105903p:plain


Dockerfileによる構成管理

Dockerfileとは

Dockerfileは、Docker上で動作させるコンテナの構成情報を記述するためのファイル

記述する内容

  • ベースになるDockerイメージ
  • Dockerコンテナ内で行った操作
  • 環境変数などあの設定
  • Dockerコンテナ内で動作させておくデーモン実行

docker buildコマンドはDockerfileに記述された構成情報をもとにDockerイメージを作成する。
※ docker buildに関しての詳細は後述します。

Dockerfileの基本構文

  • テキスト形式のファイル
  • ファイル名:Dockerfileで拡張子はないことが多い

    • 別のファイル名を付ける場合は、ビルドする際にファイル名を明示する必要がある。
  • 基本的な構造は以下になります。

命令 引数
  • 命令は大文字でも小文字でも構いませんが、慣例的に大文字で統一して書きます。

主な命令

命令 説明
FROM ベースイメージの指定
RUN コマンド実行
CMD コンテナの実行コマンド
LABEL ラベルを設定
EXPOSE ポートのエクスポート
ENV 環境変数
ADD ファイル/ディレクトリの追加
COPY ファイルのコピー
ENTRYPOINT コンテナの実行コマンド
VOLUME ボリュームのマウント
USER ユーザーの指定
WORKDIR 作業ディレクト
ARG Dockerfile内の変数
ONBUILD ビルド完了後に実行される命令
STOPSIGNAL システムコールシグナルの設定
HEALTHCHECK コンテナのヘルスチェック
SHELL デフォルトシェルの設定
  • Dockerfileにコメントを記述する場合は#を使用する
# ココはコメント
命令 引数 # ココもコメント

Dockerfileの作成

FROM命令の基本構文

# タグ名を省略したときはベースイメージの最新バージョン(latest)が適用されます。
FROM [イメージ名]

# 作者がつけたタグを利用する
FROM [イメージ名]:[タグ名]

# イメージを一意に特定するときは
FROM [イメージ名]@[ダイジェスト]
# ベースイメージの設定
FROM centos:centos7

Dockerfileのビルドとイメージレイヤー

DockerfileからDockerイメージの作成

docker buildコマンド

構文

docker build -t [生成するイメージ名]:[タグ名] [Dockerfileの場所]

入力サンプル

docker build -t sample:1.0 D:\User\Test01

Sending build context to Docker daemon  3.072kB
Step 1/1 : FROM centos:centos7
centos7: Pulling from library/centos
Digest: sha256:e9ce0b76f29f942502facd849f3e468232492b259b9d9f076f71b392293f1582
Status: Downloaded newer image for centos:centos7
 ---> b5b4d78bc90c
Successfully built b5b4d78bc90c
Successfully tagged sample:1.0
SECURITY WARNING: You are building a Docker image from Windows against a non-Windows Docker host. All files and directories added to build context will have '-rwxr-xr-x' permissions. It is recommended to double check and reset permissions for sensitive files and directories.

オプションについて(一部)

オプション 説明
-t, --tag=[] '名前:タグ' 形式で名前とオプションのタグを指定
-f, --file="" Dockerfileの名前 (デフォルトは 'PATH/Dockerfile')
--no-cache イメージ構築時にキャッシュを使わない
--pull 常に新しいイメージのダウンロードを試みる
-q, --quiet 構築時の表示を抑制し、成功時はイメージ ID を表示
--rm=true 構築に成功したら、全ての中間コンテナを削除
Dockerイメージを確認する
C:\Users\YUTAKA>docker images
REPOSITORY          TAG                 IMAGE ID            CREATED             SIZE
centos              latest              831691599b88        7 weeks ago         215MB
centos              7                   b5b4d78bc90c        3 months ago        203MB
centos              centos7             b5b4d78bc90c        3 months ago        203MB
sample              1.0                 b5b4d78bc90c        3 months ago        203MB

Dockerイメージのレイヤー構造

※ 省略

マルチステージビルドによるアプリケーション開発

  • マルチステージビルド:開発環境用のDockerイメージとプロダクション環境で実際に動作させるDockerイメージを同時に生成する機能
    • 本番環境は必要最低限の実行モジュールだけを配置することが望ましい
      • コンピューティングリソースの有効活用の観点
      • セキュリティの観点
    • 開発環境では、開発支援ツールやデバッグ用のライブラリを使用することがあるが、本番環境では必ずしも必要ない。

参考文献

以下の本を読みながら、Dockerの勉強を開始しました。

その他の記事へ

docker-composeの基本的なコトのメモ

f:id:overworker:20200628105903p:plain


docker-composeとは?

  • 複数のコンテナから成るサービスを構築・実行する手順を自動化し、管理を容易にする機能
    • compose ファイルを用意してコマンドを1 回実行することで、そのファイルから設定を読み込んですべてのコンテナサービスを起動することができます。

docker-composeを使うための工程

以下の3つの工程が必要になります。

工程1.個々のコンテナのDockerfileの作成

  • 個々のコンテナのDockerfile を作成する(既にあるイメージを使う場合は不要)

工程2.docker-compose.ymlの作成

  • docker-compose.yml内部には以下の項目を記述します

記述内容

分類 項目例 補足
構築定義 image:
build:
docker buildで指定することができるオプション
起動定義 command:
volumes:
ports:
depens_on:
docker runで指定することができるオプション
  • buildで指定するDockerfileはパス指定/ファイル名指定が可能

工程3.docker-compose up(コンテナの生成+起動)の実行

  • "docker-compose up" コマンドにより、docker-compose.yml で定義したコンテナを開始します

docker-composeの基本コマンド

docker-compose build --no-cache

  • 複数のコンテナのイメージのビルドを実施する

docker-compose up

  • 複数のコンテナを起動する

docker-compose ps

  • docker-compose.yamlに記述されたコンテナ一覧を表示する。

docker-compose down

  • 複数のコンテナを停止して削除する

参考文献

以下の本を読みながら、Dockerの勉強を開始しました。

その他の記事へ

GitHubのアカウントを作成した時のメモ

f:id:overworker:20200808022404p:plain:h200

GitHubアカウントを作成したときの記録を残しておきます。

作成動機

<>なぜアカウントを作成するか?

勉強時に使用している本のSampleコードをGitからクローンしようとした際に、以下の画面が表示されたため、これを機にGitHubアカウントを作成しようと思いました。

f:id:overworker:20200808013646p:plain:h250

手順

1.サイトへ移動する

GitHubのサイトへ移動します。

2.アカウント情報を入力

f:id:overworker:20200808015503p:plain:h250

入力項目は3項目 - Username(既存ユーザーとバッティングしないモノ?) - Email - Password

3.パズルを解く

f:id:overworker:20200808014854p:plain:h300
f:id:overworker:20200808015139p:plain:h150
f:id:overworker:20200808015257p:plain:h150

4.プランを選択する

Selected plan: Free

5.アンケートに答える

f:id:overworker:20200808020130p:plain:w350
f:id:overworker:20200808020214p:plain:w350
f:id:overworker:20200808020249p:plain:w350
f:id:overworker:20200808020458p:plain:w350

6.メールを確認する

f:id:overworker:20200808021237p:plain:h250

6.登録完了メールが届く

f:id:overworker:20200808023401p:plain:h250

以上です。

JavaScriptで配列やオブジェクトをコピーする

f:id:overworker:20200406080809j:plain:h250

新しいオブジェクトに既存のオブジェクトを代入するだけでは、 別のオブジェクトを作成したことになりません。

既存のオブジェクトに影響を与えないような、別のオブジェクトを新規で作成する方法を記述します。

方法:オブジェクトのディープコピーを作成する

const originObj = {a:0, b:{c:'d'}};
const deepCopyObj = JSON.parse(JSON.stringify(originObj));
console.log(originObj);   // {a: 0, b:{c: "d"}}
console.log(deepCopyObj); // {a: 0, b:{c: "d"}}

deepCopyObj.b.c = 'test';
console.log(originObj);   // {a: 0, b:{c: "d"}}
console.log(deepCopyObj); // {a: 0, b:{c: "test"}}
  • キーワードはディープコピーです。
  • 関連ワードとしてシャローコピーがあります。

方法:配列のディープコピーを作成する

const originAry = ['Apple', 'Banana', ' Chocolate'];
const newAry = [...originAry];
console.log(originAry);   // ["Apple", "Banana", " Chocolate"]
console.log(newAry); // ["Apple", "Banana", " Chocolate"]

newAry.push('Dog');
console.log(originAry);   // ["Apple", "Banana", " Chocolate"]
console.log(newAry); // ["Apple", "Banana", " Chocolate", "Dog"]

キーワードはスプレッド構文です。

その他の記事について

overworker.hatenablog.jp