ultra code https://futureys.tokyo 開発ブログ Wed, 14 Oct 2020 02:54:43 +0000 ja hourly 1 https://wordpress.org/?v=5.5.1 https://futureys.tokyo/app/uploads/2020/06/cropped-favicon-7-32x32.png ultra code https://futureys.tokyo 32 32 【Docker】 WSL 2 を利用したコンテナー内開発で権限をどう設定するべきか https://futureys.tokyo/how-permission-should-be-set-for-developing-inside-a-container-using-wsl-2/ Wed, 14 Oct 2020 02:54:43 +0000 https://futureys.tokyo/?p=2952 WSL 2 の Linux ファイルシステムを bind mount してコンテナー内開発を行う場合、権限を適切に設定しないと、コンテナー内で作成したファイルが、ホストの WSL 2 や Windows 側で操作できなく […]

The post 【Docker】 WSL 2 を利用したコンテナー内開発で権限をどう設定するべきか first appeared on ultra code.

]]>
WSL 2 の Linux ファイルシステムを bind mount してコンテナー内開発を行う場合、
権限を適切に設定しないと、
コンテナー内で作成したファイルが、ホストの WSL 2 や Windows 側で
操作できなくなってしまうなどの問題が発生します。

この記事では、
WSL 2 を利用したコンテナー内開発において
権限をどう設定するべきかについて解説します。

WSL 2 を利用したコンテナー内開発での権限の問題

初期状態では、
WSL 2 のファイルシステムを開発用コンテナーに bind mount すると、
多くの場合、コンテナー内で作成したファイルが
ホストの WSL 2 や Windows 側で操作できなくなってしまいます。

これは、権限が次のようになりやすいためです:

対象ユーザー権限
コンテナー内で作成したファイルの所有者root
WSL 2 や Windows 側からの操作UID 1000

コンテナー側のユーザー権限について知っておくべきこと

  • コンテナー内は root 権限を前提に設計されていることが多いです
    • そのため、Visual Studio Code のコンテナー内開発で作ったファイルは所有者が root になります
  • 公開されているイメージには、
    コンテナー内にユーザーや権限に関する意図的な設計がある場合もあります
      • Nginx 公式イメージにおける www-data ユーザー
      • MySQL 公式イメージにおける mysql ユーザー
  • コンテナーを実行するときに実行ユーザーを指定する方法もあります
    • しかし、あまり実用的ではありません
      • 今度はコンテナーが設計通りに動作しない問題を解決しなくてはならなくなります
        • コンテナー内が既定のユーザー権限を前提にした設計になっていることが多いため

ホスト側のユーザー権限について知っておくべきこと

  • ホスト側の WSL 2 Linux ディストリビューションは
    初期設定では、UID 1000 のユーザーとして操作することになります
    • UID 1000 は Linux ディストリビューションの初期設定時に作成されたユーザーです
  • Windows のエクスプローラーからの操作も、この UID 1000 のユーザーの扱いとなります
    • Windows 側からコピーや移動して持ってきたファイルも
      UID 1000 のユーザーが所有者となります

Docker 公式のベストプラクティス

Docker の公式ドキュメントでは、
権限を気にする必要があったり、ファイル・フォルダーを追加更新削除する場合、
bind mount ではなく volume を使うことを推奨しています。

ただし、同時に各所で
「bind mount は開発環境に適しています」
とも記載されています。

One case where it is appropriate to use bind mounts is during development

Where and how to persist application data | Docker development best practices | Docker Documentation

参考:

volume を使う場合、インポートやエクスポートの処理を自作することになり、
開発の開始と終了時にこれらの処理を実行する必要があります。

参考: Use volumes | Docker Documentation

Visual Studio Code のベストプラクティス

Visual Studio Code の公式ドキュメントでは、
ユーザーと権限に関するいくつかの対策が記載されています。

中でも、新たに root 以外の実行ユーザーを作ることは
開発環境だけでなく本番環境にとっても
セキュリティー的に望ましいと解説されています。

参考: Adding a non-root user to your dev container | dvanced Container Configuration

Running your application as a non-root user is recommended
even in production (since it is more secure),
so this is a good idea even if you’re reusing an existing Dockerfile.

Creating a non-root user | Advanced Container Configuration

ただし、次のような課題もあります:

  • 開発者同士でホスト側の UID を合わせる必要があります
  • コンテナー内にユーザー ID を作成してから利用開始する必要があるため
    公開されている Docker イメージを、そのまますぐ利用することができなくなります
  • 公開されている Docker イメージのユーザー権限の設計を変えることになります

WSL 2 を隔離してデフォルトユーザーを root にする

WSL 2 のデフォルトユーザーを root にすると、権限の煩雑さから解放されます。
セキュリティー的にはあまり望ましくありませんが、
次のことを考慮すると、Docker を利用する上においては、リスクは変わってないと言えます。

  • WSL 2 にする前の Docker Desktop も権限的にほぼ同様の状態であること
  • いずれにしてもコンテナーが root で動作していること

ただ、WSL 2 上で操作を誤ると、
権限が強いために重要なファイルを削除してしまう、といったことも考えられます。

参考: Windows 10の「WSL」の自動マウントやfstabによるマウント処理をwsl.confファイルで制御する:Tech TIPS – @IT

これを防ぐため、WSL 2 側からの Windows へのアクセスは
読み取り専用にしておくことをお奨めします。

どうやって WSL 2 のデフォルトユーザーを root にするの?

既存の Linux ディストリビューションの設定を変更する場合

1. root のパスワードを設定します

対象の Linux ディストリビューションのターミナルを起動し、
次のように入力します:

# ユーザーを root に切り替え
y-shinoda $ sudo su -
# パスワードを設定
root $ passwd

参考: Set up WSL (Ubuntu) on Windows 10 Pro | 東京大学 佐々木淳 研究室 沿岸環境学 海岸工学 環境水工学 水環境学

2. デフォルトユーザーを root に変更します

Windows PowerShell を管理者権限で起動し、
次のコマンドを実行します:

<Linux ディストリビューション名> config --default-user root

例: Ubuntu の場合:

ubuntu config --default-user root

参考: ubuntu 14.04 – How to sign into “root” account by default on Windows Subsystem for Linux Bash terminal – Super User

新規 Linux ディストリビューションを設定する場合

少なくとも、Ubuntu は Windows へのインストール直後に
次の手順でデフォルトユーザーを root にできます。

1.
Microsoft Store から Windows に Ubuntu をインストールし終わったら、
Ubuntu を起動し、ターミナル上でインストール処理の完了を待ちます。

ターミナル上でインストール処理の完了を待ちます
ターミナル上でインストール処理の完了を待ちます

2.
インストール処理が完了し、”Enter new UNIX username:” と表示されたら
一旦、ターミナルを閉じます。

"Enter new UNIX username:" と表示されたら 一旦、ターミナルを閉じます
“Enter new UNIX username:” と表示されたら 一旦、ターミナルを閉じます

3.
再度 Ubuntu を起動すると、デフォルトユーザーが root になっています。

再度 Ubuntu を起動すると、デフォルトユーザーが root になっています
再度 Ubuntu を起動すると、デフォルトユーザーが root になっています

どうやって WSL 2 側から Windows へのアクセスを読み取り専用にするの?

WSL 2 の Linux ファイルシステム上の /etc/wsl.conf に
次の内容のファイルを作成します:

[automount]
options="metadata,umask=22,fmask=11,ro"

そして Windows を再起動します。

すると、Linux ファイルシステムで開いたシェルからは、
権限の表示は書き込み可能の表示でも、
実際に書き込みを行うと読み込み専用のファイルシステムであるエラーが発生します:

$ ls -la /mnt/c/Users/public/workspace
total 0
drwxr-xr-x 1 root root 4096 Oct 14 11:44 .
drwxr-xr-x 1 root root 4096 Oct 14 11:44 ..
-rwxr--r-- 1 root root    0 Oct 14 11:44 test1.txt
$ touch /mnt/c/Users/public/workspace/test2.txt
touch: cannot touch '/mnt/c/Users/public/workspace/test2.txt': Read-only file system
$ rm -rf /mnt/c/Users/public/workspace
rm: cannot remove '/mnt/c/Users/public/workspace/test1.txt': Read-only file system

