<div id="readability-page-1" class="page"><div>
                <div id="SE-2ca4a75d-1918-4b71-9313-d30f02a94b27">
                                    <p id="SE-6ca67b98-7a0f-481d-95d0-b6fa1fb0a0b7"><span id="SE-5d2fc281-28ce-418f-b275-2bf539b5df60">예전에는 도커를 생성(run) 할 때 host OS의 일부와 공유할 수 있는 폴더를 지정해 그곳에서만 코드를 편하곤 했다.</span></p><p id="SE-27d3bf5d-ecd4-4ab0-97d1-ec304625ce0b"><span id="SE-d72af852-2ebf-432b-b298-18f47d4911fd">그런데 지금부터 설명하는 "도커 컨테이너에 VSCode를 직접 연결" 방법도 유용한 것 같다. </span></p><p id="SE-563dbfdc-da24-4240-943e-18b323ff5d4b"><span id="SE-8068c714-0136-4d5c-bb26-e535173f1196">​</span></p><p id="SE-526f6524-9c1f-4767-8c18-d952a444891a"><span id="SE-5c4d8153-edfc-474e-bc19-96c9769a9df4"><b>준비물</b></span></p><ul><li><p id="SE-2ddd590b-c6da-4c2d-8643-10a3a42e23a0"><span id="SE-83914a7a-ea45-421d-b5cc-b538edd308b4">도커(Docker) + 도커 실행 가능 컨테이너(Container)</span></p></li><li><p id="SE-e546e6b0-24e4-46c9-aac2-c21d61c248ef"><span id="SE-08d6774c-4b5b-47ce-935e-3a86c5d0cb9d">VSCode</span></p></li></ul><p id="SE-97661841-8fff-41bc-ac22-1d8c64a46214"><span id="SE-70d46aef-b0aa-4275-aecb-dbf6b9115b0c">​</span></p><p id="SE-eb21c8b0-4464-4920-8816-586fd4c1597c"><span id="SE-11281b28-b481-4a19-bbcc-bef9e9ffcc2c">우선 해당 내용에는 도커와 VSCode가 설치되어 있고 실행(start) 가능한 컨테이너가 있다고 가정하고 진행된다.</span></p><p id="SE-126364a2-a54f-400f-bf04-61339e61538c"><span id="SE-87cacde5-a027-4aba-9ad4-da7d3d5f32f8">​</span></p><p id="SE-82ce6e1b-19a6-4097-a7c1-1401fdf68ffe"><span id="SE-4cced82c-0f3a-408e-826c-a3c1255525ab">​</span></p>
                            </div>                                <div id="SE-220a9bb5-2520-4bbf-b05b-58fa65e5c294">
                            <p id="SE-250a3187-4f47-4221-9543-24a3dbba0f96"><span id="SE-de389329-224f-45e5-bb9f-35c12b018481">아래와 같이 docker start를 이용해 VSCode와 연결할 컨테이너를 시작한다.</span></p>
                        </div>                <div id="SE-e41651b3-6533-4271-a140-6efc1dcfd20c">
                                    <p>$ docker start [컨테이너 명 혹은 ID]

