1. 程式人生 > >如何利用 Docker 搭建網站的開發環境

如何利用 Docker 搭建網站的開發環境

準備工作

在前面的章節,我們已經介紹瞭如何在 Windows 中安裝 Docker,並介紹了一些常用的命令。

下面我們將具體介紹,如何使用 Docker 來搭建網站的開發環境。

我們以 ThinkPHP 5.1 為例,介紹如何在 Windows 中利用 docker 搭建 tp5 專案的開發環境。

  • nginx 1.13.7
  • php 7.1.12(php-fpm)
  • mysql 5.7.22
  • redis 4.0.9

建立 docker-compose.yml 檔案

在 Windows 的使用者家目錄(C:\Users\HP,簡寫為 ~)中,建立一個資料夾 docker_data ,並在 ~/docker_data 中建立 docker-compose.yml 檔案。

內容如下:

version: '3.6'

services:
  web:
    image: richarvey/nginx-php-fpm:latest
    restart: always
    container_name: dr-web
    ports:
      - "80:80"
      - "9000:9000"
    networks:
      - dockerinnernet
    depends_on:
      - mysql
      - redis
    volumes:
      - ~/docker_data/wwwroot:/var/www/html

  mysql:
    image: mysql:5.7.22
    restart: always
    container_name: dr-mysql
    ports:
      - 3306
:3306
networks: - dockerinnernet volumes: - mydata:/var/lib/mysql - ~/docker_data/dbdump:/root environment: - MYSQL_ROOT_PASSWORD=123456 - MYSQL_DATABASE=test_db redis: image: redis container_name: dr-redis ports: - "6379:6379" networks: - dockerinnernet
volumes: - ~/docker_data/redis:/data networks: dockerinnernet: volumes: mydata:

在上述程式碼中,我用的 nginx-php-fpm 映象,它同時包含 nginx 和 php-fpm。你也可以分別單獨拉取映象。

啟動容器

首先,我們需要執行 docker。點選桌面的快捷方式 Docker Quickstart Terminal,這樣,Linux 虛擬機器和 docker 就都啟動了。

在開啟的終端中,輸入如下命令:

# 切換到家目錄下的 docker_data 目錄中
$ cd  ~/docker_data

# 以後臺方式啟動容器
$ docker-compose up -d

上述命令,會根據 docker-compose.yml 配置檔案,自動從遠端倉庫拉取映象,並建立和執行對應的容器例項。

如果看到下面的列印資訊:

...
Creating dr-redis ... done
Creating dr-mysql ... done
Creating dr-web   ... done

就說明容器啟動成功了。

檢視本地所有的映象

$ docker images
REPOSITORY                TAG                 IMAGE ID            CREATED             SIZE
mysql                     5.7.22              0164c13b662c        2 days ago          372MB
redis                     latest              c5355f8853e4        3 weeks ago         107MB
richarvey/nginx-php-fpm   latest              cea38a28b888        4 months ago        281MB

檢視正在執行的容器

$ docker ps
CONTAINER ID        IMAGE                            COMMAND                  CREATED             STATUS              PORTS                                                 NAMES
94168b153bcf        richarvey/nginx-php-fpm:latest   "docker-php-entrypoi…"   47 seconds ago      Up 48 seconds       0.0.0.0:80->80/tcp, 0.0.0.0:9000->9000/tcp, 443/tcp   dr-web
326d294a80c1        mysql:5.7.22                     "docker-entrypoint.s…"   47 seconds ago      Up 49 seconds       0.0.0.0:3306->3306/tcp                                dr-mysql
6ce9fae6c1a2        redis                            "docker-entrypoint.s…"   47 seconds ago      Up 49 seconds       0.0.0.0:6379->6379/tcp                                dr-redis

檢視虛擬機器列表

$ docker-machine ls
NAME      ACTIVE   DRIVER       STATE     URL                         SWARM   DOCKER        ERRORS
default   *        virtualbox   Running   tcp://192.168.99.100:2376           v18.04.0-ce

這樣,我們就知道了 Linux 虛擬機器的 IP 地址為 192.168.99.100。