参考:

ちなみに、読み取り専用にするのではなく、マウント自体をやめてみたところ、
Visual Studio Code の WSL リモート開発とコンテナー内開発が動かなくなりました。

Visual Studio Code の WSL リモート開発とコンテナー内開発のエラー
Visual Studio Code の WSL リモート開発とコンテナー内開発のエラー

Visual Studio Code
Docker returned an error. Make sure the Docker daemon is running.
[OK]

The post 【Docker】 WSL 2 を利用したコンテナー内開発で権限をどう設定するべきか first appeared on ultra code.

]]>
【Visual Studio Code】警告表示のための拡張機能を使って学びの速度を上げよう https://futureys.tokyo/lets-speed-up-learning-with-extension-for-displaying-warning-in-vscode/ Sun, 11 Oct 2020 04:31:34 +0000 https://futureys.tokyo/?p=2913 Visual Studio Code で拡張機能を使用すると、特定の記法やプログラミング言語に関連する機能、デバッガー、ツールを追加することができます。 中でも、警告表示のための拡張機能を使うことは特定の記法やプログラミ […]

The post 【Visual Studio Code】警告表示のための拡張機能を使って学びの速度を上げよう first appeared on ultra code.

]]>
Visual Studio Code で拡張機能を使用すると、
特定の記法やプログラミング言語に関連する機能、デバッガー、ツールを
追加することができます。

中でも、警告表示のための拡張機能を使うことは
特定の記法やプログラミング言語の習得速度に大きく貢献します。

この記事では、まず、英文の作成を例に
警告表示のための拡張機能が習得速度に与える影響を解説し、
その後、特定の記法やプログラミング言語で
警告表示を行うための拡張機能を紹介します。

リモートで開発するための Visual Studio Code 講座 目次にもどる

英文を書いてみよう

まず、新しいフォルダーを作成し、その中で Visual Studio Code を開きます。
フォルダー名は何でも構いません。
この例では “test-vscode-extension” として進めます。

次に、開いた Visual Studio Code で新しいテキストファイルを作成します。
サイドバーの [EXPLORER] にマウスのカーソルを移動すると、
フォルダー名の右側にアイコンが表示されるので、
次のアイコンをクリックします:

新しいファイルの作成
新しいファイルの作成

すると、ファイル名の入力欄が表示されるので
末尾が “.txt” で終わるファイル名を入力します。
この例では、”test.txt” として進めます。

ファイル名の入力欄
ファイル名の入力欄

すると、作成したファイルがエディターで開くので、
次のテキストを入力します:

Visual Studio Code extentions let you add languages, debuggers, and tools
to your installation to support your development workflow.
スペルミスを含む英文
スペルミスを含む英文

上記の英文にはスペルミスが含まれています。
スペルミスに気付かずに文書を書き続けて
どこかへ提出したり何かに印刷してしまったりすると
後から修正するのは面倒になっていき、修正するコストもかかります。

そこで、警告表示を行うための拡張機能をインストールしてみましょう。

拡張機能 “Code Spell Checker” をインストールしてみよう

Visual Studio Code 左側のアクティビティバーの拡張機能アイコンクリックし
拡張機能ビューを表示します。

[拡張機能] ビューの上部にある [検索] ボックスに
「Spell」と入力し、
表示された一覧の中から “Code Spell Checker” の [Install] ボタンをクリックします。

"Code Spell Checker" のインストール
“Code Spell Checker” のインストール

インストールが完了すると、
[Install] ボタンが歯車のアイコンの [Manage] ボタンに変わります。

[Manage] ボタン
[Manage] ボタン

スペルミスを確認してみよう

インストールが完了したら、再度英文をエディターを開いてみましょう。
スペルミスの部分に波線が表示され、
カーソルをあわせると警告メッセージと電球のアイコンが表示されます。

Code Spell Checker の警告表示
Code Spell Checker の警告表示

スペルミスを修正したりすることもできます。
電球アイコンをクリックするか、
キーボードからショートカットで Ctrl + . を入力します。
すると、修正候補の文字列などが表示されます。

Code Spell Checker による修正
Code Spell Checker による修正

修正候補の文字列を選択すると、スペルミスが修正され波線が消えます。

Code Spell Checker による修正の結果
Code Spell Checker による修正の結果

ここでは解説しませんが、スペルミスとして検出された単語を辞書に登録して
以降はスペルミスとして検出しないことも可能です。

警告が表示されると嬉しいこと

ここまでの内容から、
エディターに警告が表示されることは次の点で有利です:

  • 問題が発生する前に予防的に修正できます
  • 自分で気付かなかったり知らなかった情報に遭遇でき、学びを得る機会が増えます

前者は一般的に言われていますが、
実は一般的に言われていない後者が非常に重要です。

このような警告を学びの機会と捉えるか面倒と捉えるかで
1年後の知識水準に大きな差が生まれることになります。

この警告表示の重要性は
プログラミング言語や何かを表現するための記法においてもほぼ同様です。

特定の記法やプログラミング言語で警告表示を行うための拡張機能

ほんの一例ですが、たとえば次のような警告表示のためのの拡張機能があります:

プログラミング言語・記法警告表示のための拡張機能
Markdownmarkdownlint
YAMLYAML
HTMLHTMLHint
XMLXML, XML Tools
CSS, Sass(拡張機能不要)
JavaScriptESLint
PythonPyLint, Flake8, mypy, pydocstyle, pycodestyle (pep8), prospector, pylama, bandit (拡張機能不要)
JavaCheckstyle for Java
PHPphpcs
Rubyruby-rubocop
DockerDocker
KubernetesKubernetes, YAML
CloudFormationCloudFormation Linter
日本語文章テキスト校正くん

拡張機能は常に新しいものが公開されたり
アップデートで強化されたりしていますので
ここに掲載したものに限らず常に色々探して試してみることをお奨めします。

拡張機能の管理に関する必要最低限の操作は次の記事で解説しています:

参考: どうやって拡張機能を管理するの?

これらの拡張機能の多くは、
「リンター」と呼ばれるツールを
Visual Studio Code から利用できるようにしたものです。

リンターってなに?

リンター (Linter) とは、次のような問題を検出して警告するツールです:

  • エラーにつながる可能性のある微妙なプログラミング
  • 型破りなコーディング手法

具体的には、例えば次のような問題を検出して警告します:

  • 標準的でない文体
  • 括弧の欠落
  • 初期化されていない変数の使用
  • 未定義の変数の使用
  • 未定義の関数の呼び出し
  • 組み込みの型や関数の再定義の試行

状況により警告表示が妥当でない場合のために、
基本的には警告を抑制する方法も提供されています。

リンターを使うことで、次のような効果が期待できます:

  • エラーが発生する前に予防的に修正できます
  • コードをより読みやすく保守しやすくするための標準的な文体を保つことができます
  • 自分で気付かなかったり知らなかった情報に遭遇でき、学びを得る機会が増えます

リモートで開発するための Visual Studio Code 講座 目次にもどる

The post 【Visual Studio Code】警告表示のための拡張機能を使って学びの速度を上げよう first appeared on ultra code.

]]>
【Visual Studio Code】どうやって拡張機能を管理するの? https://futureys.tokyo/how-should-i-manage-extension-in-vscode/ Sat, 10 Oct 2020 17:37:59 +0000 https://futureys.tokyo/?p=2869 Visual Studio Code を利用するにあたりほぼ必ず拡張機能を利用することになります。 この記事では、拡張機能を検索、インストール、および管理する方法について最低限知っておくべき […]

The post 【Visual Studio Code】どうやって拡張機能を管理するの? first appeared on ultra code.

]]>
Visual Studio Code を利用するにあたり
ほぼ必ず拡張機能を利用することになります。

この記事では、拡張機能を検索、インストール、および管理する方法について
最低限知っておくべきポイントに絞って説明します。

参考: Managing Extensions in Visual Studio Code

リモートで開発するための Visual Studio Code 講座 目次にもどる

拡張機能の管理に関する操作

