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
380
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
15
AWS AmplifyではじめるDevOps
ismt7
0
40
VS CodeのDev Containersを活用して開発を効率化しよう
ismt7
1
630
Visual Studio CodeとGitHub Codespacesで始めるリモート開発入門
ismt7
0
60
Visual Studio Code リモート開発 スタートガイド
ismt7
1
17
これから始めたい人集合! ゼロから学ぶGit_GitHub入門
ismt7
0
57
Visual_Studio_Codeをインストールしよう_Windows編_.pdf
ismt7
0
51
Gitコマンドをインストールする方法①(Windows編)
ismt7
0
39
DevOpsを始めるために知っておきたい技術_クライアント開発環境_編___1_.pdf
ismt7
0
22
Other Decks in Technology
See All in Technology
New Relicで実践する外形監視
aeonpeople
1
120
Binary Authorizationと友達になろう / Let's be friends with Binary Authorization
iselegant
2
130
実践ジオフェンス 効率的に開発するために
navitimejapan
PRO
2
130
株式会社M2X エンジニアチーム紹介資料
m2xsoftware
0
320
Evolving DevOps Teams and Flexible Organizational Culture
kakehashi
1
130
Practical GenAI with Go - Elastic and Golang Sydney
adriancole
0
130
AWSを始めた頃に陥りがちなポイントをまとめてみた
oshanqq
1
1.7k
日経電子版から始まった内製開発の現在地と向き合っている課題/inhouse
nishiuma
0
230
いまからでも遅くない! コンテナでWebアプリケーションを 動かしてみよう(1)Gitハンズオン
nomu
0
280
Oracle Exadata Database Service(Dedicated Infrastructure):サービス概要のご紹介
oracle4engineer
PRO
0
9.3k
エンジニア採用を起点に取り組む組織の改善活動と課題、中長期のタスク管理/ #HRmethod
nishiuma
4
3.3k
[RSJ24] Object Retrieval in Large-Scale Indoor Environments Using Dense Text with a Multi-Modal Large Language Model
keio_smilab
PRO
0
220
Featured
See All Featured
Fontdeck: Realign not Redesign
paulrobertlloyd
80
5.1k
Atom: Resistance is Futile
akmur
261
25k
Raft: Consensus for Rubyists
vanstee
135
6.5k
What's new in Ruby 2.0
geeforr
340
31k
[RailsConf 2023] Rails as a piece of cake
palkan
44
4.6k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
103
47k
Why Our Code Smells
bkeepers
PRO
333
56k
What the flash - Photography Introduction
edds
67
11k
How To Stay Up To Date on Web Technology
chriscoyier
785
250k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
88
15k
Thoughts on Productivity
jonyablonski
65
4.2k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
165
48k
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