# 컨테이너 명이 ros-melodic 이라면
$ docker start ros-melodic</p>
                                </div>                <div id="SE-64f54fe1-f56d-4711-8d22-ecca443bae74">
                                <p><a href="#" onclick="return false;" data-linktype="img" data-linkdata="{&quot;id&quot; : &quot;SE-64f54fe1-f56d-4711-8d22-ecca443bae74&quot;, &quot;src&quot; : &quot;https://mblogthumb-phinf.pstatic.net/MjAyMjA1MDNfOTEg/MDAxNjUxNTYxODM3OTEy.adiXc_NRlOZ8hS3iC8uzvppRReZ7EstT7f7dpn4YKJYg.tAMr3GkwGXxsiZZf7bWa4AP63-UYhYITjIR__JkqcRkg.PNG.chandong83/image.png&quot;, &quot;originalWidth&quot; : &quot;521&quot;, &quot;originalHeight&quot; : &quot;144&quot;, &quot;linkUse&quot; : &quot;false&quot;, &quot;link&quot; : &quot;&quot;}">
                                        <img src="https://mblogthumb-phinf.pstatic.net/MjAyMjA1MDNfOTEg/MDAxNjUxNTYxODM3OTEy.adiXc_NRlOZ8hS3iC8uzvppRReZ7EstT7f7dpn4YKJYg.tAMr3GkwGXxsiZZf7bWa4AP63-UYhYITjIR__JkqcRkg.PNG.chandong83/image.png?type=w800" data-width="521" data-height="144" alt="">
                                    </a>
                                </p>
                        </div>
                <div id="SE-e9f91590-3e7f-4d2a-9151-2d6d1b483063">
                            <p id="SE-4e4af3e0-d6ef-4332-ad2a-29fc3738f1a9"><span id="SE-bf620e9a-26e7-43fb-a8ea-353d41a91785">참고로 가지고 있는 컨테이너 리스트는 아래와 같이 ps -a로 확인 가능하다.</span></p>
                        </div>                                <div id="SE-a488a60f-b88f-4211-9198-180b6267291c">
                                <p><a href="#" onclick="return false;" data-linktype="img" data-linkdata="{&quot;id&quot; : &quot;SE-a488a60f-b88f-4211-9198-180b6267291c&quot;, &quot;src&quot; : &quot;https://mblogthumb-phinf.pstatic.net/MjAyMjA1MDNfOCAg/MDAxNjUxNTYxOTM3ODI5.5o_qxg6n2yYLBmdjFEGraizcSpW-lsc5Vn33vi97Qgkg.ugLLT9zK6CKw1voYWHAjmpflSHJ7if_oSyn4EiKhzpwg.PNG.chandong83/image.png&quot;, &quot;originalWidth&quot; : &quot;968&quot;, &quot;originalHeight&quot; : &quot;125&quot;, &quot;linkUse&quot; : &quot;false&quot;, &quot;link&quot; : &quot;&quot;}">
                                        <img src="https://mblogthumb-phinf.pstatic.net/MjAyMjA1MDNfOCAg/MDAxNjUxNTYxOTM3ODI5.5o_qxg6n2yYLBmdjFEGraizcSpW-lsc5Vn33vi97Qgkg.ugLLT9zK6CKw1voYWHAjmpflSHJ7if_oSyn4EiKhzpwg.PNG.chandong83/image.png?type=w800" data-width="693" data-height="89" alt="">
                                    </a>
                                </p>
                        </div>
                <div id="SE-4d9013fc-270b-4d53-8baa-2c1bbeecf04f">
                            <p id="SE-c6cdf404-01b2-467d-94cd-10267ef80a2c"><span id="SE-34900ee5-ddaa-4c80-ada9-2e79b8ad1701">이제 실행한 도커 컨테이너가 가동 중인지 확인해 보자. </span></p>
                        </div>                <div id="SE-9430e1db-3f3e-4a0e-be69-0e2a6a5173ad">
                                    <p>$ docker ps