拡張機能ビューから
拡張機能をインストール、無効化、更新、およびアンインストールできます。
Visual Studio Code 左側のアクティビティバーの拡張機能アイコンクリックし
拡張機能ビューを表示します。

拡張機能ビュー
拡張機能ビュー

初期設定では、拡張機能ビューには、次のビューが表示されます。

  • 現在インストールしている拡張機能
  • 推奨されているすべての拡張機能

Visual Studio Code をインストールしたタイミングによっては、
初期設定での上記のビューではない可能性もあります。

いずれの場合も、拡張機能ビュー上部の […] をクリック → [Views] で
次の中から選択することができます

Installed現在インストールしているすべての拡張機能
Recommended推奨されているすべての拡張機能
Enabled現在有効化されている拡張機能
Disabled現在無効化されている拡張機能
拡張機能ビュー上部の [...] をクリック → [Views]
拡張機能ビュー上部の […] をクリック → [Views]

拡張機能の詳細の確認

拡張機能の項目をクリックすると、
拡張機能の詳細ページが表示され、詳細を確認できます。

拡張機能の詳細ページ
拡張機能の詳細ページ

検索

[拡張機能] ビューの上部にある [検索] ボックスに
探している拡張機能、ツール、またはプログラミング言語の名前などを入力します。
たとえば、「markdown」と入力すると、
Markdown に関する拡張機能のリストが表示されます。

[拡張機能] ビューの上部にある [検索] ボックス
[拡張機能] ビューの上部にある [検索] ボックス

ここでは詳しく解説しませんが、
結果をフィルタリングしたり並べ替えることもできます。

参考:

インストール

拡張機能をインストールするには、[Install] ボタンをクリックします。

拡張機能をインストールするには、[Install] ボタンをクリックします
拡張機能をインストールするには、[Install] ボタンをクリックします

インストールが完了すると、
[Install] ボタンが歯車のアイコンの [Manage] ボタンに変わります。

[Manage] ボタン
[Manage] ボタン

アンインストール

拡張機能をアンインストールするには、
拡張機能の項目の右側にある歯車のボタンをクリックし、
ドロップダウンメニューから [Uninstall] を選択します。

ドロップダウンメニューから [Uninstall] を選択
ドロップダウンメニューから [Uninstall] を選択

これにより、拡張機能がアンインストールされ、
Visual Studio Code を再読み込みするように求められます。

拡張機能は自動更新されます

Visual Studio Code は拡張機能の更新をチェックし、
自動的に更新をインストールします。

自動更新を無効にすることもできます。

参考:

リモートで開発するための Visual Studio Code 講座 目次にもどる

The post 【Visual Studio Code】どうやって拡張機能を管理するの? first appeared on ultra code.

]]>
リモートで開発するための Visual Studio Code 講座 目次 https://futureys.tokyo/table-of-contents-vscode-lesson-for-remote-development/ Thu, 08 Oct 2020 03:32:53 +0000 https://futureys.tokyo/?p=2592 この講座ではPC に直接プログラムの動作環境をセットアップする作業を省くためにVisual Studio Code の必要最低限の基礎知識を習得します。 PC に直接プログラムの動作環境をセットアップすることは非効率的で […]

The post リモートで開発するための Visual Studio Code 講座 目次 first appeared on ultra code.

]]>
リモートで開発するための Visual Studio Code 講座

この講座ではPC に直接プログラムの動作環境をセットアップする作業を省くために
Visual Studio Code の必要最低限の基礎知識を習得します。

PC に直接プログラムの動作環境をセットアップすることは非効率的です。

  • うまく動かないときに相談するのが大変
  • 最終的に動作させたい実行環境で意図した通り動かない
  • アプリケーション / ライブラリーが管理しきれなくなる

参考: プログラム開発の準備には仮想環境を使おう

Visual Studio Code を使うと、これらの課題から解放されます。

Visual Studio Code を使うと、どんなことが便利なの?

※ 既に Visual Studio Code を習得するつもりの人は読み飛ばして構いません

Visual Studio Code を使う習慣をつけよう

PC に言語をインストールせずにプログラム開発しよう

この時点で Docker の基礎知識が必要になります
Docker について必要最小限の知識を次の講座で習得できます:

実用から入る Docker 講座 目次

もっと Visual Studio Code を活用したい人のために

本編は以上で完了しました。
ここから先は、より Visual Studio Code を活用するための解説です。

The post リモートで開発するための Visual Studio Code 講座 目次 first appeared on ultra code.

]]>
実用から入る Docker 講座 目次 https://futureys.tokyo/table-of-contents-docker-lesson-start-from-practical-use/ Wed, 07 Oct 2020 10:53:25 +0000 https://futureys.tokyo/?p=2594 この Docker 講座は、最初は Docker の細かい解説はできる限り省略して便利な ブラウザアプリのローカル起動やプログラム開発など、Docker を活用することから入る、即効性・実用性重視の講座です。 ひとつの記 […]

The post 実用から入る Docker 講座 目次 first appeared on ultra code.

]]>
実用から入る Docker 講座

この Docker 講座は、最初は Docker の細かい解説はできる限り省略して
便利な ブラウザアプリのローカル起動やプログラム開発など、
Docker を活用することから入る、即効性・実用性重視の講座です。

ひとつの記事を確認するだけでもすぐに開発に役立つ知見が手に入るでしょう。
最後まで終えると、PC にプログラム言語をインストールしなくても
プログラム開発ができるようになり、開発環境の管理の煩わしさから開放されます。

Docker を開発に使うと、どんなことが便利なの?

※ 既に Docker を習得するつもりの人は読み飛ばして構いません

Docker をセットアップ

Docker を使って開発しよう

この時点まですすめると、変更履歴を管理したいテキストファイルが増えてきます。
後で、ファイルのどの部分をいつ編集したかわからなくならないよう、
Git が未習得の場合は、ここまですすんだ時点で Git を習得することをお奨めします。
Git についての基礎知識を次の講座で習得できます:

Linux 知識の要らない Git 講座 目次

The post 実用から入る Docker 講座 目次 first appeared on ultra code.

]]>
【Docker】【Visual Studio Code】 PC に言語をインストールせずにプログラム開発しよう https://futureys.tokyo/lets-develop-program-without-installing-language-by-docker-and-vscode/ Tue, 06 Oct 2020 03:14:46 +0000 https://futureys.tokyo/?p=2735 この記事では、Docker Desktop と Visual Studio Code を使ってPC にプログラム言語などをインストールせずにプログラム開発を行う方法を説明します。プログラムを PC に直接インストールしな […]

The post 【Docker】【Visual Studio Code】 PC に言語をインストールせずにプログラム開発しよう first appeared on ultra code.

]]>
この記事では、Docker Desktop と Visual Studio Code を使って
PC にプログラム言語などをインストールせずに
プログラム開発を行う方法を説明します。
プログラムを PC に直接インストールしない利点については
次の記事を参照してください。

リモートで開発するための Visual Studio Code 講座 目次にもどる
実用から入る Docker 講座 目次に戻る

エディターのオートコンプリート、デバッグ、リンティングはできるの?

Docker と Visual Studio Code を組み合わせる
Remote Development 拡張機能を使うことで、
PC にプログラム言語やパッケージをインストールしなくても
次のようなことができるようになります:

  • オートコンプリート
  • デバッグ
  • リンティング

仕組みは後ほど解説します。

Remote Development 拡張機能の登場以前は、
たとえ仮想環境を導入していても
PC 側のエディターでこれらの実行を行うために、
PC にもプログラム言語やパッケージをインストールする必要がありました。

Remote Development 拡張機能の登場で、
Docker コンテナー内のプログラム言語のインタプリターを
これらの実行に使えるようになり、
PC にプログラミング言語をインストール必要がなくなりました。

システム要件

次のリンクのシステム要件を満たしていることを確認します:
System requirements | Developing inside a Container using Visual Studio Code Remote Development

Docker Desktop と Visual Studio Code をセットアップしよう

PC に次をインストールします:

Docker Desktop については、インストール後に
続いて説明するファイル共有などの設定も確認します。

タスクバーの Docker アイコンを右クリック
→ [Settings] (Windows の場合) または [Preferences] (Mac の場合)をクリック

