当ブログ人気記事!
転職体験談
Laravelで学ぶWebアプリ開発
誰でも作れるチャットアプリ
未経験への勧め

【Docker】Nginx画像サーバーコンテナを作成する

プログラミング

Dockerで画像サーバーコンテナ立てたい!

という悩みを解決する記事です。


この記事を書いている私(@Shoot58153748)は、
2020年3月現在メガベンチャーの社内スタートアップの部署で
エンジニア(1年目)をしており、

プログラミング未経験からメガベンチャーへの転職を成功させた経験・ノウハウ
Webエンジニアになってから学んだこと

をブログにまとめています。


タイトルの通り、
本記事を完璧に真似ればDockerでローカルに画像サーバーを立てることができます


実際の業務では、
アプリ内に出てくる画像は全て画像専用のサーバーから取得していると思うので、

ローカルでも似たような環境を作れたらベターのはず!


今回の学びポイントは以下の通りです。
是非参考にしてください!

今回のポイント

  • Dockerコンテナの構築方法
  • Nginxイメージ
スポンサーリンク

画像サーバーの仕組み

画像サーバーと呼んでいますが、
つまりはWebサーバー(リクエストに対して、レスポンスを返すサーバー)
です。

静的コンテンツに特化した用途なため「画像サーバー」と呼んでいます。

今回は「Nginx」というWebサーバーを用います。


NginxはApacheと異なり非同期で処理してくれるので、性能に優れています。

今からWebサーバーを使う(または学ぶ)なら
Nginxを使わない理由はないぐらい、Apacheの完全上位互換です。

Nginxはロードバランサーやプロキシー、Webサーバーなど他にも様々な用途があるのですが、
ここでは静的コンテンツを返す画像置き場として使います。

画像サーバー作成手順

作業の流れ

以下の順にやっていきます!

  • 表示したい画像をディレクトリに格納
  • Dockerfileを作成
  • ビルド
  • ブラウザで画像にアクセス

ディレクトリ構造

表示したい画像をディレクトリに格納

mkdir -p docker/nginx-image-server/ && cd docker/nginx-image-server/
mkdir avater-image
cp ~/Downloads/webengineer-startup-risk.png ./avater-image/
vi Dockerfile

nginx-image-serverというディレクトリをプロジェクトディレクトリとし、

その下のavater-imageに表示したい画像を格納します。

(僕の場合は、先日書いたブログのアイキャッチ画像webengineer-startup-risk.pngを格納)

そして、viでDockerfileを新規作成

Dockerfileを作成

以下の内容をコピーしてそのまま保存してください

FROM nginx
RUN mkdir /usr/share/nginx/html/avater-image
COPY ./avater-image /usr/share/nginx/html/avater-image

nginxによる静的画像サーバを作りたいので、
nginxのイメージを用います。

nginxはデフォルトで/usr/share/nginx/htmlにある静的ファイルを
レスポンスで返すようになっているので、

COPYは(ローカルのディレクトリ)から(コンテナ内のディレクトリ)にコピーすることができるコマンドです。

直下にavater-imageディレクトリ(表示したい画像が格納されている)をコピーしてあげます。

これだけで完成です!

ビルド&コンテナ起動

docker build -t avater-image-nginx .
docker run --name image-server-nginx -d -p 8080:80 avater-image-nginx

avater-image-nginxというタグを付与して、ビルド

すると先ほどのDockerfileの内容が反映されたイメージがローカルに作成されます。


あとはdocker runコマンドでコンテナを起動してあげます。
オプション指定:
-p ポート番号を指定(8080でアクセスできるように)
-d バックグラウンドで起動

画像サーバーにアクセス

以下のURLをブラウザで叩くと、、、

http://localhost:8080/avater-image/webengineer-startup-risk.png

表示されましたー!

まとめ

以上、Dockerでの画像サーバーコンテナ作成でした!


今回のポイントと成果物をまとめます。

ポイント

  • Dockerコンテナの構築方法
  • Nginxイメージ

作業の流れ

  • 表示したい画像をディレクトリに格納
  • Dockerfileを作成
  • ビルド
  • ブラウザで画像にアクセス


ローカルなのに本番に近い環境で開発が進められるのは
良いですよね!

Dockerはあらゆるものをコンテナ化できる技術なので
Webエンジニアなら是非とも詳しくなりたいトピックです。



それではまた!

プログラミング
スポンサーリンク
シェアする
SHOOTをフォローする
末っ子WebエンジニアSHOOTのブログ

コメント

タイトルとURLをコピーしました