使用Remote-Container extension打造vs

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 会自动下载对应的容器。

vscode中的Debian环境

下面这张图是在这个环境下进行debug，可以看到是在容器中而不是本地环境下debug

直接在docker container中进行make 和debug

以上插图是在MacOS下截图，在win 环境下是一样的。

2. 在既定的docker-compose.yml下构造container

PHP 构造自己的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上直接看到结果

Browser 和 vscode 画面

• 在以上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

4. 更通用的方式，使用docker-compose.yml 和 Dockerfile 共用的方式

   
   Browser和vscode remote container development

• 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重新打开

  
  reopned in 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 等多余步骤。