vscode和docker連用撕予,打造獨(dú)立于local OS 環(huán)境的開發(fā)環(huán)境。
1. 直接建立container 環(huán)境(最簡(jiǎn)單的方式)
如果你的PC是windows環(huán)境做裙,而你需要在Linux環(huán)境下進(jìn)行編譯開發(fā)
可以使用remote container extension 打造獨(dú)立的環(huán)境岗憋。
原理參看官方文檔:https://code.visualstudio.com/docs/remote/containers
方法:
安裝remote container extention
在panel 下選擇C++sample 代碼之后,vscode 會(huì)自動(dòng)下載對(duì)應(yīng)的容器菇用。
下面這張圖是在這個(gè)環(huán)境下進(jìn)行debug澜驮,可以看到是在容器中而不是本地環(huán)境下debug
以上插圖是在MacOS下截圖,在win 環(huán)境下是一樣的惋鸥。
2. 在既定的docker-compose.yml下構(gòu)造container
- 寫docker-compose.yml, 指定image
- remote-Containers: Reopen in container
- 如果提示安裝extension 就安裝一下杂穷,PHP是安裝docker.extension
- 安裝后reload(這一步可能沒(méi)有?)
- 完成之后打開一個(gè)terminal,就在container的環(huán)境下了
- 這時(shí)候左邊的menu會(huì)顯示mount, worksdir等信息(如果沒(méi)有指定就是缺省的)
- 在docker-compose.yml 下自己寫一個(gè)php
- terminal環(huán)境下可以看到直接編譯顯示結(jié)果卦绣。
3. 構(gòu)建Docker容器之后耐量,再在VScode中重新打開,同時(shí)在Browser上直接看到結(jié)果
- 在以上Dockerfile 下創(chuàng)建的容器滤港,使用以下命令:
docker run -d -p 8082:80 --name my-apache-php-app -v /Users/xieheng/gitspace/tryDockerDev/php2DockerDev:/var/www/html php:7.2-apache
此命令的通用模式:docker run -d -p 80:80 --name my-apache-php-app -v "PWD替換成當(dāng)前的local directory
- 在vscode中使用 Remote-Container: Reopen in the container 命令重新打開廊蜒,圖上可以看到VSCode的terminal 已經(jīng)切換到container中趴拧,這時(shí)候修改index.php, 再reload網(wǎng)頁(yè)便看到實(shí)時(shí)反映了修改。
此處要注意的是上文中的命令,一定要把當(dāng)前的工作目錄mount到container 中才能訪問(wèn)brower山叮,否則會(huì)出現(xiàn)access deny 403的error
-
更通用的方式著榴,使用docker-compose.yml 和 Dockerfile 共用的方式
Browser和vscode remote container development
- docker-compose.yml 內(nèi)容如下:
version: '3.1'
services:
php:
build:
context: .
dockerfile: Dockerfile
ports:
- 8082:80
volumes:
- ./src:/var/www/html/
db:
image: mysql
command: --default-authentication-plugin=mysql_native_password
restart: always
environment:
MYSQL_ROOT_PASSWORD: example
adminer:
image: adminer
restart: always
ports:
- 8080:8080
- Dockerfile 內(nèi)容如下:
FROM php:7.4-apache
RUN docker-php-ext-install mysqli
- 在terminal 中使用以下命令
docker build - < Dockerfile //可省略而直接用以下的docker-compose命令
docker-compose up --build //要加上--build避免缺少的鏡像
-
在vscode 中使用Remote-Containers:reopen in the container重新打開
reopned in container
參考:
- 參考視頻
- 經(jīng)常用到的幾個(gè)命令
docker stop $(docker ps -a -q) //停止所有的容器
docker container prune // 刪除所有已經(jīng)停止的容器
docker rmi -f $(docker images -a -q) //刪除所有容器鏡像
sourcecode: https://github.com/xieheng0915/php2DockerDev.git
附注:
- 以上1和2都只實(shí)現(xiàn)了container和VScode的聯(lián)動(dòng),但沒(méi)有解決Browser同步更新的問(wèn)題屁倔,3和4比較實(shí)用脑又,尤其是4,是接近實(shí)際項(xiàng)目的配置方法锐借。
- 原理上講问麸,實(shí)際上容器的build和啟動(dòng)都是通過(guò)dockerfile,docker-compose.yml file實(shí)現(xiàn),而這個(gè)插件是實(shí)現(xiàn)了vscode和已經(jīng)運(yùn)行的容器之間的連接钞翔。
總結(jié):
微軟的這個(gè)remote-container extension是個(gè)屌炸天的東西严卖,投入了不少資金開發(fā),目前也是免費(fèi)提供布轿,非常好哮笆。
好處如下:
- 可以打造獨(dú)立于local OS的環(huán)境,比如win下面使用linux的環(huán)境
- Browser聯(lián)動(dòng)驮捍,廢除了以前使用SFTP往container上上傳文件的方法疟呐,非常便利
- 以前SFTP的方式是不能直接從local到container上刪除文件,必須要進(jìn)入container一個(gè)個(gè)刪除东且,現(xiàn)在就實(shí)時(shí)同步,并且vscode的terminal中直接就轉(zhuǎn)入container本讥,而不需要docker exec 等多余步驟珊泳。