在 Windows 的瀏覽器中訪問http://192.168.99.100/,得到的結果是 403 Forbidden 。這是因為網站根目錄中還沒有任何檔案。

現在,我們在 Windows 系統的 C:\Users\HP\docker_data\wwwroot 目錄中,新建 phpinfo.php 檔案,程式碼如下:

<?php

phpinfo();

由於,我們之前做了 web 伺服器根目錄的對映

volumes:
      - ~/docker_data/wwwroot:/var/www/html

所以, ~/docker_data/wwwroot 目錄中只要發生了變更,就會自動同步到 docker 服務的 dr-web 容器例項的 /var/www/html 目錄中。

注意:這個目錄的對映是基於容器的,你只能在進入容器後,才能看到對應的檔案,Linux 虛擬機器很可能沒有 /var/www/html 目錄。還需記住,目錄的對映是雙向的。

我們可以用下面的命令從 Windows 的終端,進入容器。

$ docker exec -it dr-web /bin/bash
bash-4.3#

這裡我用的是容器的名稱,也可以用容器的 ID 。

進入 dr-web 容器後,命令提示符變為 bash-4.3#,表示我們可以在該容器的 bash shell 中執行 Linux 的命令。

我們來驗證一下該容器的 /var/www/html 目錄中是否自動就有了 phpinfo.php 檔案。

bash-4.3# ls -a /var/www/html
.            ..           phpinfo.php

驗證結果確如我們所料。

為了讓我們在 Windows 系統中,就可以更改 nginx 程序的配置檔案。我們也可以在 docker-compose.yml 檔案中,新增對應的目錄對映。

由於,我們現在還不知道容器中的 nginx 配置檔案存放在哪裡,以及格式如何。因此,我們可以先看下 dr-web 容器中的 nginx 配置。

bash-4.3# ls -al /etc/nginx
total 92
drwxr-xr-x    9 root     root          4096 Dec  2 18:48 .
drwxr-xr-x   37 root     root          4096 Apr 22 14:14 ..
drwxr-xr-x    2 root     root          4096 Dec  2 18:39 conf.d
-rw-r--r--    1 root     root          1077 Dec  2 18:39 fastcgi.conf
-rw-r--r--    1 root     root          1077 Dec  2 18:39 fastcgi.conf.default
-rw-r--r--    1 root     root          1007 Dec  2 18:39 fastcgi_params
-rw-r--r--    1 root     root          1007 Dec  2 18:39 fastcgi_params.default
-rw-r--r--    1 root     root          2837 Dec  2 18:39 koi-utf
-rw-r--r--    1 root     root          2223 Dec  2 18:39 koi-win
-rw-r--r--    1 root     root          5170 Dec  2 18:39 mime.types
-rw-r--r--    1 root     root          5170 Dec  2 18:39 mime.types.default
lrwxrwxrwx    1 root     root            27 Dec  2 18:39 modules -> ../../usr/lib/nginx/modules
-rw-r--r--    1 root     root           774 Dec  2 18:29 nginx.conf
-rw-r--r--    1 root     root          2656 Dec  2 18:39 nginx.conf.default
-rw-r--r--    1 root     root           636 Dec  2 18:39 scgi_params
-rw-r--r--    1 root     root           636 Dec  2 18:39 scgi_params.default
drwxr-xr-x    2 root     root          4096 Dec  2 18:48 sites-available
drwxr-xr-x    2 root     root          4096 Dec  2 18:48 sites-enabled
drwxr-xr-x    2 root     root          4096 Dec  2 18:48 ssl
-rw-r--r--    1 root     root           664 Dec  2 18:39 uwsgi_params
-rw-r--r--    1 root     root           664 Dec  2 18:39 uwsgi_params.default
-rw-r--r--    1 root     root          3610 Dec  2 18:39 win-utf

通過仔細觀察 /etc/nginx/nginx.conf 配置檔案,裡面有用到軟連結,最終的虛擬主機配置檔案在 /etc/nginx/sites-available 目錄中。

我們需要將其從容器拷貝到 Windows 系統中。

先輸入 exit 命令,退出容器的 shell,從而回到 Windows 的終端。

