Visual Studio CodeのDev Containersを使って構築した開発環境を体験するハンズオンです。
このハンズオンでは、既に用意されている開発環境を使ってAPIサーバーの改修を行います。
APIサーバーは、PythonのFastAPIを使って構築されています。
ハンズオンでは、使用するプログラミング言語やライブラリーの知識がなくても問題ありません。資料の指示に従って進めていただければ大丈夫です。
このハンズオンでは、VS Code Dev Containersを使ってリモート開発環境に接続します。
リモート開発上では、APIサーバーとDBサーバーがDockerコンテナ上で動作しています。
| コンテナ | 用途 |
|---|---|
| APIサーバー | バックエンドアプリケーションの実行環境 FastAPI(Python)を使用。 |
| DBサーバー | データベースの実行環境 PostgreSQLを使用。 |
リモートマシンは、ニフクラのクラウドサービスを使用します。 リモートマシンに使用できる環境は、各種クラウドサービスや社内のオンプレミスサーバーなどがあります。 他にもローカルマシーンのDockerコンテナ上に構築でき、リモートマシンに接続するよりも少しだけ簡単です。
リモートマシン上の開発環境にアクセスするにはSSH接続をします。
今回は、Visual Studio Codeのリモートエクスプローラーを使いリモートマシンに接続します。
その際に使用する拡張機能は「Remote - SSH」です。
「🤖」は、Dev Containersの仕組みを使って自動で実行されるタスクです。
1-1. Visual Studio Codeが起動できる
通常のアプリケーションを起動する手順と同じように、Visual Studio Codeを起動します。
1-2. Gitコマンドが使用できる
コマンドを実行して、Gitのバージョンが表示されることを確認します。
もしバージョンが正しく表示されない場合は、Gitのインストールが正しくできていない可能性があります。
問題解決にサポートが必要な場合は、進行担当者にお知らせください。
git versionリモート開発をするために必要な拡張機能をVisual Studio Codeにインストールします。
- Visual Studio Codeを開く
- アクティビティバーから拡張機能を表示する
- 検索欄でRemote Developmentと入力してエンターを押す
- 検索結果が表示されたら、
Remote Developmentをクリックしてインストールする - アクティビティバーに
リモートエクスプローラーが追加されたことを確認する
もし表示されていない場合
アクティビティバーに表示されない場合は、 アクティビティバー上で右クリックしてリモートエクスプローラーが一覧上で非表示(チェックマークがついていない状態)設定になっている場合は、クリックして表示状態に設定を変更します。
もし、この一覧上でも表示されていない場合は、コマンドをパレット（ショートカットはCommand + Shift + P）を表示してからDeveloper: Reload Windowを実行してVisual Studio Code自体を再読み込みします。
それでも解決しない場合は、進行担当者にお知らせ下さい。
このハンズオンでは、SSH公開鍵認証方式を使用して、リモートマシンに接続して作業します。
SSH公開鍵認証方式にはSSH公開鍵と秘密鍵のペアが必要です。
このハンズオンでは、受け渡し作業の簡素化のためにGitHubに登録している公開鍵を接続先のサーバーに登録します。
GitHubに登録したSSH鍵のペアが分からない人向け
通常GitHubのプライベートリポジトリからソースコードを取得する際は、SSHまたはHTTPSのいずれかを使って接続します。
GitHubページにアクセスして設定画面のSSH and GPG keysからSSH鍵が登録されているかを確認できます。
登録されている公開鍵のペアとなる秘密鍵がどれかわからない場合は、新しくSSH鍵を作成します。
SSH鍵を作成してGitHubに登録する方法は、GitHub公式ドキュメントの新しい SSH キーを生成して ssh-agent に追加するを参照ください。
- アクティビティバーからリモートエクスプローラーを開く
- 上部にあるリストダウンから
リモート(トンネル/SSH)を選択する - SSHセクションの右端にある「+」ボタンを押して、SSHコマンドを貼り付けてエンターを押す
- Configファイルの登録先を聞かれたら、
~/.ssh/configを選択する - SSHセクションにある歯車アイコンをクリックして、先ほど入力した内容が反映されていることを確認する
リモート(トンネル/SSH)をクリックして、Configに登録されている内容が表示されることを確認する- 接続したい環境上にマウスカーソルを合わせて、
新しいウィンドウで接続...をクリックする - 新しいウィンドウでVS Codeが起動することを確認する
VS Codeに貼り付けるSSHコマンドの作成方法
<リモート環境のIPアドレス>は、進行担当者からお知らせします。
<GitHubに登録しているSSH鍵の秘密鍵ファイルのパス>は、~/.ssh/フォルダ内に格納されているSSHキーのうちGitHubに登録している秘密鍵を選択します。
ssh root@<リモート環境のIPアドレス> -i <GitHubに登録しているSSH鍵の秘密鍵ファイルのパス>Configファイルに登録された内容を変更したい場合
SSHセクションの歯車アイコンをクリックし、通常のエディタ操作のようにファイルを編集して変更ができます。
前の手順でリモートマシンに接続ができました。
ここからDev Containersを使用して開発環境を起動します。
通常はDockerなどのCLIツールのインストールが必要ですが、ハンズオン環境構築時にプリインストール済みです。
今回はバックエンド開発としてAPIサーバーの機能変更を行いながら、リモート開発環境上での開発を体験していただきます。
詳しくは、プログラミング言語にPythonを使用し、フレームワークにFastAPIを使用しています。また、DBサーバーはPostgreSQLです。
これらを使った開発を行うためには、事前にさまざまなツールのインストールなどが必要ですが、今回はリモート開発のメリットの一つである環境構築の部分の自動化を体験していただきます。
詳しい設定などについては、Dockerfile、docker-compose.yml、devcontainer.jsonなどに既述されています。
では、Dev Containersを起動してみましょう。
- アクティビティバーのリモートエクスプローラーを開開く
- 上部にあるリストダウンから
開発コンテナーを選択 - 開発コンテナセクションにある「+」ボタンを押し、
コンテナボリュームにリポジトリを複製...を選択 GitHubを選択VirtualTech-DevOps/workshop-backend-20230826を選択してエンターを押す- ブランチ名は
mainを選択してエンターを押す - ボリュームの選択は
新しいボリュームを作成します...を選択してエンターを押す - ターゲットのフォルダ名は表示されたデフォルト値のままエンターを押す
このハンズオンでは、PythonとPostgreSQLの実行環境が必要ですが、Dockerの仕組みを使ってあらかじめDockerfileとdocker-compose.ymlを用意しています。
Dev Containersでは、このDockerfileとdocker-compose.ymlを使って環境を構築します。
poetryを使ってパッケージをインストールします。
通常はpoetry installコマンドを実行して依存パッケージをインストールしますが、Dev Containersの仕組みを使って自動でインストールされるようにしています。
マイグレーションツールの1つであるalembicを使ってデータベースの初期構築を行います。
通常はalembic upgrade headコマンドを実行してデータベースを作成しますが、Dev Containersの仕組みを使って自動で作成されるようにしています。
GitHubを使用する際は、Gitの設定でユーザ名とメールアドレスを設定する必要があります。
普段使用しているものがあればそれを設定してください。初めての方は次のように設定してください。
| 項目 | 設定内容 |
|---|---|
<ユーザ名> |
GitHub IDを入力 |
<メールアドレス> |
GitHubに登録しているメールアドレスを入力 |
※もし入力する内容に抵抗がある場合は、進行担当者にお知らせください。
git config --local user.name "<ユーザ名>"
git config --local user.email "<メールアドレス>"タスク機能を使用して設定する場合
Command + Pを押して、Tasks: Run Taskを選択してください。
Git: Set git config user.name and user.emailを選択してください。
画面の指示に従ってユーザ名とメールアドレスを入力してください。
このハンズオンでは、よく使うコマンドをMakefileに集約しています。
アプリケーションを起動する際は、makeコマンドを使用してください。
make start次のようにApplication startup complete.と表示されたら、https://localhost:8000/docsにアクセスしてAPIのドキュメントが表示されることを確認してください。
INFO: Will watch for changes in these directories: ['/workspaces/workshop-backend-template']
INFO: Uvicorn running on http://127.0.0.1:8000 (Press CTRL+C to quit)
INFO: Started reloader process [12433] using WatchFiles
INFO: Started server process [12440]
INFO: Waiting for application startup.
INFO: Application startup complete.ハンズオンお疲れ様でした。
最後にハンズオンで使用したローカルマシン上のリソースを削除します。
接続先のリモートマシン環境は、ハンズオン終了後に環境が削除されますが、ローカルマシン上で保持されているRemote - SSHの接続先情報を削除してください。
Remote - SSHの接続先を削除する方法
- アクティビティバーのリモートエクスプローラーを開く
- 上部にあるリストダウンから
リモート(トンネル/SSH)を選択 - SSHセクションの右端にある歯車マークを押し、
/Users/<ユーザー名>/.ssh/configを選択 - config内にある
Host xxx.xxx.xxx.xxxの行を削除する
既に登録していた他の接続先情報を削除しないように注意してください。
本日のハンズオンでは、プログラミングの細かい部分をスキップさせて頂きました。
もし、細かい内容に興味がある方は、以下の内容を参考にしてください。
参加者は、【1】のみを実施してください。
後ほど講師役の方が【2】を実施してから参加者の方にプルリクエストを投げます。