Upgrade to Pro — share decks privately, control downloads, hide ads and more …

実践VSCodeリモートSSH・コンテナ開発機能

 実践VSCodeリモートSSH・コンテナ開発機能

74th(Atsushi Morimoto)

January 23, 2020
Tweet

More Decks by 74th(Atsushi Morimoto)

Other Decks in Technology

Transcript

  1. 実践
    リモートSSH・コンテナ開発機能
    Atsushi Morimoto
    @74th

    View Slide

  2. Atsushi Morimoto @74th
    Python、Go、Kubernetes、Terraform @ VSCode with RemoteDev
    仕事の開発の95%をリモート開発機能を使う(残り5%はAndroid)
    様々な言語、環境のデバッグ設定集
    https://github.com/74th/vscode-debug-specs

    View Slide

  3. 2月20日発売予定
    400ページで、ほぼ全機能解説
    TypeScript/Go/Pythonでの
             実践的な開発実例
    拡張機能開発
    (コマンド、タスク、テーマ…)
    LSP解説
     → LSPを使った拡張機能開発まで
    ※表紙は作成中のもので、変わることがあります

    View Slide

  4. Contents
    1. リモート開発機能でどう世界が変わったか
    2. @74thの環境と、リモートSSH機能デモ
    3. リモートSSHの制約
    4. WSL
    5. リモートコンテナ機能とは
    6. リモートコンテナ機能デモ
    7. WSL、リモートSSHでリモートコンテナ機能を使う

    View Slide

  5. 近年のよくある開発環境

    View Slide

  6. 近年のよくある開発環境

    View Slide

  7. リモート開発機能とは…

    View Slide

  8. リモート開発機能の何が嬉しいか?
    A: 使い慣れたPC(MacOS、Windows)を使いながら、
    Linuxの世界で開発ができる
    ○ 最終成果物のLinuxコンテナで動けばOK!
    ○ MacOS、Windowsでの環境構築不要!
    ○ Linuxの解析ツールがすべて使える(systemtap、strace……)

    View Slide

  9. @74th の環境
    Host : MacOS+Parallels Desktop 15
    ● Apple Hypervisor Frameworkに対応
    ● 比較した中で、IO性能が高かった
    VM: Ubuntu Server 19.10
    ● Homebrew がLinuxでも使える
    App: GoのWebアプリ
    ● ~/go/src/github.com/74th/vscode-book-golang
    ● TODO 管理アプリ
    MacBookPro

    View Slide

  10. リモートSSH機能デモ
    ● SSHログイン
    ○ ~/.ssh/config/
    ○ Goの補完が効く様子
    ● デバッグ実行とポートフォワーディング

    View Slide

  11. リモートSSH機能の制約
    ● Linuxサーバを構築していること(Windowsサーバは準備中)。
    ● x86_64 or aarch64 アーキテクチャであること。
    ● SSHで接続可能であること。~/.ssh/config に設定があること。
    ● Linuxサーバ内で、プロジェクトファイルがチェックアウトされていること。
    ● Linuxサーバに、ビルドに必要なツールのほか、git、curlなども含めて、
    開発に必要なソフトウェアがインストールされていること。
    ● Linuxサーバでリポジトリにアクセスできること。

    View Slide

  12. ARM64 (Raspberry Pi 4)
    aarrch64(ARM64)に対応
    拡張機能やLanguageServerが
    対応していない場合もある

    View Slide

  13. ARM64 (Raspberry Pi 4)
    aarrch64(ARM64)に対応
    拡張機能やLanguageServerが
    対応していない場合もある

    View Slide

  14. WSL(Windows Subsystem for Linux)
    ● 仮想マシンと異なり、
    メモリ、CPU、ストレージの
    リソースはホストマシンと共有
    ● WSL 2からdockerも使える
    ● $ code . で起動
    ● localhost を共有

    View Slide

  15. リモートコンテナ機能での開発

    View Slide

  16. Dockerfile
    ● 本番環境のDockerfileとは別に作る
    ● git、procpsを追加
    ● 本番環境と開発用のツールを
    両方ともインストール
    ● 変更したら
    コマンド「Rebuild Container」
    <Dockerfileの参考>
    https://github.com/Microsoft/vscode-remote-try-node
    try-{python,go,java,dotnetcore,php,rust,cpp}
    FROM python:3.7
    RUN apt-get update && \
    apt-get -y install git procps
    WORKDIR /app
    ADD ./requirements.txt ./
    RUN pip install -r requirements.txt
    ADD ./dev-requirements.txt ./
    RUN pip install -r dev-requirements.txt

    View Slide

  17. .devcontainer/devcontainer.json
    ● Dockerfile
    .devcontainer/からの相対パス
    ● 拡張機能
    ● 開放ポート
    ● 変更したら
    コマンド「Rebuild Container」
    {
    "name": "Python 3.7",
    "context": "..",
    "dockerFile": "Dockerfile",
    "appPort": [8080],
    "extensions": [
    "ms-python.python"
    ]
    }

    View Slide

  18. リモートコンテナ機能デモ
    ● Reopen in Container

    View Slide

  19. WSLのDockerを使いたい
    昨日の
    Docker Desktopの
    アップデートで対応
    ※Experimental

    View Slide

  20. View Slide

  21. SSH先のDockerを使いたい
    要するに DockerAPI にアクセスして、リポジトリをマウントする
    ○ TCPでDockerにアクセス可能にする
    /etc/default/docker -> DOCKER_OPT=DOCKER_OPTS="-H 0.0.0.0:9000”
    export DOCKER_HOST=tcp://remote:9000
    ○ WSL、SSH先でリポジトリをチェックアウトして、
    そのディレクトリをマウントする docker-compose.yamlを作る
    ○ docker-composeでコンテナを起動する
    ○ コマンド「Attach to Running Container」→
    コマンド「Open Folder...」でマウントしたディレクトリを開く
    ● https://qiita.com/74th/items/06b91cf4fecfc61bfbf4

    View Slide

  22. docker-compose.yaml
    https://qiita.com/74th/items/06b
    91cf4fecfc61bfbf4
    version: "3"
    services:
    python:
    build:
    context: .
    dockerfile: ./Dockerfile
    ports:
    - 8080:8080
    user: "1000:1000" # マウント先のユーザ
    environment:
    HOME: "/home/nnyn/" # .vscode-serverディレクトリに使われ

    command: /bin/sh -c "while sleep 10000; do :; done"
    # コンテナを起動するだけで何もしない
    volumes:
    - /home/nnyn/vscode-book-python:/app # リポジトリマウント
    - /home/nnyn/.git:/home/nnyn/.git # gitの設定
    - /home/nnyn/.netrc:/home/nnyn/.netrc # gitの認証情報
    - /home/nnyn/.vscode-container:/home/nnyn/.vscode-server
    # 拡張機能を共有
    SSH先の
    Dockerを使いたい

    View Slide

  23. リモート開発機能の
    もう少し詳しい内容は…
    技術書典7
    BOOTHで販売中
    https://74th.booth.pm/items/1575560

    View Slide