Windows で WSL2を使用している場合

[General] で、[Use the WSL 2 based engine] にチェックが入っていることと、
[Resources] → [WSL INTEGRATION] で
いずれかのディストリビューションが有効になっていることを確認します。

[General] で、[Use the WSL 2 based engine] にチェックが入っていること
[General] で、[Use the WSL 2 based engine] にチェックが入っていること
いずれかのディストリビューションが有効になっていること
いずれかのディストリビューションが有効になっていること

Windows 且つ WSL 以外の場合

[Resources] → [File Sharing] を開き、
ソースコードを配置しているドライブにチェックが入っていることを確認します。

ソースコードを配置しているドライブにチェックが入っていること
ソースコードを配置しているドライブにチェックが入っていること

Docker コンテナー内のフォルダーを Visual Studio Code で開いてみよう

1. Compose ファイルを準備しよう

まず、開発環境の基本となる Compose ファイルを準備します。
すでにプロジェクトで Docker Compose を使っていれば、
既存の Compose ファイルを使うこともできます。
ここでは例として、Python の開発環境を準備する場合を取り上げます。
最小の Compose ファイルの例を示します:

version: "3.8"
services:
  python:
    image: python
    working_dir: /workspace

このとき、なるべく次を満たすようにします:

  • コンテナーの作業ディレクトリーが /workspace でないときは
    “working_dir” で /workspace を指定します
    • Visual Studio Code でコンテナーを起動すると、
      初期設定ではプロジェクトのフォルダーが /workspace に bind mount されるため
  • “command” に初期化処理がある場合は “entrypoint” に退避します
    • VS Code でコンテナーを起動するとき、既定の設定では別の “command” が上書き設定されるため

また、この例では “image” で python の Docker 公式イメージを指定しています。
他の言語の場合は別のイメージを指定します。
イメージは次の URL から検索することができます。

Explore – Docker Hub

2. 開発コンテナー設定ファイルを追加しよう

Remote Development 拡張機能をインストールしていると、
Visual Studio Code の画面左下に新しいステータスバーの項目が表示されます。
(リモートクィックアクセス)
この項目をクリックすると、Remote-Containers のコマンド一覧が表示されるので、
[Remote-Containers: Add Development Container Configuration Files…] をクリックします。

[Remote-Containers: Add Development Container Configuration Files...]
[Remote-Containers: Add Development Container Configuration Files…]

すると、どのように設定を作成するかを尋ねるメニューが表示されるので、
[From ‘docker-compose.yml’] を選択します:

[From 'docker-compose.yml'] を選択します
[From ‘docker-compose.yml’] を選択します

すると、.devcontainer というフォルダーが作成され、
その中に devcontainer.json と docker-compose.yml が作成されます:

devcontainer.json と docker-compose.yml が作成されます
devcontainer.json と docker-compose.yml が作成されます

このトレーニングでは、どちらのファイルも初期設定のままで問題ありませんので
全体の理解のために、まずは次の手順に進むことをおすすめします。

それぞれのファイルの役割をまとめておきますので、
確認が必要になった場合にこちらを見返してみてください。

devcontainer.jsonコンテナー開発を行うときの
Visual Studio Code の動作に関する設定を
行うためのファイルです。
.devcontainer/docker-compose.ymlコンテナー開発のために
Visual Studio Code が Docker Compose を実行するときのみ
追加で設定する項目を定義するためのファイルです。

3. コンテナー内で Visual Studio Code を起動しよう

開発コンテナー設定ファイルを追加した状態で、
もう一度 Visual Studio Code の画面左下の [リモートクィックアクセス] をクリックし
Remote-Containers のコマンド一覧が表示します。

すると、今度は
[Remote-Containers: Reopen in Container] が表示されるので、
こちらをクリックします。

[Remote-Containers: Reopen in Container] をクリック
[Remote-Containers: Reopen in Container] をクリック

すると、Visual Studio Code のウィンドウが開き直され、
コンテナーの構築が開始されます:

Visual Studio Code のウィンドウが開き直され、 コンテナーの構築が開始されます
Visual Studio Code のウィンドウが開き直され、 コンテナーの構築が開始されます

初回は少し時間がかかりますが、次回以降はすぐに開けるようになります。

また、Docker Desktop の Dashboard を確認すると、
Visual Studio Code が起動したコンテナーが表示されています:

Visual Studio Code が起動したコンテナー
Visual Studio Code が起動したコンテナー

Visual Studio Code の進捗バーのダイアログが消えたら、
プロジェクトのフォルダー内のファイルが
Visual Studio Code のサイドバーに表示されます。

プログラムを開発してみよう

ターミナルを開いてみましょう。
[Terminal] → [New Terminal]

[Terminal] → [New Terminal]
[Terminal] → [New Terminal]

すると、パネルが開き、ターミナルが表示されます:

コンテナーのシェルに接続されたターミナル
コンテナーのシェルに接続されたターミナル

先程の Compose ファイルを準備する段階で
“working_dir” で /workspace を指定するなどして
作業ディレクトリーを /workspace にしておくと、
ターミナルからも、すぐにプロジェクトのファイルにアクセスできて便利です:

$ pwd
/workspace
$ ls -la
total 16
drwxr-xr-x 3 root root 4096 Oct  5 04:52 .
drwxr-xr-x 1 root root 4096 Oct  5 05:54 ..
drwxr-xr-x 2 root root 4096 Oct  5 04:52 .devcontainer
-rw-r--r-- 1 root root   81 Oct  5 04:19 docker-compose.yml

このターミナルはコンテナーのシェルに接続されています。
この例は Python の開発環境なので、たとえば Python を実行してみましょう:

$ python --version
Python 3.8.6
$ python
Python 3.8.6 (default, Sep 24 2020, 21:45:12) 
[GCC 8.3.0] on linux
Type "help", "copyright", "credits" or "license" for more information.
>>> print("Hello World!")
Hello World!
>>> exit()
$ 

PC にプログラムをインストールせずにプログラム言語を実行することに成功しました!

続いて、ソースコードを作成してみましょう。
サイドバーで test.py という新規ファイルを作成します:

print("Hello World!")

では、実行してみましょう:

$ python test.py
Hello World!

PC にプログラムをインストールせずにプログラムの開発に成功しました!

オートコンプリート、デバッグ、リンティングはどうするの?

このままではオートコンプリート、デバッグ、リンティングなどができません。
Visual Studio Code では、特定のプログラム言語に関する機能は
拡張機能をインストールする必要があります。

注意すべき点として、この、コンテナー内で開発を行う方式の場合は
ほとんどの拡張機能はコンテナー側にインストールする必要があります。

なぜなら、実際にコードを編集しているのは
PC 側の Visual Studio Code ではなく、
コンテナー内にインストールされ起動している
「Visual Studio Code のサーバー」だからです。

Visual Studio Code Developing inside a Container の構成 (公式 DOC より引用)
Visual Studio Code Developing inside a Container の構成 (公式 DOC より引用)

そのため、既に PC 側の Visual Studio Code に拡張機能をインストールしている場合でも、
改めて拡張機能をコンテナー側にインストールし直す必要があります。

それでは、拡張機能をインストールしてみましょう。
Visual Studio Code をコンテナー内で開き直していれば、
拡張機能のインストール方法は通常時と同じです。

アクティビティーバーの拡張機能アイコンをクリックして
キーワードで検索します。
今回の例では、”python” で検索するとよいでしょう。
拡張機能のリストが表示されたら、項目をクリックすると
拡張機能の詳細ページが表示され、詳細を確認できます。
インストールする場合は、[Install] ボタンをクリックします。
既に PC 側にインストールされている場合は、
[Install] ボタンの代わりに
[Install in Dev Container: Existing Docker Compose …] ボタンが表示されます。

拡張機能のインストール
拡張機能のインストール

この例では、Microsoft が提供している Python 拡張機能をインストールしています。

インストールが完了すると、
[Install] ボタンが [Reload Required] ボタンに変わることがあります。
拡張機能を有効化するためには、[Reload Required] ボタンをクリックして
Visual Studio Code を開き直します。

