vscode和docker连用,打造独立于local OS 环境的开发环境。
1. 直接建立container 环境(最简单的方式)
如果你的PC是windows环境,而你需要在Linux环境下进行编译开发
可以使用remote container extension 打造独立的环境。
原理参看官方文档:https://code.visualstudio.com/docs/remote/containers
方法:
安装remote container extention
在panel 下选择C++sample 代码之后,vscode 会自动下载对应的容器。
下面这张图是在这个环境下进行debug,可以看到是在容器中而不是本地环境下debug
以上插图是在MacOS下截图,在win 环境下是一样的。
2. 在既定的docker-compose.yml下构造container
- 写docker-compose.yml, 指定image
- remote-Containers: Reopen in container
- 如果提示安装extension 就安装一下,PHP是安装docker.extension
- 安装后reload(这一步可能没有?)
- 完成之后打开一个terminal,就在container的环境下了
- 这时候左边的menu会显示mount, worksdir等信息(如果没有指定就是缺省的)
- 在docker-compose.yml 下自己写一个php
- terminal环境下可以看到直接编译显示结果。
3. 构建Docker容器之后,再在VScode中重新打开,同时在Browser上直接看到结果
- 在以上Dockerfile 下创建的容器,使用以下命令:
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替换成当前的local directory
- 在vscode中使用 Remote-Container: Reopen in the container 命令重新打开,图上可以看到VSCode的terminal 已经切换到container中,这时候修改index.php, 再reload网页便看到实时反映了修改。
此处要注意的是上文中的命令,一定要把当前的工作目录mount到container 中才能访问brower,否则会出现access deny 403的error
-
更通用的方式,使用docker-compose.yml 和 Dockerfile 共用的方式
- docker-compose.yml 内容如下:
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 内容如下:
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重新打开
参考:
- 参考视频
- 经常用到的几个命令
docker stop $(docker ps -a -q) //停止所有的容器
docker container prune // 删除所有已经停止的容器
docker rmi -f $(docker images -a -q) //删除所有容器镜像
sourcecode: https://github.com/xieheng0915/php2DockerDev.git
附注:
- 以上1和2都只实现了container和VScode的联动,但没有解决Browser同步更新的问题,3和4比较实用,尤其是4,是接近实际项目的配置方法。
- 原理上讲,实际上容器的build和启动都是通过dockerfile,docker-compose.yml file实现,而这个插件是实现了vscode和已经运行的容器之间的连接。
总结:
微软的这个remote-container extension是个屌炸天的东西,投入了不少资金开发,目前也是免费提供,非常好。
好处如下:
- 可以打造独立于local OS的环境,比如win下面使用linux的环境
- Browser联动,废除了以前使用SFTP往container上上传文件的方法,非常便利
- 以前SFTP的方式是不能直接从local到container上删除文件,必须要进入container一个个删除,现在就实时同步,并且vscode的terminal中直接就转入container,而不需要docker exec 等多余步骤。