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

Visual Studio Codeで始めるリモート開発入門

Visual Studio Codeで始めるリモート開発入門

「 Open Source Conference 2023 Online/Nagoya」で登壇した際に投影したスライドです。

Ishimoto Tatsuya

May 20, 2023
Tweet

More Decks by Ishimoto Tatsuya

Other Decks in Technology

Transcript

  1. Visual Studio Codeで始める
    リモート開発入門
    日本仮想化技術株式会社
    VirtualTech.jp
    2023/05/20
    1

    View full-size slide

  2. 2
    自己紹介

    View full-size slide

  3. ● リモート開発って何?
    ● Visual Studio Codeといえば、ローカルマシンで動くデスクトップ版のエディタじゃないの?
    ● 実際に使ってみようとしたらどうすればいいの?
    今回の話
    3

    View full-size slide

  4. リモート開発とは?
    4

    View full-size slide

  5. リモート開発とは?
    ● コンテナやリモートマシン、Windows Subsystem for Linux(WSL)上に開発環境を構築できる機

    ● ソースコードや実行環境、CLIツールなどはすべてリモート環境上に構築する
    メリット
    ● ローカルマシンの構成に影響を与えないように、開発環境を分離できる
    ○ ローカルにソースコードを置く必要がない
    ● 開発プロジェクトのメンバー間で一貫した開発環境を維持することができる
    ● ローカルマシン以外で実行されているアプリケーションをデバッグできる
    5
    https://code.visualstudio.com/docs/remote/remote-overview

    View full-size slide

  6. Visual Studio Codeとは?
    6

    View full-size slide

  7. ● Visual Studio Code=VS Code、code
    ● 主な機能
    ○ シンタックスハイライト、スニペット、インテリセンス、リファクタリング、デバッグ、テスト
    ● 元々はHTML5ベースのWebブラウザーで動くエディター&ツールフレームワークとして開発
    ○ Internet Explorer(IE)やMicrosoft EdgeのF12開発者ツール など
    ● ブラウザー版で一定の成功を納めたのち、より高みを目指してデスクトップ版の開発にも着手
    ○ Electron上で構築
    ● 2015年04月 Build 2015(Microsoftの開発者向けカンファレンス)でプレビュー版が発表
    ○ 「Code editing, redefined」(コードエディターの再定義)のスローガンを掲げている
    ○ 統合開発環境(IDE)とテキストエディターの中間的な位置付け
    ● 2015年11月にオープンソースとして公開
    ○ オープンソースな場で開発を行い、ブランド製品としてリリースしている(Chromiumと同じようなスタイル)
    ○ Visual Studioからより高速に開発サイクルを回すために機能を絞って軽量なエディターとして作られた
    ● 拡張機能から拡張APIを通じてほぼすべての機能にアクセス可能
    ● リリースサイクルは、毎月第1金曜あたり。
    ○ Youtubeでリリースパーティがライブ配信される
    Visual Studio Codeとは?
    7

    View full-size slide

  8. リモート開発の始め方
    8

    View full-size slide

  9. 必要な拡張機能の種類
    VS Codeは、拡張機能をインストールして使い勝手をよくしていくもの
    リモート開発向けに拡張機能パックをインストール
    ● Remote - SSH
    ○ ローカルマシンからSSH接続でリモートマシンを開発環境として使用
    ● Remote - Tunnels
    ○ ローカルマシンからトンネル経由でリモートマシンを開発環境として使用
    ● Dev Containers
    ○ ローカルマシンからDocker上のコンテナを開発環境として使用する
    ● WSL
    ○ WindowsのWSLを開発環境として使用する
    GitHub Codespaces
    ● GitHubが提供しているCodespacesの環境を開発環境として使用する
    9

    View full-size slide

  10. 開発環境の選択肢
    10

    View full-size slide

  11. ※1 仮想化技術の1つであるDockerやVirtualboxを前提
    ※2 AWSのCloud9などがある
    ※3 GitHubが提供するホスティングサービスを前提
    開発環境の選択肢
    11
    拡張機能
    Remote - SSH Remote - Tunnel Dev Containers GitHub Codespaces
    ローカルマシン上 - - - -
    ローカルマシンの仮想環境上※1
    ⚫ - ⚫ -
    クラウド上※2
    ⚫ ⚫ ⚫ -
    ホスティングサービス上※3 - - - ⚫

    View full-size slide

  12. GitHub Codespaces/Dev container
    12

    View full-size slide

  13. GitHub Codespacesとは
    13
    ● クラウドでホストされる開発環境
    ○ GitHubのDockerコンテナ内でホストされる
    ○ Ubuntuイメージから作成
    ■ 人気の高いプログラミング言語の実行環境がプリインストール済み
    ● 従量課金制
    ○ 毎月無料枠の付与あり
    ■ 無料枠を超えて使用する場合には、設定変更が必要
    ● スペック
    ○ 最小:2コア、8GB RAM、32GBストレージ
    ○ 最大:32コア、64GB RAM、128GBストレージ
    ● Configuration-as-Code:CaC
    ○ 構成ファイルでプロジェクトをカスタマイズできる
    ● 自動停止
    ○ 非アクティブ状態が30分間続くと自動で実行停止(時間は、設定により変更可能)

    View full-size slide

  14. 14
    https://docs.github.com/ja/codespaces/overview

    View full-size slide

  15. A:できる
    ● 自動ポート転送により、Codespaces内で実行されているTCPポートにアクセスできる
    ● 手動で転送設定も可能
    ● ポート公開設定は、プライベートが初期設定
    ○ ① 自分のみ
    ○ ② 組織内メンバーの限定アクセス
    ○ ③ URLを知っている人の限定アクセス
    Webアプリを実行したらブラウザからアクセスできる?
    15

    View full-size slide

  16. A:できる
    ● 次の場合は、追加設定不要で接続できる
    ○ ローカルホストポートを使用している場合
    ○ リモートドメインのパブリックポートにアクセスする場合
    ● リモートのプライベートポートに接続する場合は、認証情報をリクエストに付与する必要あり
    APIクライアントから接続することはできる?
    16

    View full-size slide

  17. Codespaceを作成しよう
    17

    View full-size slide

  18. ①-1 GitHub上からデフォルト設定で作成
    ● 「Codeボタン」>「Codespacesタブ」をクリック
    ● 「Create codespace on main」をクリック
    ①-2 GitHub上からスペックやブランチを指定して作成
    ● 「・・・」から「New with options…」クリック
    ② Visual Studio Codeから作成
    ● 拡張機能から作成できる(省略)
    Codespaceの作成
    18

    View full-size slide

  19. デスクトップ版のVS Codeから起動するようにするには?
    A:設定変更でデスクトップ版VS Codeから起動できる
    GitHubのデフォルト設定ではWeb版のVS Codeで起動するが、
    個人設定画面から設定変更できる
    20

    View full-size slide

  20. 構成ファイルを作成しよう
    21

    View full-size slide

  21. 拡張機能をインストール
    https://marketplace.visualstudio.com/items?itemName=GitHub.codespaces
    22

    View full-size slide

  22. 拡張機能を使用する際の注意点
    ● なにかとお世話になることが多いからこそできるだけ安全に使いたい
    ● マーケットプレイスからインストールしても100%安全ではない
    ○ 2021年に拡張機能を悪用したサイバー攻撃がニュースで話題
    ○ マーケットプレイス側で配信時などにチェックされているが
    「羊の姿をしたオオカミ」が潜んでいる可能性もある
    ○ 拡張機能にコード署名の付与開始して、移行期間中
    ■ v1.75でアナウンスされた
    ■ 2022/11以降のアップロード分は必須。他は順次
    ポイント
    ● マーケットプレイスからダウンロード
    ● 認証バッチが付いている
    ○ 2021年に追加された機能
    ○ Marketplace側で配信者とドメイン所有者が一致しているか確認済み
    ● ダウンロード数
    ○ 同じ名前でも大きく違う場合があり、気づくきっかけになる
    23
    https://code.visualstudio.com/updates/v1_62#_verified-extension-publishers

    View full-size slide

  23. コマンドパレットから起動
    ● コマンドパレットから設定ファイルの作成を開始
    ● いくつかの質問に答える
    24

    View full-size slide

  24. 構成ファイルの作成方法を選択
    ● 上段
    ○ 既に作成済みの構成ファイルを編集する場合に選択する
    ● 下段
    ○ 新しい構成ファイルを作成する場合に選択する
    25

    View full-size slide

  25. ベースとするイメージを選択
    ● チェックマークのバッチがついているものはDev Container拡張機能が公式で提供しているもの
    ● 右端のインフォメーションアイコンをクリックして作成者が信頼できるか確認を
    26

    View full-size slide

  26. Nodeのバージョンを選択
    ● Node.jsは最新版と推奨版の2バージョンを配信している
    ● 今回は推奨版を使用(資料作成時点では18.xが最新)
    27

    View full-size slide

  27. 追加機能を選択
    選択しなくてもOK
    ● コンテナのベースイメージに追加するツールを選択することで、手軽にセットアップできる
    ○ AWS CLIやDockerコマンドなど
    28

    View full-size slide

  28. 構成ファイルを作成したら再構築
    ● 構成ファイルを変更したら、再構築するまでは環境に反映されない
    29

    View full-size slide

  29. 構成ファイルの書き方を理解しよう
    30

    View full-size slide

  30. 実際の設定ファイルのイメージ
    31

    View full-size slide

  31. 主な設定項目
    32
    設定項目 説明
    name Dev container上で表示する名前
    image 開発環境に使用するコンテナイメージを選択
    build (別スライドにて)
    features コンテナ内で使用する追加ツールを定義。
    VS CodeやGitHubのUI上から選択することも可能。
    使用できるツールの一覧:https://containers.dev/features
    forwardPorts (省略)
    postCreateCommand コンテナ作成後にコンテナ内で任意のコマンドを実行できる。
    初めて開発を始める際に、お決まりで実行するnpm installなどを設定しておくと便利
    (似たものにonCreateCommand、updateContentCommandなどがある)
    customizations (別スライドにて)
    remoteUser (省略)

    View full-size slide

  32. customizationsで設定できること
    ● インストールすべき拡張機能の指定やVS Codeの設定が定義できる
    ● settings.jsonでは、インデントサイズや使用する静的解析ツールなどが定義できる
    ○ 設定はできるが.vscode/settings.jsonに設定は寄せておいた方がいいかも
    {
    "customizations": {
    "vscode": {
    "extensions": [],
    "settings": {},
    }
    }
    }
    33
    設定項目 説明
    extensions GitHub Codespacesでインストールするべき拡張機能のIDを指定できる
    settings settings.jsonファイルで定義できる内容が指定できる

    View full-size slide

  33. 独自で定義したイメージを作成することはできる?
    A:できる
    Dockerfileやdocker-compose.ymlのファイルを作成してから、構成ファイルに次の設定項目を追加す
    ることで、使用することができます。
    参照されるファイルの場所は、構成ファイルが格納されている場所が起点。設定により変更も可能。
    Dockerfileの場合
    {
    “build”: {
    “dockerfile”: “Dockerfile”,
    “context”: “.”
    }
    }
    34
    docker-compose.ymlの場合
    {
    “dockerComposeFile”: “docker-compose.yml”,
    “service”: “devcontainer”,
    “workspaceFolder”: “/workspaces/${localWorkspaceFolderBasename}”
    }

    View full-size slide

  34. Remote - SSH
    35

    View full-size slide

  35. Remote - SSH
    ● リモートマシンにSSHを使って接続するための拡張機能
    ● 開発サーバーや検証サーバーに直接入って、ログファイルなどを確認できる
    ● CLIコマンドに不慣れな人やファイル編集やログファイルの調査などの時にUI機能を活用できる
    ● 開発環境というよりは、CLI操作より少しGUI寄りの恩恵を受けながら作業したい時向け
    36

    View full-size slide

  36. リモートな環境を用意(AWS編)
    ● AWSでEC2を作成して、SSHの接続情報を取得
    37

    View full-size slide

  37. SSHの設定ファイルを追加
    SSHの設定ファイル(~/.ssh/config)に追加
    Host remotessh
    HostName ec2-xxxx.ap-northeast-1.compute.amazonaws.com
    User ec2-user
    IdentityFile ~/.ssh/xxxxx.pem
    38

    View full-size slide

  38. SSHでEC2に接続
    ● アクティビティバー>リモートエクスプローラーを選択
    ● リモートを選択して接続
    39

    View full-size slide

  39. 接続完了
    ● Remote: SSHで接続した場合は、このように見える
    40

    View full-size slide

  40. ● ローカル開発環境以外の選択肢に目を向けて、リモート開発に入門
    ● 拡張機能などがプレビュー版なので、実践投入はもう少し様子見したい気持ち
    ● ローカルを汚さない環境は魅力があるので、今後も前向きに調査継続
    ● 今回で”リモート開発を完全に理解した”ので、実践投入してその後の経過をまとめたい
    最後に
    42

    View full-size slide

  41. お知らせ
    5/28開催のOpen Source Conference 2023 Nagoya オフライン展示に参加します
    かんたんDevOpsや開発環境、エディタに関するお悩み相談所としてお気軽にお立ち寄りください
    (「先週のセミナー見ました〜」と言って、立ち寄ってもらえると嬉しいです)
    色々と情報交換しましょう
    ↓イベント情報はこちら↓
    https://event.ospn.jp/osc2023-nagoya/
    43

    View full-size slide

  42. 5/28 OSC名古屋で会いましょう
    @名古屋市中小企業振興会館 3F 第2ファッション展示場
    44

    View full-size slide