[Reload Required] ボタンをクリックして Visual Studio Code を開き直します
[Reload Required] ボタンをクリックして Visual Studio Code を開き直します

Visual Studio Code が開き直されたら、
エディターで Python ファイルを開き、コードを入力してみましょう。
例えば、”i” と入力すると、次のようにオートコンプリートが表示されます:

エディターで Python ファイルを開き、コードを入力してみましょう
エディターで Python ファイルを開き、コードを入力してみましょう

このように、プログラム言語毎に必要な拡張機能をインストールすることで
オートコンプリート、デバッグ、リンティングなどができるようになります。

ただし、コンテナーを削除してしまうと、
もう一度拡張機能をインストールし直す必要があります。
これを避けるために、拡張機能を開発コンテナー設定ファイルに登録して
拡張機能のインストールを自動化しましょう。

拡張機能のインストールを自動化しよう

.devcontainer.json を開くと、次のような記述があります:

{
    //---
    // Add the IDs of extensions you want installed when the container is created.
    "extensions": []
    //---
}

この “extensions” に拡張機能の ID を追加すると、
コンテナー起動時に自動的に対象の拡張機能がインストールされるようになります。

拡張機能の ID は次の場所に記載されています:

拡張機能の ID
拡張機能の ID

例えば、Microsoft が提供している Python 拡張機能の場合は
次のように記述します:

{
    //---
    // Add the IDs of extensions you want installed when the container is created.
    "extensions": [
        "ms-python.python"
    ]
    //---
}

また、Visual Studio Code を開発コンテナーではなくローカルで開いているときは
拡張機能の項目を右クリック → [Add to devcontainer.json] で
追加することもできます。

拡張機能の項目を右クリック → [Add to devcontainer.json]
拡張機能の項目を右クリック → [Add to devcontainer.json]

2020-10-06 現在、
この追加方法は Visual Studio Code をコンテナー内で開いているときは
動作しないようです。

参考: Developing inside a Container using Visual Studio Code Remote Development

リモートで開発するための Visual Studio Code 講座 目次にもどる
実用から入る Docker 講座 目次に戻る

The post 【Docker】【Visual Studio Code】 PC に言語をインストールせずにプログラム開発しよう first appeared on ultra code.

]]>
docker-compose.yml の内容を理解しよう https://futureys.tokyo/lets-understand-contents-of-docker-compose-yml/ Sat, 01 Aug 2020 11:09:02 +0000 https://futureys.tokyo/?p=2683 この記事では docker-compose.yml の最も基本的な内容について解説します。この記事の内容を理解すると、従来、アプリケーション開発のための環境構築に必要だった時間と労力を大幅に削減することができるようになり […]

The post docker-compose.yml の内容を理解しよう first appeared on ultra code.

]]>
この記事では docker-compose.yml の最も基本的な内容について解説します。
この記事の内容を理解すると、
従来、アプリケーション開発のための環境構築に必要だった時間と労力を
大幅に削減することができるようになります。

サンプルとして、
前回の Docker Desktop のトレーニング記事でコンテナーを実行するのに使った
docker-compose.yml を取り上げます。
前回のトレーニングは 10 分程度なので、より効率よく理解するために
先に前回の記事の内容を体験してみることをお奨めします。

Docker Desktop で 開発用 Web アプリを起動してみよう

docker-compose.yml は YAML 形式で記述されています。
ここでは Docker に関する解説を行っていきますので、
YAML の文法自体の解説については、次の記事を参照してください。

最低限押さえておきたい YAML の読みかた・書きかた

実用から入る Docker 講座 目次に戻る

docker-compose.yml のサンプル

まず、前回の Docker Desktop のトレーニング記事で使った docker-compose.yml
コメントで注釈を追加したものをお見せします:

version: "3.8"  # この「Compose ファイルの書式のバージョン」
services:       # 「サービス」を定義する項目
  web:            # "web" という名前で「サービス」を定義
    image: adminer  # "adminer" の「イメージ」を使用
    ports:          # ホストの「ポート番号」とコンテナーの「ポート番号」を対応付けを定義します
      - 8080:8080     # ホストの「ポート番号」 8080 とコンテナーの「ポート番号」 8080 を対応付けます
  db:             # "db" という名前で「サービス」を定義
    image: mysql    # "mysql" の「イメージ」を使用
    environment:    # コンテナーに「環境変数」を設定します
      # ↓ "MYSQL_ROOT_PASSWORD" という「環境変数」に "example" という値を設定します
      MYSQL_ROOT_PASSWORD: example

ここで、次の用語が出てきました:

  • サービス
  • イメージ
  • ポート番号
  • 環境変数
  • Compose ファイルの書式のバージョン

これらを順に解説していきます。

サービスとは

「サービス」は、起動するコンテナーの設定の定義です。

先ほどの docker-compose.yml では
serviceswebdb が定義されています:

version: "3.8"
services:       # 「サービス」を定義する項目
  web:            # "web" という名前で「サービス」を定義
    image: adminer
    ports:
      - 8080:8080
  db:             # "db" という名前で「サービス」を定義
    image: mysql
    environment:
      MYSQL_ROOT_PASSWORD: example

docker-compose up コマンドでは、特に指定しなければ
各サービスからコンテナーを 1 つずつ起動しますが、
複数のコンテナーを起動することもできます。

例えば、
次のコマンドを実行すると、db サービスのコンテナーを 2 つ起動することができます:

docker-compose up -d --scale db=2

実行結果は次のようになります:

db サービスのコンテナーが 2 つ起動します
db サービスのコンテナーが 2 つ起動します

イメージとは

イメージは Docker のコンテナーのもととなるものです。
この例では web のサービスでは adminer というイメージを、
db のサービスでは mysql というイメージを指定しています。

version: "3.8"
services:
  web:
    image: adminer  # "adminer" の「イメージ」を使用
    ports:
      - 8080:8080
  db:
    image: mysql    # "mysql" の「イメージ」を使用
    environment:
      MYSQL_ROOT_PASSWORD: example

これらのイメージの情報や使い方は
Docker Hub という Web サイトで確認することができます。

adminer: adminer – Docker Hub
mysql: mysql – Docker Hub

他にも、様々なイメージが公開されており、
このような公開されているイメージを組み合わせて
従来、アプリケーション開発のための環境構築に必要だった時間と労力を
大幅に削減することができるようになります。

公開されているイメージは次のページで検索することができます:

Explore – Docker Hub

ポート番号とは

ポート番号の意味については、次のページの解説を確認してください:

ポート番号ってなに?

docker-compose.ymlports では、
ホストのポート番号とコンテナーのポート番号を対応付けることができます。
例では、ホストのポート番号 8080 とコンテナーのポート番号 8080 を対応付けています:

version: "3.8"
services:
  web:
    image: adminer
    ports:          # ホストの「ポート番号」とコンテナーの「ポート番号」を対応付けを定義します
      - 8080:8080     # ホストの「ポート番号」 8080 とコンテナーの「ポート番号」 8080 を対応付けます
  db:
    image: mysql
    environment:
      MYSQL_ROOT_PASSWORD: example

このようにすることで、ホスト、つまり PC 自身のポート番号 8080 に通信を行うと
対応付けたコンテナーのポート番号 8080 に通信を行うことができるようになります。

ブラウザーからコンピューター自身の特定のポート番号にリクエストする方法

前回の Docker Desktop のトレーニング記事
Dashboard の [CONTAINERS] の [OPEN IN BROWSER] からブラウザーを開いたとき
URL は次のようになっていました:

localhost:8080

“localhost” はコンピューター自身と通信したい場合に利用する特別なアドレスです。

HTTP 通信で 80 以外のポート番号に通信するときは
ドメインの後にコロン (:) を置き、その後に使用するポート番号を続けます。

http://localhost:8080

上記のURLを使用すると、ブラウザはポート番号 80 ではなく、
ポート番号 8080 で接続を待ち受けている Web サービスに接続しようとします。

なぜポート番号 8080 を使うの?

“localhost” を利用した場合、通信内容はネットワークには流れません。
暗号化された https 通信を可能にするためには準備の手順が難解になるので
PC の中で開発を行うときは
暗号化されない代わりに準備が簡単な http 通信で行われることが多いようです。

