使用Remote-Container extension打造vscode+remote container开发环境

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":/var/www/html php:7.2-apache 此处的PWD替换成当前的local directory

  • 在vscode中使用 Remote-Container: Reopen in the container 命令重新打开,图上可以看到VSCode的terminal 已经切换到container中,这时候修改index.php, 再reload网页便看到实时反映了修改。

此处要注意的是上文中的命令,一定要把当前的工作目录mount到container 中才能访问brower,否则会出现access deny 403的error

  1. 更通用的方式,使用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 等多余步骤。
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,193评论 6 498
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,306评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 162,130评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,110评论 1 292
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,118评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,085评论 1 295
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,007评论 3 417
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,844评论 0 273
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,283评论 1 310
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,508评论 2 332
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,667评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,395评论 5 343
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,985评论 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,630评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,797评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,653评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,553评论 2 352

推荐阅读更多精彩内容