or
$ docker container list</p>
                                </div>                <div id="SE-a9eeeabd-2bd2-4073-a4fa-5f01b7200d6b">
                                <p><a href="#" onclick="return false;" data-linktype="img" data-linkdata="{&quot;id&quot; : &quot;SE-a9eeeabd-2bd2-4073-a4fa-5f01b7200d6b&quot;, &quot;src&quot; : &quot;https://mblogthumb-phinf.pstatic.net/MjAyMjA1MDNfNDgg/MDAxNjUxNTYyMDk2MDky.6uuNhOcFlN2-MKPbFLo6osJBb184NgJ74zzukwa2Srkg.GdON4uprEl7uT04S57Lz04vC8gkTcIf0HksJKvqanU0g.PNG.chandong83/image.png&quot;, &quot;originalWidth&quot; : &quot;892&quot;, &quot;originalHeight&quot; : &quot;135&quot;, &quot;linkUse&quot; : &quot;false&quot;, &quot;link&quot; : &quot;&quot;}">
                                        <img src="https://mblogthumb-phinf.pstatic.net/MjAyMjA1MDNfNDgg/MDAxNjUxNTYyMDk2MDky.6uuNhOcFlN2-MKPbFLo6osJBb184NgJ74zzukwa2Srkg.GdON4uprEl7uT04S57Lz04vC8gkTcIf0HksJKvqanU0g.PNG.chandong83/image.png?type=w800" data-width="693" data-height="104" alt="">
                                    </a>
                                </p>
                        </div>
                <div id="SE-13cb09d0-49cc-4292-a422-78bd0d5085d1">
                                    <p id="SE-eef60b7e-19b7-4dae-bec4-fa3733f3f22d"><span id="SE-a9707a50-fe08-41de-8049-0928b84150d5">위와 같이 자신이 실행한 컨테이너가 나타나면 정상적으로 실행 중인 것이다.</span></p><p id="SE-b81c5d2d-5c8d-485e-9c51-f1302c43dbf4"><span id="SE-9416daa8-9995-4779-8a60-d8a75e4d2eb7">​</span></p>
                            </div>                                <div id="SE-17bdfa39-d1d1-4107-ae78-dd2bc4d2170f">
                            <p id="SE-a98b81e2-95e3-44cc-8f4f-6aff036514f8"><span id="SE-c2e8d413-7104-4b9a-8020-35c7de90f2f6">이제 VSCode를 열어서 도커 관련 플러그인을 설치해 보자.</span></p>
                        </div>                <div id="SE-0a8dcb54-52b5-4854-b68f-2847405122d0">
                                <p><a href="#" onclick="return false;" data-linktype="img" data-linkdata="{&quot;id&quot; : &quot;SE-0a8dcb54-52b5-4854-b68f-2847405122d0&quot;, &quot;src&quot; : &quot;https://mblogthumb-phinf.pstatic.net/MjAyMjA1MDNfMjM4/MDAxNjUxNTYyMzc2MDA4.0nL1e8pCnYMJVrWD7HczEP6hvSCvI7nHg_5ieprofAAg.4mNxKsb7lRqHOcoehlXqYC7HXgywnpQTJm-3QnDUGHQg.PNG.chandong83/SE-0a8dcb54-52b5-4854-b68f-2847405122d0.png&quot;, &quot;originalWidth&quot; : &quot;348&quot;, &quot;originalHeight&quot; : &quot;353&quot;, &quot;linkUse&quot; : &quot;false&quot;, &quot;link&quot; : &quot;&quot;}">
                                        <img src="https://mblogthumb-phinf.pstatic.net/MjAyMjA1MDNfMjM4/MDAxNjUxNTYyMzc2MDA4.0nL1e8pCnYMJVrWD7HczEP6hvSCvI7nHg_5ieprofAAg.4mNxKsb7lRqHOcoehlXqYC7HXgywnpQTJm-3QnDUGHQg.PNG.chandong83/SE-0a8dcb54-52b5-4854-b68f-2847405122d0.png?type=w800" data-width="348" data-height="353" alt="">
                                    </a>
                                </p>
                        </div>
                <div id="SE-a9d3a99d-6fbf-4816-9b2a-e5e38321cb09">
                            <p id="SE-ac3fa6f6-1940-4181-93cd-a585157ffc50"><span id="SE-11a06bc9-c417-486e-a210-995a6c5fc8f3">왼쪽 바에서 Extension 버튼을 클릭 후 검색창에 docker라고 검색하여 Docker 패키지를 설치한다.</span></p>
                        </div>                <div id="SE-b0585683-f779-4a09-b802-181ffef72a7f">
                                <p><a href="#" onclick="return false;" data-linktype="img" data-linkdata="{&quot;id&quot; : &quot;SE-b0585683-f779-4a09-b802-181ffef72a7f&quot;, &quot;src&quot; : &quot;https://mblogthumb-phinf.pstatic.net/MjAyMjA1MDNfMjE5/MDAxNjUxNTYyNDYwNjI3.Bxt2TA-cHydwvLPCnLb0fw6zmlx39zUumbRhuf9s4GAg.CaSS4ysmWT5MxuewuExzFlo2CkCX8cyQYeqfb4Qzg08g.PNG.chandong83/SE-b0585683-f779-4a09-b802-181ffef72a7f.png&quot;, &quot;originalWidth&quot; : &quot;335&quot;, &quot;originalHeight&quot; : &quot;329&quot;, &quot;linkUse&quot; : &quot;false&quot;, &quot;link&quot; : &quot;&quot;}">
                                        <img src="https://mblogthumb-phinf.pstatic.net/MjAyMjA1MDNfMjE5/MDAxNjUxNTYyNDYwNjI3.Bxt2TA-cHydwvLPCnLb0fw6zmlx39zUumbRhuf9s4GAg.CaSS4ysmWT5MxuewuExzFlo2CkCX8cyQYeqfb4Qzg08g.PNG.chandong83/SE-b0585683-f779-4a09-b802-181ffef72a7f.png?type=w800" data-width="335" data-height="329" alt="">
                                    </a>
                                </p>
                        </div>
                <div id="SE-72cb52ee-1485-4e65-9b24-e8c00b6996e7">
                                    <p id="SE-df892d6a-393d-4ac1-be15-4c50a0b78e5a"><span id="SE-75294686-5c95-4ef5-9b10-476109c381e3">다음은 다시 검색창에 Remote-containers를 검색해 설치한다.</span></p><p id="SE-e7bc1659-9105-4bd2-a395-565d591919cf"><span id="SE-6ae457cd-705f-4b8c-bd03-290f893530ab">​</span></p><p id="SE-937346f7-3fe6-4925-9856-75a3b973033f"><span id="SE-79dd5f28-baef-42b2-873a-3bc208ccfc20">자 이제 기본 준비는 마쳤다.</span></p><p id="SE-d65d18a8-2842-49f1-b056-3249f3032468"><span id="SE-68f01dd3-4788-4cde-a3bb-f5c2b473ac51">​</span></p>
                            </div>                                <div id="SE-a96d044e-a5a6-456f-b8ef-850ddf2a0d68">
                            <p id="SE-efa73af9-5630-45dd-b9cb-41f59aeeef5c"><span id="SE-3a015c0e-3f41-443f-acdb-fc58237d1eff">이제 VSCode에서 키보드 F1키 또는 "ctrl + shift + p"를 눌러 Command Palette 팝업을 띄운다.</span></p>
                        </div>                <div id="SE-b36689cd-578d-4941-87b5-cc9ac4e38be9">
                                <p><a href="#" onclick="return false;" data-linktype="img" data-linkdata="{&quot;id&quot; : &quot;SE-b36689cd-578d-4941-87b5-cc9ac4e38be9&quot;, &quot;src&quot; : &quot;https://mblogthumb-phinf.pstatic.net/MjAyMjA1MDNfMzYg/MDAxNjUxNTYyNzk1MjIz.MV-2WuQmP6KSN_VpWCAsXO3SFvHDdHhwLka4ezZaErsg.oaAqjb_XZ-h0IDrPAkIhR5qiX4biKsX8EV-MdaYYhxcg.PNG.chandong83/SE-b36689cd-578d-4941-87b5-cc9ac4e38be9.png&quot;, &quot;originalWidth&quot; : &quot;795&quot;, &quot;originalHeight&quot; : &quot;434&quot;, &quot;linkUse&quot; : &quot;false&quot;, &quot;link&quot; : &quot;&quot;}">
                                        <img src="https://mblogthumb-phinf.pstatic.net/MjAyMjA1MDNfMzYg/MDAxNjUxNTYyNzk1MjIz.MV-2WuQmP6KSN_VpWCAsXO3SFvHDdHhwLka4ezZaErsg.oaAqjb_XZ-h0IDrPAkIhR5qiX4biKsX8EV-MdaYYhxcg.PNG.chandong83/SE-b36689cd-578d-4941-87b5-cc9ac4e38be9.png?type=w800" data-width="693" data-height="378" alt="">
                                    </a>
                                </p>
                        </div>
                <div id="SE-c0be3827-a07b-424c-a621-3f546ffe6a9a">
                            <p id="SE-1c81d2cc-0bd3-48d2-b884-f282556f8804"><span id="SE-9ab48d37-96be-4a11-aa6b-8d1cc76c582f">Command Palette가 팝업이 나타나면 attach라고 입력 후 Remote-Containers: Attach to Running Containner...를 선택한다.</span></p>
                        </div>                <div id="SE-a8b544ab-135b-481b-af06-e81f2d3dbd52">
                                <p><a href="#" onclick="return false;" data-linktype="img" data-linkdata="{&quot;id&quot; : &quot;SE-a8b544ab-135b-481b-af06-e81f2d3dbd52&quot;, &quot;src&quot; : &quot;https://mblogthumb-phinf.pstatic.net/MjAyMjA1MDNfMjUx/MDAxNjUxNTYyODkxNjcx.nAnHYM2h1l0UlZkoUo9dE2D4l4qIaK5uJLUfkBBBofwg.5Sf2PwIiTjYUYrzxfoLzCMMaiyQwa5LqR3XYtWRnVm8g.PNG.chandong83/SE-a8b544ab-135b-481b-af06-e81f2d3dbd52.png&quot;, &quot;originalWidth&quot; : &quot;723&quot;, &quot;originalHeight&quot; : &quot;428&quot;, &quot;linkUse&quot; : &quot;false&quot;, &quot;link&quot; : &quot;&quot;}">
                                        <img src="https://mblogthumb-phinf.pstatic.net/MjAyMjA1MDNfMjUx/MDAxNjUxNTYyODkxNjcx.nAnHYM2h1l0UlZkoUo9dE2D4l4qIaK5uJLUfkBBBofwg.5Sf2PwIiTjYUYrzxfoLzCMMaiyQwa5LqR3XYtWRnVm8g.PNG.chandong83/SE-a8b544ab-135b-481b-af06-e81f2d3dbd52.png?type=w800" data-width="693" data-height="410" alt="">
                                    </a>
                                </p>
                        </div>
                                <div id="SE-3e78bf97-9797-4496-b8a4-1c4c9210d9f0">
                                <p><a href="#" onclick="return false;" data-linktype="img" data-linkdata="{&quot;id&quot; : &quot;SE-3e78bf97-9797-4496-b8a4-1c4c9210d9f0&quot;, &quot;src&quot; : &quot;https://mblogthumb-phinf.pstatic.net/MjAyMjA1MDNfNzkg/MDAxNjUxNTYyOTU1NzMx.DwzSFpMVQ_RsqBV6-Tok4QvVrtUAmSfBVO6lqMeUG2Ig.oKjmZJsjmK5WUHAtMQKFEoCrvC2kSBN-5jc7_AiQVRUg.PNG.chandong83/image.png&quot;, &quot;originalWidth&quot; : &quot;797&quot;, &quot;originalHeight&quot; : &quot;609&quot;, &quot;linkUse&quot; : &quot;false&quot;, &quot;link&quot; : &quot;&quot;}">
                                        <img src="https://mblogthumb-phinf.pstatic.net/MjAyMjA1MDNfNzkg/MDAxNjUxNTYyOTU1NzMx.DwzSFpMVQ_RsqBV6-Tok4QvVrtUAmSfBVO6lqMeUG2Ig.oKjmZJsjmK5WUHAtMQKFEoCrvC2kSBN-5jc7_AiQVRUg.PNG.chandong83/image.png?type=w800" data-width="693" data-height="529" alt="">
                                    </a>
                                </p>
                        </div>
                <div id="SE-e2779940-e8b5-43ef-82d1-271c43754106">
                            <p id="SE-fe0149cf-300a-4198-81e0-c92764b08f3f"><span id="SE-bce29c8f-8978-4a62-ba8a-0f59271c2570">그러면 새 창이 열리면서 도커에 접속이 될 것이다.</span></p>
                        </div>                <div id="SE-b5bbe5e8-df42-4fed-a507-3bceea0c7d56">
                            <p><a href="#" onclick="return false;" data-linktype="sticker" data-linkdata="{&quot;src&quot; : &quot;https://storep-phinf.pstatic.net/linepower_01/original_11.gif&quot;, &quot;packCode&quot; : &quot;linepower_01&quot;, &quot;seq&quot; : &quot;11&quot;, &quot;width&quot; : &quot;185&quot;, &quot;height&quot; : &quot;160&quot;}">
                                    <img src="https://storep-phinf.pstatic.net/linepower_01/original_11.gif?type=pa100_100" alt="">
                                </a>
                            </p>
                        </div>                <div id="SE-2e221ea3-2fc9-43b7-852d-38e3bfdb80fb">
                            <p id="SE-152b2a52-c458-44b6-8bb0-3692c2862f35"><span id="SE-88f70888-1133-43d5-bc63-c895def97da9">참고로 도커에 접속해 작업 공간을 변경하고 싶다면 아래의 링크를 참고하길 바란다.</span></p>
                        </div>                                    </div></div>

하이! 제니스

1. 도커 시작 아래와 같이 docker start를 이용해 VSCode와 연결할 컨테이너를 시작한다. 참고로 가지고 있는 컨테이너 리스트는 아래와 같이 ps -a로 확인 가능하다. 이제 실행한 도커 컨테이너가 가동 중인지 확인해 보자. 위와 같이 자신이 실행한 컨테이너가 나타나면 정상적으로 실행 중인 것이다. 2. VSCode 도커 관련 플러그인 설치 이제 VSCode를 열어서 도커 관련 플러그인을 설치해 보자. 왼쪽 바에서 Extension 버튼을 클릭 후 검색창에 docker라고 검색하여 Docker 패키지를 설치한다. 다음은 다시 검색창에 Remote-containers를 검색해 설치한다. 자 이제 기본 준비는 마쳤다. 3. 도커에 연결하기 이제 VSCode에서 키보드 F1키 또는.......

VSCode(Visual Studio Code) - 도커(Docker) 연결하기 - 우분투(Ubuntu) 기준

댓글