一般的に http 通信はポート番号 80 が使われますが、
アプリケーション開発などで特定のポート番号を待ち受けるときは
ポート番号 1~1023 の利用を避けてポート番号を選択することが多いです。
(理由は後で解説します。)

8080 がよく利用される理由は、
「8080 は「2 つの 80」であることであるため」(わかりやすさ、憶えやすさ)
とされています。

参考: GRC | Port Authority, for Internet Port 8080

ポート番号 1~1023 の利用を避けてポート番号を選択する理由

これは、インターネットが生まれたときのシステムとサーバーの多くが
主に「UNIX」という OS を基にしていたことに起因しています。

UNIX は、1 ~ 1023 のポート番号については、
管理者権限で実行されているサービスだけが開くことができます。

つまり、 UNIX では管理者権限を持ったユーザーだけが
ポート番号 80 で Web サービスを提供できることになります。

そのため、ポート番号 1024 未満でサービスを実行する権限がない場合、
Web サービスを提供するのに便利なポート番号として 8080 が選択されるようになりました。

参考: GRC | Port Authority, for Internet Port 8080

環境変数とは

環境変数とは、
コンピュータ上で実行される処理がどのように振る舞うかに
影響をあたえることができる変数で、名前と値で定義されます。

service のキーとして設定する場合は、
ホストに対してではなく、起動するコンテナーに対して設定されます:

version: "3.8"
services:
  web:
    image: adminer
    ports:
      - 8080:8080
  db:
    image: mysql
    environment:    # コンテナーに「環境変数」を設定します
      # ↓ "MYSQL_ROOT_PASSWORD" という「環境変数」に "example" という値を設定します
      MYSQL_ROOT_PASSWORD: example

この場合は “MYSQL_ROOT_PASSWORD” という名前で “example” という値を設定しています。

環境変数がどのような影響を与えるかは、イメージ次第ですが、
主要なイメージはドキュメントを確認すると環境変数について解説されています。

前回の Docker Desktop のトレーニング記事
Adminer からパスワード: “example” でログインしたので
大体想像がついていると思いますが、
MySQL のイメージのドキュメントを確認してみましょう。

mysql – Docker Hub

[How to use this image] の [Environment Variables] を参照すると
次のような記述があります。

MYSQL_ROOT_PASSWORD
This variable is mandatory and specifies the password
that will be set for the MySQL root superuser account.

mysql – Docker Hub

これは、日本語訳で、大体次のような意味です。

この変数は必須であり、
MySQL root 特権ユーザーアカウントに設定されるパスワードを指定します。

Compose ファイルの書式のバージョンとは

「Compose ファイル」ってなに?

docker-compose.yml のように、
サービスなど定義する YAML ファイルのことを「Compose ファイル」と呼びます。

Compose ファイルは、
Docker Desktop に含まれる Docker Compose というアプリケーションによって解釈され、
Docker Compose が、複数のコンテナーの Docker アプリケーションを実行する仕組みになっています。

Compose ファイルのバージョンってなに?

Compose ファイルの中で
最新の記法でサポートされなくなった記法を引き続き使うための機能です。

Compose ファイルでは、Docker Compose の開発が進むにつれて
新しい定義の記法が行えるようになったり、
古い定義の記法がサポートされなくなったりしています。

先ほどの docker-compose.yml では、
2020-07-30 時点で最新の書式バージョンである 3.8 を指定しています:

version: "3.8"  # この「Compose ファイルの書式のバージョン」
services:
  web:
    image: adminer
    ports:
      - 8080:8080
  db:
    image: mysql
    environment:
      MYSQL_ROOT_PASSWORD: example

Compose ファイルのバージョンはどうして必要なの?

Docker Desktop のバージョンアップを行ったときに
古い記法がサポートされなくなったことが原因で
今まで使えていた Compose ファイルが突然使えなくなると困ります。

そのようなことにならないよう、
Docker Compose では過去の Compose ファイルの書式がサポートされ続けています。

version で過去のバージョンを指定することで、
その Compose ファイルは最新バージョンではサポートされなくなった記法を
引き続き使うことができます。

マイナーバージョンを省略しちゃダメ!

よく Docker を利用した解説記事で次のような定義を目にします:

"version": "3"

この定義はバージョン 3 の最新ではなく、 "3.0" として扱われます
その結果、3.1 以降のバージョンで追加された機能はサポートされなくなります。

参考:
v2 and v3 Declaration | Compose file versions and upgrading | Docker Documentation
Version 3 | Compose file versions and upgrading | Docker Documentation

When specifying the Compose file version to use, make sure to specify both the major and minor numbers.

v2 and v3 Declaration | Compose file versions and upgrading | Docker Documentation

Compose ファイルのバージョンを指定するときは、
メジャー番号とマイナー番号の両方を指定していることを確認してください。

わからない記法を調べるときは

わからない記法を調べるときは、
次のページ内をブラウザーの検索機能で検索すると良いでしょう:

Compose file version 3 reference | Docker Documentation

実用から入る Docker 講座 目次に戻る

The post docker-compose.yml の内容を理解しよう first appeared on ultra code.

]]>
Docker Desktop で 開発用 Web アプリを起動してみよう https://futureys.tokyo/lets-run-the-web-application-for-development-by-docker-desktop-and-access-it-by-browser/ Sat, 01 Aug 2020 06:33:22 +0000 https://futureys.tokyo/?p=2631 この記事では、できる限りコマンドラインを使わずDocker で Web アプリケーションを起動して、Docker の基本的な利用法を理解していきます。 この 10 分程度のトレーニングを終えれば、もう開発のためにデータベ […]

The post Docker Desktop で 開発用 Web アプリを起動してみよう first appeared on ultra code.

]]>
この記事では、できる限りコマンドラインを使わず
Docker で Web アプリケーションを起動して、
Docker の基本的な利用法を理解していきます。

この 10 分程度のトレーニングを終えれば、
もう開発のためにデータベース・アプリケーションをインストールする必要はありません。

実用から入る Docker 講座 目次に戻る

Docker Desktop Dashboard を開いてみよう

Docker を操作したとき、何が起きるかわかりやすいように
Docker Desktop の Dashboard を開いておきましょう。

常駐している Docker Desktop のアイコンを右クリック → [Dashboard] をクリック:

常駐している Docker Desktop のアイコンを右クリック → [Dashboard] をクリック
常駐している Docker Desktop のアイコンを右クリック → [Dashboard] をクリック

すると、次のようなウィンドウが開きます:

Docker Desktop Dashboard
Docker Desktop Dashboard

Docker を使って Web アプリを起動してみよう

いきなりですが、Docker で Web アプリケーションを動かします。

“test-docker” というフォルダーを新規作成し、
“docker-compose.yml” というファイルを新規作成し、次の内容を記述します:

version: "3.8"
services:
  web:
    image: adminer
    ports:
      - 8080:8080
  db:
    image: mysql
    environment:
      MYSQL_ROOT_PASSWORD: example

このファイルの内容については次の記事で解説しますが、
効率的に理解するために、まずこのトレーニングをすすめることをお奨めします。

そして、ファイルを作成したフォルダーでターミナルを開き、次のコマンドを実行します:

docker-compose up -d

すると、次のような出力が表示されます:

Creating network "test-docker_default" with the default driver
Pulling web (adminer:)...
latest: Pulling from library/adminer
df20fa9351a1: Pull complete
b358d6dbbdff: Pull complete
0232d962484c: Pull complete
0c1d3ac04d2a: Pull complete
b4e4f852df7e: Pull complete
6a973c07b1a7: Pull complete
81925cc0eeeb: Pull complete
4fce6c58c125: Pull complete
56d61120c3e2: Pull complete
81694e37d7e8: Pull complete
63580de12c3c: Pull complete
5483478c2601: Pull complete
d75c0834e7af: Pull complete
b3b3fdd9c555: Pull complete
50a9fb45e1ec: Pull complete
Digest: sha256:dc0bb811b48d861c4e08f7d52db98b51768243a2a3f656edf698a8a9a3bc4dc4
Status: Downloaded newer image for adminer:latest
Pulling db (mysql:)...
latest: Pulling from library/mysql
6ec8c9369e08: Pull complete
177e5de89054: Pull complete
ab6ccb86eb40: Pull complete
e1ee78841235: Pull complete
09cd86ccee56: Pull complete
78bea0594a44: Pull complete
caf5f529ae89: Pull complete
cf0fc09f046d: Pull complete
4ccd5b05a8f6: Pull complete
76d29d8de5d4: Pull complete
8077a91f5d16: Pull complete
922753e827ec: Pull complete
Digest: sha256:fb6a6a26111ba75f9e8487db639bc5721d4431beba4cd668a4e922b8f8b14acc
Status: Downloaded newer image for mysql:latest
Creating test-docker_web_1 ... done
Creating test-docker_db_1  ... done

