「 Open Source Conference 2023 Online/Nagoya」で登壇した際に投影したスライドです。
Visual Studio Codeで始めるリモート開発入門日本仮想化技術株式会社VirtualTech.jp2023/05/201
View Slide
2自己紹介
● リモート開発って何？● Visual Studio Codeといえば、ローカルマシンで動くデスクトップ版のエディタじゃないの？● 実際に使ってみようとしたらどうすればいいの？今回の話3
リモート開発とは？4
リモート開発とは？● コンテナやリモートマシン、Windows Subsystem for Linux(WSL)上に開発環境を構築できる機能● ソースコードや実行環境、CLIツールなどはすべてリモート環境上に構築するメリット● ローカルマシンの構成に影響を与えないように、開発環境を分離できる○ ローカルにソースコードを置く必要がない● 開発プロジェクトのメンバー間で一貫した開発環境を維持することができる● ローカルマシン以外で実行されているアプリケーションをデバッグできる5https://code.visualstudio.com/docs/remote/remote-overview
Visual Studio Codeとは？6
● 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
リモート開発の始め方8
必要な拡張機能の種類VS Codeは、拡張機能をインストールして使い勝手をよくしていくものリモート開発向けに拡張機能パックをインストール● Remote - SSH○ ローカルマシンからSSH接続でリモートマシンを開発環境として使用● Remote - Tunnels○ ローカルマシンからトンネル経由でリモートマシンを開発環境として使用● Dev Containers○ ローカルマシンからDocker上のコンテナを開発環境として使用する● WSL○ WindowsのWSLを開発環境として使用するGitHub Codespaces● GitHubが提供しているCodespacesの環境を開発環境として使用する9
開発環境の選択肢10
※1 仮想化技術の1つであるDockerやVirtualboxを前提※2 AWSのCloud9などがある※3 GitHubが提供するホスティングサービスを前提開発環境の選択肢11拡張機能Remote - SSH Remote - Tunnel Dev Containers GitHub Codespacesローカルマシン上 - - - -ローカルマシンの仮想環境上※1⚫ - ⚫ -クラウド上※2⚫ ⚫ ⚫ -ホスティングサービス上※3 - - - ⚫
GitHub Codespaces/Dev container12
GitHub Codespacesとは13● クラウドでホストされる開発環境○ GitHubのDockerコンテナ内でホストされる○ Ubuntuイメージから作成■ 人気の高いプログラミング言語の実行環境がプリインストール済み● 従量課金制○ 毎月無料枠の付与あり■ 無料枠を超えて使用する場合には、設定変更が必要● スペック○ 最小：2コア、8GB RAM、32GBストレージ○ 最大：32コア、64GB RAM、128GBストレージ● Configuration-as-Code：CaC○ 構成ファイルでプロジェクトをカスタマイズできる● 自動停止○ 非アクティブ状態が30分間続くと自動で実行停止(時間は、設定により変更可能)
14https://docs.github.com/ja/codespaces/overview
A：できる● 自動ポート転送により、Codespaces内で実行されているTCPポートにアクセスできる● 手動で転送設定も可能● ポート公開設定は、プライベートが初期設定○ ① 自分のみ○ ② 組織内メンバーの限定アクセス○ ③ URLを知っている人の限定アクセスWebアプリを実行したらブラウザからアクセスできる？15
A：できる● 次の場合は、追加設定不要で接続できる○ ローカルホストポートを使用している場合○ リモートドメインのパブリックポートにアクセスする場合● リモートのプライベートポートに接続する場合は、認証情報をリクエストに付与する必要ありAPIクライアントから接続することはできる？16
Codespaceを作成しよう17
①-1 GitHub上からデフォルト設定で作成● 「Codeボタン」＞「Codespacesタブ」をクリック● 「Create codespace on main」をクリック①-2 GitHub上からスペックやブランチを指定して作成● 「・・・」から「New with options…」クリック② Visual Studio Codeから作成● 拡張機能から作成できる(省略)Codespaceの作成18
19
デスクトップ版のVS Codeから起動するようにするには？A：設定変更でデスクトップ版VS Codeから起動できるGitHubのデフォルト設定ではWeb版のVS Codeで起動するが、個人設定画面から設定変更できる20
構成ファイルを作成しよう21
拡張機能をインストールhttps://marketplace.visualstudio.com/items?itemName=GitHub.codespaces22
拡張機能を使用する際の注意点● なにかとお世話になることが多いからこそできるだけ安全に使いたい● マーケットプレイスからインストールしても100%安全ではない○ 2021年に拡張機能を悪用したサイバー攻撃がニュースで話題○ マーケットプレイス側で配信時などにチェックされているが「羊の姿をしたオオカミ」が潜んでいる可能性もある○ 拡張機能にコード署名の付与開始して、移行期間中■ v1.75でアナウンスされた■ 2022/11以降のアップロード分は必須。他は順次ポイント● マーケットプレイスからダウンロード● 認証バッチが付いている○ 2021年に追加された機能○ Marketplace側で配信者とドメイン所有者が一致しているか確認済み● ダウンロード数○ 同じ名前でも大きく違う場合があり、気づくきっかけになる23https://code.visualstudio.com/updates/v1_62#_verified-extension-publishers
コマンドパレットから起動● コマンドパレットから設定ファイルの作成を開始● いくつかの質問に答える24
構成ファイルの作成方法を選択● 上段○ 既に作成済みの構成ファイルを編集する場合に選択する● 下段○ 新しい構成ファイルを作成する場合に選択する25
ベースとするイメージを選択● チェックマークのバッチがついているものはDev Container拡張機能が公式で提供しているもの● 右端のインフォメーションアイコンをクリックして作成者が信頼できるか確認を26
Nodeのバージョンを選択● Node.jsは最新版と推奨版の2バージョンを配信している● 今回は推奨版を使用(資料作成時点では18.xが最新)27
追加機能を選択選択しなくてもOK● コンテナのベースイメージに追加するツールを選択することで、手軽にセットアップできる○ AWS CLIやDockerコマンドなど28
構成ファイルを作成したら再構築● 構成ファイルを変更したら、再構築するまでは環境に反映されない29
構成ファイルの書き方を理解しよう30
実際の設定ファイルのイメージ31
主な設定項目32設定項目 説明name Dev container上で表示する名前image 開発環境に使用するコンテナイメージを選択build (別スライドにて)features コンテナ内で使用する追加ツールを定義。VS CodeやGitHubのUI上から選択することも可能。使用できるツールの一覧：https://containers.dev/featuresforwardPorts (省略)postCreateCommand コンテナ作成後にコンテナ内で任意のコマンドを実行できる。初めて開発を始める際に、お決まりで実行するnpm installなどを設定しておくと便利(似たものにonCreateCommand、updateContentCommandなどがある)customizations (別スライドにて)remoteUser (省略)
customizationsで設定できること● インストールすべき拡張機能の指定やVS Codeの設定が定義できる● settings.jsonでは、インデントサイズや使用する静的解析ツールなどが定義できる○ 設定はできるが.vscode/settings.jsonに設定は寄せておいた方がいいかも{"customizations": {"vscode": {"extensions": [],"settings": {},}}}33設定項目 説明extensions GitHub Codespacesでインストールするべき拡張機能のIDを指定できるsettings settings.jsonファイルで定義できる内容が指定できる
独自で定義したイメージを作成することはできる？A：できるDockerfileやdocker-compose.ymlのファイルを作成してから、構成ファイルに次の設定項目を追加することで、使用することができます。参照されるファイルの場所は、構成ファイルが格納されている場所が起点。設定により変更も可能。Dockerfileの場合{“build”: {“dockerfile”: “Dockerfile”,“context”: “.”}}34docker-compose.ymlの場合{“dockerComposeFile”: “docker-compose.yml”,“service”: “devcontainer”,“workspaceFolder”: “/workspaces/${localWorkspaceFolderBasename}”}
Remote - SSH35
Remote - SSH● リモートマシンにSSHを使って接続するための拡張機能● 開発サーバーや検証サーバーに直接入って、ログファイルなどを確認できる● CLIコマンドに不慣れな人やファイル編集やログファイルの調査などの時にUI機能を活用できる● 開発環境というよりは、CLI操作より少しGUI寄りの恩恵を受けながら作業したい時向け36
リモートな環境を用意(AWS編)● AWSでEC2を作成して、SSHの接続情報を取得37
SSHの設定ファイルを追加SSHの設定ファイル(~/.ssh/config)に追加Host remotesshHostName ec2-xxxx.ap-northeast-1.compute.amazonaws.comUser ec2-userIdentityFile ~/.ssh/xxxxx.pem38
SSHでEC2に接続● アクティビティバー＞リモートエクスプローラーを選択● リモートを選択して接続39
接続完了● Remote: SSHで接続した場合は、このように見える40
最後に41
● ローカル開発環境以外の選択肢に目を向けて、リモート開発に入門● 拡張機能などがプレビュー版なので、実践投入はもう少し様子見したい気持ち● ローカルを汚さない環境は魅力があるので、今後も前向きに調査継続● 今回で”リモート開発を完全に理解した”ので、実践投入してその後の経過をまとめたい最後に42
お知らせ5/28開催のOpen Source Conference 2023 Nagoya オフライン展示に参加しますかんたんDevOpsや開発環境、エディタに関するお悩み相談所としてお気軽にお立ち寄りください(「先週のセミナー見ました〜」と言って、立ち寄ってもらえると嬉しいです)色々と情報交換しましょう↓イベント情報はこちら↓https://event.ospn.jp/osc2023-nagoya/43
5/28 OSC名古屋で会いましょう＠名古屋市中小企業振興会館 3F 第2ファッション展示場44
おわり45
ismt7
shotatsuge
hk_shino
devopstaiwan
torounit
nikkei_engineer_recruiting
rigolon
pauli
autifyhq
bonotake
nktamago
line_developers_tw
tsujiba
searls
kastner
wjessup
bkeepers
orderedlist
holman
hannesfritz
jlugia
shpigford
paulrobertlloyd
danielanewman
quramy