然後,進行拷貝:

HP@LAPTOP-ND0NRET5 MINGW64 ~/docker_data
$ docker cp dr-web:/etc/nginx/sites-available ./nginx

這樣,dr-web 容器的 /etc/nginx/sites-available 目錄中的內容,就被拷貝到了 Windows 的 C:\Users\HP\docker_data\nginx 目錄中。

然後,我們修改 docker-compose.yml 檔案,在 web 服務程式碼塊的 volumes 修改為:

volumes:
      - ~/docker_data/wwwroot:/var/www/html
      - ~/docker_data/nginx:/etc/nginx/sites-available

然後,修改 ~/docker_data/nginx 目錄中的 default.conf 配置檔案,再新增一個虛擬主機 server ,用來訪問 tp5 專案。

server {
	listen   80; 

	root /var/www/html/tp5/public;
	index index.php index.html index.htm;

	server_name tp5.test;
	
	# Disable sendfile as per https://docs.vagrantup.com/v2/synced-folders/virtualbox.html
	sendfile off;

	# Add stdout logging
	error_log /dev/stdout info;
	access_log /dev/stdout;

	location / {
		# First attempt to serve request as file, then
		# as directory, then fall back to index.html
		try_files $uri $uri/ =404;
	}

	error_page 404 /404.html;
        location = /404.html {
                root /var/www/errors;
                internal;
        }

        location ^~ /ngd-style.css {
            alias /var/www/errors/style.css;
            access_log off;
        }

        location ^~ /ngd-sad.svg {
            alias /var/www/errors/sad.svg;
            access_log off;
        }

	location ~ \.php$ {
                try_files $uri =404;
		fastcgi_split_path_info ^(.+\.php)(/.+)$;
		fastcgi_pass unix:/var/run/php-fpm.sock;
		fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
    		fastcgi_param SCRIPT_NAME $fastcgi_script_name;
		fastcgi_index index.php;
		include fastcgi_params;
	}

    location ~* \.(jpg|jpeg|gif|png|css|js|ico|webp|tiff|ttf|svg)$ {
            expires           5d;
    }

	# deny access to . files, for security
	#
	location ~ /\. {
    		log_not_found off; 
    		deny all;
	}
        
	location ^~ /.well-known {
                allow all;
                auth_basic off;
     }

}

由於我們修改了 docker-compose.yml ,所以我們必須刪除之前的容器,然後建立新的容器例項。

刪除容器之前,需要先關閉容器。

# 關閉容器
$ docker-compose stop
Stopping dr-web   ... done
Stopping dr-redis ... done
Stopping dr-mysql ... done

再來刪除已經關閉的容器。

# 刪除容器,需要輸入 y 確認刪除
$ docker-compose rm

然後,重新建立容器。

$ docker-compose up -d

由於,在網站根目錄中,還沒有 tp5 的專案原始碼,為此,我們需要安裝 tp5。

前面說過,目錄的對映是雙向的,我們可以在 Windows 中的 C:\Users\HP\docker_data\wwwroot 目錄中安裝 tp5,也可以在 dr-web 容器的 /var/www/html 目錄中進行安裝。

由於 Linux 虛擬機器中還沒有安裝 composer,而我的 Windows 中安裝了 composer,所以我選擇在 Windows 中使用 composer 來安裝 tp5。

# 切換到 ~/docker_data/wwwroot 目錄中
$ cd /c/Users/HP/docker_data/wwwroot

# 執行安裝
$ composer create-project topthink/think tp5  --prefer-dist

如果訪問http://tp5.test/,瀏覽器會提示:找不到 tp5.test 的伺服器 IP 地址。

這是因為,我們還沒有修改 Windows 的 hosts 檔案。

現在,我們編輯 C:\Windows\System32\drivers\etc\hosts 檔案,在檔案的最後加上一行程式碼:

192.168.99.100  tp5.test

到此,我們就利用 Docker ,完全搭建好了一個 tp5 專案的開發環境。

docker-compose 是一個非常常用的工具,它還有一些其他的命令和選項,具體可參考它的幫助命令。

$ docker-compose help