Dashboard を確認すると、”test-docker” という行が表示されていますので、
行の中心あたりにマウスのカーソルを合わせクリックします:

行の中心あたりにマウスのカーソルを合わせクリック
行の中心あたりにマウスのカーソルを合わせクリック

すると、ログが表示され、左側に [CONTAINERS] という項目が表示されます:

ログが表示され、左側に [CONTAINERS] という項目が表示されます
ログが表示され、左側に [CONTAINERS] という項目が表示されます

ログに次の内容が表示されるまで待ちます:

db_1 | 2020-07-28T08:41:11.017766Z 0 [System] [MY-010931] [Server] /usr/sbin/mysqld: ready for connections. Version: '8.0.21' socket: '/var/run/mysqld/mysqld.sock' port: 3306 MySQL Community Server - GPL.

上記のログは 「MySQL」というデータベース・アプリケーションが起動したことを示しています。

確認してみましょう。
[CONTAINERS] 欄の “test-docker_web_1” という行にマウスのカーソルを合わせると
アイコンがいくつか表示されるので、
一番左の [OPEN IN BROWSER] をクリックします:

一番左の [OPEN IN BROWSER] をクリック
一番左の [OPEN IN BROWSER] をクリック

ブラウザーで Web ページが表示されましたか?:

Adminer ログイン画面
Adminer ログイン画面

Dashboardを確認すると、次のようなログが表示されています:

Attaching to test-docker_web_1
 [36mweb_1  | [0m [Tue Jul 28 05:05:06 2020] [::ffff:172.21.0.1]:49264 Accepted
 [36mweb_1  | [0m [Tue Jul 28 05:05:06 2020] [::ffff:172.21.0.1]:49262 Accepted
 [36mweb_1  | [0m [Tue Jul 28 05:05:07 2020] [::ffff:172.21.0.1]:49264 [200]: GET /
 [36mweb_1  | [0m [Tue Jul 28 05:05:07 2020] [::ffff:172.21.0.1]:49264 Closing

URL にアクセスしたので、レスポンスを返す処理が行われていることがわかります。

この Web アプリケーションは Adminer という無料の Web アプリケーションで、
ブラウザー越しにデータベースの管理をすることができます。

Adminer – Database management in a single PHP file

データベースにログインしてみましょう。
ブラウザーに表示されているログインフォームに次のように入力して [ログイン] ボタンをクリックします:

入力項目入力内容
[データベース種類]“MySQL”
[サーバ]db
[ユーザ名]“root”
[パスワード]“example”
[データベース]未入力

ログインすると、MySQL のデータベースの一覧が表示されます:

ログインすると、MySQL のデータベースの一覧が表示されます
ログインすると、MySQL のデータベースの一覧が表示されます

ファイルを 1 つ用意してコマンドを 1 つ実行するだけで
web アプリケーションとデータベース・アプリケーションを起動することができました。

用語を覚えよう

コンテナー

Dashboard の [CONTAINERS] に表示された各行を「コンテナー」と言います。
コンテナーは Docker によって構築される仮想環境です。

ホスト

Docker の話題の中では、「コンテナー」との対比として
「Docker を動かしているコンピューター自体」のことを「ホスト」といいます。
Docker Desktop を使っているときは、今使っている PC がホストです。

コンテナーを止めたり動かしたりしてみよう

今、ブラウザーではコンテナーのデータベースアプリケーションにログインしていますが、
それを確認するために、
データベースのコンテナーを止めてブラウザを再読み込みしてみましょう。

Dashboard からコンテナーを止めることができます。
“test-docker_db_1” にマウスのカーソルを合わせると表示されるアイコンの内、
[STOP] をクリックします:

[STOP] をクリックします
[STOP] をクリックします

※ “test-docker_web_1” と間違えないように気をつけましょう。

すると、コンテナーがグレーになり、”EXITED (0)” と表示されます。

コンテナーがグレーになり、"EXITED (0)" と表示されます
コンテナーがグレーになり、”EXITED (0)” と表示されます

この状態でブラウザーを再読み込みします。
すると、エラーメッセージが表示され、ログイン画面まで戻されてしまいます:

エラーメッセージが表示され、ログイン画面まで戻されてしまいます
エラーメッセージが表示され、ログイン画面まで戻されてしまいます

では、もう一度動かしてみましょう。
Dashboard で “test-docker_db_1” にマウスのカーソルを合わせると表示されるアイコンの内、
[SRART] をクリックします:

[SRART] をクリックします
[SRART] をクリックします

すると、再びコンテナーがグリーンになり、”RUNNING” と表示されます:

再びコンテナーがグリーンになり、"RUNNING" と表示されます
再びコンテナーがグリーンになり、”RUNNING” と表示されます

ブラウザのログインフォームで再度ログインすると
再び MySQL のデータベースの一覧が表示されます:

ログインすると、MySQL のデータベースの一覧が表示されます
ログインすると、MySQL のデータベースの一覧が表示されます

では、コンテナーを一度に停止してみましょう。
Dashboard 上部のフォルダー名が表示されている部分の右側にあるアイコンの内、
[STOP] をクリックします:

Dashboard 上部のフォルダー名が表示されている部分の右側にあるアイコンの内、 [STOP] をクリックします
Dashboard 上部のフォルダー名が表示されている部分の右側にあるアイコンの内、 [STOP] をクリックします

すると、すべてのコンテナーがグレーになり、”EXITED (0)” と表示されます:

すべてのコンテナーがグレーになり、"EXITED (0)" と表示されます
すべてのコンテナーがグレーになり、”EXITED (0)” と表示されます

この状態でブラウザーを再読み込みすると、
「このサイトにアクセスできません」と表示されます:

「このサイトにアクセスできません」
「このサイトにアクセスできません」

先ほどの [STOP] のすぐ左に [START] があることからわかる通り、
すぐにコンテナーを起動することができ、
データベースのデータも保持され続けます。

コンテナーを停止していると、Dashboard に表示され続けます。
もう利用せず、データベースのデータも必要ない場合は
削除した方が Dashboard の見渡しが良くなります。

では、コンテナーをすべて削除してみましょう。
[STOP] のすぐ右にある [DELETE] をクリックします:

[STOP] のすぐ右にある [DELETE] をクリック
[STOP] のすぐ右にある [DELETE] をクリック

すると、コンテナーはすべて削除され、
ディレクトリーが表示されている行も Dashboard からなくなります:

Docker Desktop Dashboard
Docker Desktop Dashboard

この場合は、
また “docker-compose up -d” コマンドでコンテナーを起動することができますが、
データベースのデータは引き継がれず、新たに初期化されます。

この時点では、実はまだデータベースのデータは失われていませんが、
この時点からデータの回収を行うのは面倒なので
バックアップはコンテナーを削除する前に行うようにしましょう。

アプリケーション開発ではデータを保存する必要はあまりないので、
これだけで十分に役立ってくれることでしょう。

Docker の Dashboard についてさっと確認しました。
次は最初に作成した docker-compose.yml の内容について見てみましょう:

docker-compose.yml の内容を理解しよう

実用から入る Docker 講座 目次に戻る

The post Docker Desktop で 開発用 Web アプリを起動してみよう first appeared on ultra code.

]]>
ポート番号ってなに? https://futureys.tokyo/what-is-port-number/ Fri, 31 Jul 2020 11:15:40 +0000 https://futureys.tokyo/?p=2616 この記事では、Web アプリケーション開発の話題の中でよく登場する「ポート番号」という言葉の概要を解説します。執筆にあたって書籍「マスタリングTCP/IP 入門編(第6版)」の内容より事実やアイデアをまとめ直して構成して […]

The post ポート番号ってなに? first appeared on ultra code.

]]>
この記事では、Web アプリケーション開発の話題の中でよく登場する
「ポート番号」という言葉の概要を解説します。
執筆にあたって
書籍「マスタリングTCP/IP 入門編(第6版)」の内容より
事実やアイデアをまとめ直して構成しています。

参考: マスタリングTCP/IP 入門編(第6版) | Ohmsha

物理的な機器の外部インターフェースの「ポート」とは別の概念です!

PC やルーターなど、コンピューター機器の外部インターフェースのことも
「ポート」と言いますが、
ここでの「ポート番号」とは、それとは全く別の概念を指しています。
明確に区別するために、この記事では「ポート番号」と表現します。

ポート番号とは

ポート番号とは、
通信を行っている同一のコンピューター内のプログラムを識別するときに利用される番号です。

同一のコンピューターの中でも複数のプログラムが通信を行うことがあります。
例えば、同一のサーバーで次のような通信を同時に待ち受けることもできます:

通信利用すべきポート番号
Web ページを閲覧するためなどの https リクエスト443
メールの送信手続き587

ポート番号がなかったらどうなるの?

もし、ポート番号がなければ
同時に待ち受けているどちらのプログラムに通信のデータを渡すべきなのか
判断するのが非常に困難になります。

この状態を郵便配達にたとえると、
封筒に記載された宛先が住所だけで、誰宛かの記載がないのと同じ状態です。

封筒のイメージ

封筒を受け取った人は、封筒を誰に渡すべきかを判断するために
封筒を開けて内容などの確認をしなければならなくなります。
大量に通信する上で、このようなことがあっては非効率的です。

ポート番号はどうやって決まるの?

通信方式ごとに利用すべきポート番号が定められています。

これを定めているのは
「IETF」という、誰でも参加可能なインターネット標準化団体です。

IETF | Internet Engineering Task Force

広く使われるポート番号は「well-known ports」と呼ばれ、
次の Web サイトで確認することができます:

Service Name and Transport Protocol Port Number Registry

少なくとも一般に公開するサービス等でこれらのポート番号を別の用途に使うのは
混乱を招く可能性があるため行わないほうが無難です。

ポート番号を意識しなくていいように標準のポート番号を使おう

普段私たちが生活している中ではポート番号を意識しなくても
Web サービスを利用したりメールを送信することができます。

例えば ブラウザーは特に指定しない限り、 URL を入力すると
ドメインが指し示すサーバーのポート番号 443 へ通信します。

メール送信も同様に、メールのアプリケーションは特に指定しない限り
メール送信時にはメール送信サーバーのポート番号 587 への通信を行います。

ポート番号を意識しなくても Web サービスを利用したりメールを送信することができます
ポート番号を意識しなくても Web サービスを利用したりメールを送信することができます

もしサーバー側が別のポート番号で通信を待ち受けている場合、
ユーザーにサービスを提供するためには
ブラウザーやアプリケーションに対して特殊な設定を行ってもらうことになってしまいます。

サービスを開発するときは
「well-known ports」の標準を守ってポート番号を使うようにすると
ユーザーはポート番号を意識する必要がなくなり、サービスを提供しやすくなります。

The post ポート番号ってなに? first appeared on ultra code.

]]>
最低限押さえておきたい YAML の読みかた・書きかた https://futureys.tokyo/knowledge-about-reading-and-writing-yaml-which-must-check-at-least/ Thu, 30 Jul 2020 18:31:30 +0000 https://futureys.tokyo/?p=2596 YAML について、最初にこの記事の内容さえ押さえておけば、後は使いながら、わからないことを都度調べて勉強していけば大丈夫でしょう。これから YAML を使い始めるのに最低限必要な内容に絞って解説します。 YAML とは […]

The post 最低限押さえておきたい YAML の読みかた・書きかた first appeared on ultra code.

]]>
YAML について、最初にこの記事の内容さえ押さえておけば、
後は使いながら、わからないことを都度調べて勉強していけば大丈夫でしょう。
これから YAML を使い始めるのに最低限必要な内容に絞って解説します。

