使用Remote-Container extension打造vscode+remote container開發(fā)環(huán)境

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)的容器菇用。


vscode中的Debian環(huán)境

下面這張圖是在這個(gè)環(huán)境下進(jìn)行debug澜驮,可以看到是在容器中而不是本地環(huán)境下debug

直接在docker container中進(jìn)行make 和debug

以上插圖是在MacOS下截圖,在win 環(huán)境下是一樣的惋鸥。

2. 在既定的docker-compose.yml下構(gòu)造container
PHP 構(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é)果
Browser 和 vscode 畫面
  • 在以上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":/var/www/html php:7.2-apache 此處的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

  1. 更通用的方式著榴,使用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
參考:
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 等多余步驟珊泳。
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市拷沸,隨后出現(xiàn)的幾起案子色查,更是在濱河造成了極大的恐慌,老刑警劉巖撞芍,帶你破解...
    沈念sama閱讀 217,826評(píng)論 6 506
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件秧了,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡序无,警方通過(guò)查閱死者的電腦和手機(jī)验毡,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,968評(píng)論 3 395
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)帝嗡,“玉大人晶通,你說(shuō)我怎么就攤上這事∮寸瑁” “怎么了狮辽?”我有些...
    開封第一講書人閱讀 164,234評(píng)論 0 354
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我喉脖,道長(zhǎng)椰苟,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,562評(píng)論 1 293
  • 正文 為了忘掉前任树叽,我火速辦了婚禮尊剔,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘菱皆。我一直安慰自己须误,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,611評(píng)論 6 392
  • 文/花漫 我一把揭開白布仇轻。 她就那樣靜靜地躺著京痢,像睡著了一般。 火紅的嫁衣襯著肌膚如雪篷店。 梳的紋絲不亂的頭發(fā)上祭椰,一...
    開封第一講書人閱讀 51,482評(píng)論 1 302
  • 那天,我揣著相機(jī)與錄音疲陕,去河邊找鬼木羹。 笑死,一個(gè)胖子當(dāng)著我的面吹牛航瞭,可吹牛的內(nèi)容都是我干的袋倔。 我是一名探鬼主播,決...
    沈念sama閱讀 40,271評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼诅岩,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼讳苦!你這毒婦竟也來(lái)了?” 一聲冷哼從身側(cè)響起吩谦,我...
    開封第一講書人閱讀 39,166評(píng)論 0 276
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤鸳谜,失蹤者是張志新(化名)和其女友劉穎,沒(méi)想到半個(gè)月后式廷,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體咐扭,經(jīng)...
    沈念sama閱讀 45,608評(píng)論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,814評(píng)論 3 336
  • 正文 我和宋清朗相戀三年滑废,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了蝗肪。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 39,926評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡策严,死狀恐怖穗慕,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情妻导,我是刑警寧澤逛绵,帶...
    沈念sama閱讀 35,644評(píng)論 5 346
  • 正文 年R本政府宣布怀各,位于F島的核電站,受9級(jí)特大地震影響术浪,放射性物質(zhì)發(fā)生泄漏瓢对。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,249評(píng)論 3 329
  • 文/蒙蒙 一胰苏、第九天 我趴在偏房一處隱蔽的房頂上張望硕蛹。 院中可真熱鬧,春花似錦硕并、人聲如沸法焰。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,866評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)埃仪。三九已至,卻和暖如春陕赃,著一層夾襖步出監(jiān)牢的瞬間卵蛉,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,991評(píng)論 1 269
  • 我被黑心中介騙來(lái)泰國(guó)打工么库, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留傻丝,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 48,063評(píng)論 3 370
  • 正文 我出身青樓诉儒,卻偏偏與公主長(zhǎng)得像葡缰,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子允睹,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,871評(píng)論 2 354

推薦閱讀更多精彩內(nèi)容