Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Visual Studio Codeで始めるリモート開発入門
Search
Ishimoto Tatsuya
May 20, 2023
Technology
1
450
Visual Studio Codeで始めるリモート開発入門
「 Open Source Conference 2023 Online/Nagoya」で登壇した際に投影したスライドです。
Ishimoto Tatsuya
May 20, 2023
Tweet
Share
More Decks by Ishimoto Tatsuya
See All by Ishimoto Tatsuya
Visual Studio CodeのDev Containersを使って開発環境構築してみよう(2024/09/07版)
ismt7
0
150
AWS AmplifyではじめるDevOps
ismt7
0
57
VS CodeのDev Containersを活用して開発を効率化しよう
ismt7
1
730
Visual Studio CodeとGitHub Codespacesで始めるリモート開発入門
ismt7
0
75
Visual Studio Code リモート開発 スタートガイド
ismt7
1
27
これから始めたい人集合! ゼロから学ぶGit_GitHub入門
ismt7
0
71
Visual_Studio_Codeをインストールしよう_Windows編_.pdf
ismt7
0
66
Gitコマンドをインストールする方法①(Windows編)
ismt7
0
58
DevOpsを始めるために知っておきたい技術_クライアント開発環境_編___1_.pdf
ismt7
0
25
Other Decks in Technology
See All in Technology
バクラクの組織とアーキテクチャ(要約)2025/01版
shkomine
13
2.9k
[TechNight #86] Oracle GoldenGate - 23ai 最新情報&プロジェクトからの学び
oracle4engineer
PRO
1
170
Creative Pair
kawaguti
PRO
1
130
エラーバジェット枯渇の原因 - 偽陽性との戦い -
phaya72
1
100
Fin-JAWS第38回reInvent2024_全金融系セッションをライトにまとめてみた
mhrtech
1
100
Server Side Swift 実践レポート: 2024年に案件で採用して見えた課題と可能性
yusuga
1
420
攻撃者の視点で社内リソースはどう見えるのかを ASMで実現する
hikaruegashira
4
2.1k
[2024年10月版] Notebook 2.0のご紹介 / Notebook2.0
databricksjapan
0
1.6k
Postman Vaultを使った秘密情報の安全な管理
nagix
3
120
Power BI は、レポート テーマにこだわろう!テーマのティア表付き
ohata_ds
0
120
GraphRAG: What I Thought I Knew (But Didn’t)
sashimimochi
1
230
【5分でわかる】セーフィー エンジニア向け会社紹介
safie_recruit
0
18k
Featured
See All Featured
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
59k
Fantastic passwords and where to find them - at NoRuKo
philnash
50
3k
Fontdeck: Realign not Redesign
paulrobertlloyd
82
5.3k
Navigating Team Friction
lara
183
15k
Building Adaptive Systems
keathley
39
2.4k
Adopting Sorbet at Scale
ufuk
74
9.2k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
365
25k
Building Better People: How to give real-time feedback that sticks.
wjessup
366
19k
The Cult of Friendly URLs
andyhume
78
6.2k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
30
2.1k
Fireside Chat
paigeccino
34
3.2k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Transcript
Visual Studio Codeで始める リモート開発入門 日本仮想化技術株式会社 VirtualTech.jp 2023/05/20 1
2 自己紹介
• リモート開発って何? • Visual Studio Codeといえば、ローカルマシンで動くデスクトップ版のエディタじゃないの? • 実際に使ってみようとしたらどうすればいいの? 今回の話 3
リモート開発とは? 4
リモート開発とは? • コンテナやリモートマシン、Windows Subsystem for Linux(WSL)上に開発環境を構築できる機 能 • ソースコードや実行環境、CLIツールなどはすべてリモート環境上に構築する メリット
• ローカルマシンの構成に影響を与えないように、開発環境を分離できる ◦ ローカルにソースコードを置く必要がない • 開発プロジェクトのメンバー間で一貫した開発環境を維持することができる • ローカルマシン以外で実行されているアプリケーションをデバッグできる 5 https://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 container 12
GitHub Codespacesとは 13 • クラウドでホストされる開発環境 ◦ GitHubのDockerコンテナ内でホストされる ◦ Ubuntuイメージから作成 ▪
人気の高いプログラミング言語の実行環境がプリインストール済み • 従量課金制 ◦ 毎月無料枠の付与あり ▪ 無料枠を超えて使用する場合には、設定変更が必要 • スペック ◦ 最小:2コア、8GB RAM、32GBストレージ ◦ 最大:32コア、64GB RAM、128GBストレージ • Configuration-as-Code:CaC ◦ 構成ファイルでプロジェクトをカスタマイズできる • 自動停止 ◦ 非アクティブ状態が30分間続くと自動で実行停止(時間は、設定により変更可能)
14 https://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.codespaces 22
拡張機能を使用する際の注意点 • なにかとお世話になることが多いからこそできるだけ安全に使いたい • マーケットプレイスからインストールしても100%安全ではない ◦ 2021年に拡張機能を悪用したサイバー攻撃がニュースで話題 ◦ マーケットプレイス側で配信時などにチェックされているが 「羊の姿をしたオオカミ」が潜んでいる可能性もある
◦ 拡張機能にコード署名の付与開始して、移行期間中 ▪ v1.75でアナウンスされた ▪ 2022/11以降のアップロード分は必須。他は順次 ポイント • マーケットプレイスからダウンロード • 認証バッチが付いている ◦ 2021年に追加された機能 ◦ Marketplace側で配信者とドメイン所有者が一致しているか確認済み • ダウンロード数 ◦ 同じ名前でも大きく違う場合があり、気づくきっかけになる 23 https://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/features forwardPorts (省略) 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”: “.” } } 34 docker-compose.ymlの場合 { “dockerComposeFile”: “docker-compose.yml”, “service”: “devcontainer”, “workspaceFolder”: “/workspaces/${localWorkspaceFolderBasename}” }
Remote - SSH 35
Remote - SSH • リモートマシンにSSHを使って接続するための拡張機能 • 開発サーバーや検証サーバーに直接入って、ログファイルなどを確認できる • CLIコマンドに不慣れな人やファイル編集やログファイルの調査などの時にUI機能を活用できる •
開発環境というよりは、CLI操作より少しGUI寄りの恩恵を受けながら作業したい時向け 36
リモートな環境を用意(AWS編) • AWSでEC2を作成して、SSHの接続情報を取得 37
SSHの設定ファイルを追加 SSHの設定ファイル(~/.ssh/config)に追加 Host remotessh HostName ec2-xxxx.ap-northeast-1.compute.amazonaws.com User ec2-user IdentityFile ~/.ssh/xxxxx.pem
38
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