投稿日: | 最終更新日:
VagrantのDockerにWebサーバを構築
Vagrantの中にDockerをインストールし、Webサーバーを構築します。
DockerでWebサーバーを構築するメリット
Dockerイメージを共有することで、すぐに動作確認できます。サーバエンドに限らず、フロントエンドの仕事で開発メンバーと同一の開発環境を持ちたいケースが多々ありますが、イチから環境構築は面倒臭すぎます。
メンバーで環境差が発生しにくい
Dockerfileと呼ばれる仮想環境をコード化したファイルを開発メンバーで共有すれば、簡単・短時間で同一の開発環境を構築できます。また、新規に開発メンバーが参加した場合にも簡単に同一環境の構築ができます。環境の差異がなければ、「◯◯さんの環境でのみエラーが発生する」という状況が発生しづらくなります。
準備
Vagrantでゲスト環境(仮想環境)を作ります。
①Virtualboxをインストールします。Virtualboxのインストールまでで結構です。
→VirtualBoxをインストールする for Ubuntu
②Vagrantをインストールします。centos7環境を作りますので、Vagrantのインストールのみ済ませてください。
→Vagrantをインストールしてテスト環境を作る for Ubuntu
Vagrantのcentos7環境の詳細を調べる場合は以下のように確認します。
→VagrantのCentOS7の環境を確認(lsb_releaseコマンドなど)
③Vagrantのcentos7にDockerをインストールします。
→VagrantのCentOS7にDockerをインストール
ホスト環境
OS | Ubuntu 16.04.1 LTS 64bit |
---|---|
Virtualbox | 5.1 |
Vagrant | 1.9.5 |
ゲスト環境
OS | CentOS 7.1.1503 |
---|---|
Docker | docker-ce.x86_64 17.06.2.ce-1.el7.centos |
Vagrantへログイン
①【ホスト環境】端末を開き、前回構築したVagrantのディレクトリまで移動します。
cd vagrant/django_apps/
②【ホスト環境】仮想マシンを起動します。
vagrant up
③【ホスト環境】ログインします。
vagrant ssh
DockerでWebサーバを構築
①作業が面倒なので、ルートでログインしておきます。
su -
もし、Dockerが自動起動しない場合は、いかのコマンドを入力します。
systemctl start docker systemctl enable docker
②Webサーバを構築します。
docker run –name webserver -d -p 8090:80 -v /vagrant/docker:/usr/share/nginx/html nginx:latest
・「/vagrant/docker」
ホスト(起動元のPC)の任意のディレクトリパスを指定します。vagrantを使用していますので、「/vagrant/docker」を指定します。
コマンドを実行後、ホストのブラウザから「http://(vagrantのIPアドレス):8090/」にアクセスするとWebサーバーが起動していることが確認できます。
「/vagrant/docker」にindex.htmlなどを作成し、ブラウザーからアクセスしてみてください。
このコマンドでは次の通りオプションを設定しています。
docker run --name [コンテナ名] -d -p [ホストのポート]:[コンテナのポート] -v [ホストのディレクトリーパス]:[マウント先のパス] [イメージ名]
docker run | Dockerイメージを元にコンテナを生成するコマンドです。このコマンドではnginxというDockerイメージの最新バージョン(latest)でコンテナを生成しています。ローカルにイメージがない場合はDockerHubから自動的に取得してくれます。 |
---|---|
–name | オプションです。コンテナに任意の名前を指定できます。省略した場合はランダムで名前が指定されます。 |
-d | オプションです。デタッチドモードとしてバックグラウンドで動作させることができます。また、-pオプションを指定することで、ホスト(起動元のPC)の8090ポートとコンテナの80ポートの対応付けが行われます。コンテナにポートフォワーディングでアクセスできるようになります。 |
-v | オプションです。ホスト(起動元のPC)のディレクトリをコンテナにマウントします。この設定を行うことで「/vagrant/docker」のディレクトリーがWebサーバーのサイトルートになります。このディレクトリにコンテンツを格納すれば、デプロイせずに最新のコンテンツがWebサーバーに反映されます。 |
Dockerの基本的な操作方法は以下のとおりです。
docker start [コンテナ名 or コンテナID] | コンテナを起動します。 |
---|---|
docker stop [コンテナ名 or コンテナID] | コンテナを停止します。 |
docker rm [コンテナ名 or コンテナID] | コンテナを削除します。 |
docker ps | 起動中のコンテナ一覧を表示します。 |
docker ps -a | 停止中のコンテナも含めたすべてのコンテナ一覧を表示します。 |
③仮想環境のため、ファイヤーウォールを停止させておきます。
systemctl stop firewalld systemctl disable firewalld
④ホスト環境のブラウザから、以下のURLを入力します。ここではVagrantfileのp「rivate_network」の業で指定したのIPアドレスを利用します。
http://192.168.33.15:8090/
コンテナ内の設定ファイルを確認
①コンテナ内に入ります。
docker exec -it webserver /bin/bash
②設定ファイルを表示します。
default.confを表示します。
cat /etc/nginx/nginx.conf
user nginx; worker_processes 1; error_log /var/log/nginx/error.log warn; pid /var/run/nginx.pid; events { worker_connections 1024; } http { include /etc/nginx/mime.types; default_type application/octet-stream; log_format main '$remote_addr - $remote_user [$time_local] "$request" ' '$status $body_bytes_sent "$http_referer" ' '"$http_user_agent" "$http_x_forwarded_for"'; access_log /var/log/nginx/access.log main; sendfile on; #tcp_nopush on; keepalive_timeout 65; #gzip on; include /etc/nginx/conf.d/*.conf; }
default.confを表示します。
cat /etc/nginx/conf.d/default.conf
server { listen 80; server_name localhost; #charset koi8-r; #access_log /var/log/nginx/host.access.log main; location / { root /usr/share/nginx/html; index index.html index.htm; } #error_page 404 /404.html; # redirect server error pages to the static page /50x.html # error_page 500 502 503 504 /50x.html; location = /50x.html { root /usr/share/nginx/html; } # proxy the PHP scripts to Apache listening on 127.0.0.1:80 # #location ~ \.php$ { # proxy_pass http://127.0.0.1; #} # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000 # #location ~ \.php$ { # root html; # fastcgi_pass 127.0.0.1:9000; # fastcgi_index index.php; # fastcgi_param SCRIPT_FILENAME /scripts$fastcgi_script_name; # include fastcgi_params; #} # deny access to .htaccess files, if Apache's document root # concurs with nginx's one # #location ~ /\.ht { # deny all; #} }
③exitで抜けます。
exit
独自のページを表示
locationが「/usr/share/nginx/html」ということが確認できました。ホストPCの「/vagrant」に配置したhtmlをdockerのnginxに配置します。
①「/vagrant」に以下のようにディレクトリとファイルを作成します。
cd /vagrant mkdir workspace cd workspace touch Dockerfile mkdir html cd html touch index.html sample.html
以下のような構造になります。
- vagrant/
- workspace/
- Dockerfile
- html/
- index.html
- sample.html
②Dockerfileをを編集します。
cd ../ vi Dockerfile
以下の内容を記述します。
FROM nginx COPY ./html /usr/share/nginx/html
③sample.htmlの内容を編集します。
cd html vi sample.html
以下の内容を記述します。
<html> <body> <h1>hello!</h1> </body> </html>
④Dockerfileがあるディレクトリでイメージを作成します。
cd ../ docker build --tag simple-nginx .
以下のような実行結果が表示されます。
Sending build context to Docker daemon 4.096kB Step 1/2 : FROM nginx ---> 66216d141be6 Step 2/2 : COPY ./html /usr/share/nginx/html ---> f41ee2c2fa66 Removing intermediate container 625d2c78af2c Successfully built f41ee2c2fa66 Successfully tagged simple-nginx:latest
⑤イメージを確認します。
docker images -a simple-nginx REPOSITORY TAG IMAGE ID CREATED SIZE simple-nginx latest f41ee2c2fa66 26 seconds ago 108MB
⑥コンテナを起動します。
docker run -d --name simple-nginx-container -p 80:80 simple-nginx
⑦ホスト環境のブラウザから、以下のURLを入力します。
http://192.168.33.15/sample.html
ブラウザに「hello!」と表示されればOKです。
- Python 113
- 制作 54
- RaspberryPi 41
- Django 40
- WordPress 40
- Linux 27
- VPS 22
- JavaScript 21
- PHP 20
- HTML・CSS 19
- AWS 16
- 仮想環境 15
- レスポンシブデザイン 13
- マイコン 11
- WEB全般 11
- 動画製作 9
- Webサービス 8
- 統合開発環境 8
- PyCharm 7
- jQuery 7
- 機械学習 7
- AfterEffects 7
- 起業・設立 7
- Django REST framework 6
- C# 6
- デザイン 6
- SEO 6
- pydata 6
- Visual Studio 5
- 数学 5
- 携帯サイト 5
- heroku 5
- Mac 5
- illustrator 5
- node.js 5
- Anaconda 5
- Nginx 4
- Jupyter Notebook 4
- インフラ 4
- symfony 4
- Webスクレイピング 3
- photoshop 3
- Go言語 3
- PC 3
- Google Colaboratory 3
- ツール 3
- Docker 3
- facebook 3
- 作業効率化 3
- データベース 3
- Cloud9 3
- コマンド 2
- micro:bit 2
- Kali Linux 2
- Webサーバー 2
- MariaDB 2
- ドローン 2
- コンテナ 2
- DaVinci Resolve 2
- ネットワーク 2
- Java 2
- movie 2
- PCDJ 2
- 音楽 2
- XSERVER 2
- Ansible 1
- Vue.js 1
- JSON 1
- Bootstrap 1
- バージョン管理システム 1
- SSL 1
- S3 1
- ムームードメイン 1
- ネットワーク 1
- アニメーション 1
- D3.js 1
- Rhino 1
- アニメ 1
- git 1
- windows 1
- アクセス解析 1
- スマートフォン 1
- アフィリエイトノウハウ 1
- 知識 1
- TypeScript 1
- 役立つ本・書籍 1
- データサイエンス 1
- ESP32 1
- AI 1
- ownCloud 1
- API 1