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 Slide

  2. 2
    自己紹介

    View Slide

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

    View Slide

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

    View Slide

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

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

    View Slide

  6. Visual Studio Codeとは?
    6

    View 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 Slide

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

    View Slide

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

    View Slide

  10. 開発環境の選択肢
    10

    View Slide

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

    View Slide

  12. GitHub Codespaces/Dev container
    12

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  17. Codespaceを作成しよう
    17

    View Slide

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

    View Slide

  19. 19

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  35. Remote - SSH
    35

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  41. 最後に
    41

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  45. おわり
    45

    View Slide