# Docker コンテナ起動・終了
このポートフォリオ制作では、フロントエンドのみの作成のため、サーバーがなくても表示することはできます。
そのため、index.html ファイルをブラウザで開いて確認する方法で制作を進めても問題は発生しないと考えられます。
しかし、単純な構成のうちに Docker を使用し、使い方に慣れるために、このページでは Docker コンテナ上に Apache サーバーを構築し、ローカル開発環境を整える方法を紹介します。
# コンテナ起動
今回のプロジェクトは Apache サーバーがあれば十分のため docker run コマンド 1 つで環境を用意します。
プロジェクトルートで以下のコマンドを入力します。
$ docker run -dit --rm --name portfolio1 -v "$PWD/public":/usr/local/apache2/htdocs/ -p 3000:80 httpd:2.4-alpine
コマンドの一例
# 起動コマンドの説明
オプションが数多く設定されておりすべてを解説するのは難しいですが、簡単に説明します。 公式リファレンス (opens new window) もご確認ください。
| 引数 | 説明 |
|---|---|
| -d | デタッチドモードで起動します。コマンド実行後ターミナルが開放されます。 |
| -i | インタラクティブなプロセスを有効にします。これによりアタッチしていなくても、STDIN を開き続けます。つまり、起動し続けるということです。 |
| -t | コンテナのプロセスに対して tty を割り当てます。 よく -i と同時に指定します。 |
| -dit | -d -i -t をまとめて -dit と指定できます。 |
| -rm | コンテナ終了時にイメージを削除します。イメージを削除し忘れることを防ぎます。 |
| -name | コンテナ名を指定します。ここでは、 portfolio1 という名前を指定しています。 |
| -v | ボリュームを指定します。ここでは、 現在のディレクトリ + /public のディレクトリを コンテナ内の /usr/local/apache2/htdocs/ に バインドマウントしています。 |
| -p | ポートを割り当てます。 ここでは、コンテナ内 80 番で開放しているポートを 3000 番でアクセスできるように変換しています。 |
| httpd:2.4-alpine | Apache の公開イメージを指定しています。Docker Hub Image: httpd (opens new window) をご覧ください。 |
# アクセス
http://localhost:3000/ (opens new window) にアクセスします。
~~/public/index.html に何も書いていない場合、真っ白な画面が表示されれば正しい挙動です。
正しい
誤り
コマンドを入力する場所が正しいか確認してください。プロジェクトルートで起動する必要があります。
コンテナ自体は起動済みのため、一度 docker stop portfolio1 コマンドで終了する必要があります。
誤り
コンテナが起動していないか URL が間違っています。
# ファイルの更新
ファイルを更新して正しく反映されることを確認してみます。この真っ白な画面は、 ~~/public/index.html を表示しています。
このファイルに変更を加えてもう一度更新します。
Hello World と表示されていれば成功です。
# コンテナ終了
コンピュータをシャットダウンする際や、制作を終了する際は、コンテナを終了しておきます。
起動時に --rm オプションをしているためプロセスを抜けた際に自動的にコンテナは削除されますが、もし、起動されたままになってしまった場合は以下のコマンドでコンテナを停止できます。（停止すると --rm オプションの影響で自動的にコンテナが削除されます。）
起動時にコンテナに、portfolio1 という名前を指定しているため、この名前を使用してコンテナを停止（Stop）します。
$ docker stop portfolio1
なお、作成したファイルは削除されません。
コマンドの一例
http://localhost:3000/ にアクセスして、レスポンスがなければ、正常に終了できています。
# README を更新する
このコマンドは このプロジェクトに最適化されたコマンドです。
起動コマンドは忘れてしまうので、 将来の自分のために ~~/README.md に書いておきます。
.md はマークダウンです。特別な意味を持つ文字（# や ```）で記述すると見やすくなります。
以下のように書いておくとわかりやすいです。
# web-portfolio-yumi
このプロジェクトは、ポートフォリオのソースコードです。
## コンテナ起動
起動するときは以下のコマンドを入力します。
プロジェクトルートでコマンドを実行する必要があります。
```sh
# Start
$ docker run -dit --rm --name portfolio1 -v "$PWD/public":/usr/local/apache2/htdocs/ -p 3000:80 httpd:2.4-alpine
```
## アクセス
コンテナ起動中は、以下の URL にアクセスできます。
<http://localhost:3000/>
## コンテナ終了
制作終了時は以下のコマンドでコンテナを終了します。
（※ `docker run` コマンドで --rm を使用している場合は Ctrl + C でプロセスを終了すると、自動的にコンテナも削除されます。）
```sh
$ docker stop portfolio1
```
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
プロジェクトルートにある README.md は GitHub の Repository でプレビューされます。
マークダウンを正しく記述できていれば、以下のように タイトルやコードが整形されて表示されます。
マークダウンは Visual Studio Code でもプレビューできます。.md ファイルを開いているときに、右上のアイコンをクリックすると スプリット表示されます。