YAML とは

YAML とは何らかのデータを表すための記法で、
データ同士の関連性をシンプルに表現できます。

「キー」と「値」

YAML の表現の中で、次の形式の表現をよく見ることになります:

(値の意味を識別する情報): (値)

この、(値の意味を識別する情報) のことは
一般的に「キー」とか「属性」と呼ばれます。
以降は「キー」と表現します。

(キー): (値)

具体例を見てみましょう。
次のデータを YAML 形式で表現することを考えてみます:

キー
place東京
weather晴れ

これは、次のように表せます:

place: 東京
weather: 晴れ

複数の値を定義したいとき(シーケンス)

例えば、次のようなデータを YAML 形式で表現することを考えてみます:

キー
place東京
weather晴れ
park新宿御苑、お台場海浜公園、代々木公園、南池袋公園

複数の値を表現したい場合は、
次のように表してしまうと、データとしては 1 つの文字列になっていまいます:

place: 東京
weather: 晴れ
# ↓ ひとつの文字列になってしまいます
park: 新宿御苑、お台場海浜公園、代々木公園、南池袋公園

次のように、改行して各値に “- ” を付けて表すと、複数の値として表現できます:

place: 東京
weather: 晴れ
park:
  - 新宿御苑
  - お台場海浜公園
  - 代々木公園
  - 南池袋公園

または、次のように “[]” と “,” を使っても同じ内容を表現できます:

place: 東京
weather: 晴れ
park: [新宿御苑, お台場海浜公園, 代々木公園, 南池袋公園]

このような表現方法を 「シーケンス」 と言います。

値をさらにキーと値で定義したいとき(マッピング)

例えば、次のようなデータを YAML 形式で表現することを考えてみます:

キー
place東京
weathertoday晴れ
tomorrowくもり

このように 1 つのキーに、さらにキーと値を定義したい場合は
次のように字下げを行うと、キーの値として、キーと値の組み合わせを定義できます:

place: 東京
weather:
  today: 晴れ
  tomorrow: くもり

このような表現方法を 「マッピング」 と言います。

シーケンスのマッピング

例えば、次のような 3 つのデータを一度に扱いたいときのことを考えます:

キー
place東京
weather晴れ
キー
place愛知
weatherくもり
キー
place大阪
weather

このとき、次のように同じキーを何度も定義することはできません:

# 同じキーを何度も定義するのは不正な記法です
place: 東京
weather: 晴れ
place: 愛知
weather: くもり
place: 大阪
weather: 雨

次のように、各データの最初のキーの前の行に “-” を置き、
各マッピングを字下げして定義します:

- 
  place: 東京
  weather: 晴れ
- 
  place: 愛知
  weather: くもり
- 
  place: 大阪
  weather: 雨

上記のように定義すると、「シーケンスのマッピング」として定義したことになり、
3 つのマッピングのデータを一度に扱うことができます。

参考: 2.1. Collections | YAML Ain’t Markup Language (YAML™) Version 1.2

行を節約するために、
次のように、各マッピングの最初のキーの前に “- ” を置いても同じ内容を表現できます:

- place: 東京
  weather: 晴れ
- place: 愛知
  weather: くもり
- place: 大阪
  weather: 雨

参考: 配列とハッシュのネスト | プログラマーのための YAML 入門 (初級編)

わからない記法が出てきたら

例えば次のようなサイトが参考になります:

プログラマーのための YAML 入門 (初級編)

YAML を書くときは Visual Studio Code を使おう

Visual Studio Code に
Red Hat さんが公開している YAML 拡張機能をインストールすると、
書式の誤りをいち早く検出して指摘してくれるので生産性が向上します。

RED HAT YAML 拡張機能のインストール
RED HAT YAML 拡張機能のインストール
Visual Studio Code 上での YAML の文法チェック
Visual Studio Code 上での YAML の文法チェック

The post 最低限押さえておきたい YAML の読みかた・書きかた first appeared on ultra code.

]]>