はじめに
こんにちは！エンタープライズクラウド事業部の永井です。
ブラウザベースのIDE利用が活発となってきた昨今、AWS上で完結するIDEとプライベートなGit環境が必要となるニーズが発生する事があります。
当記事では、AWSで完結するブラウザベースのIDE（Amazon SageMaker Studio Code Editor）の構築手順について記載します。
Code Editorは、AWS Cloud9の代替え、または後継のような立ち位置のサービスであり、AWSマネージドでネットワークリソースやIDE稼働環境（EC2）を作成し、ブラウザベースでアクセス可能とします。
また、記事の後半ではCode Editorで稼働させたWebアプリケーション（localhost）の動作確認方法についても言及します。
※プライベートなGit環境（EC2 on Gitea）の構築手順につきましては、次回の記事をご参照ください。
概要
全体の構成図は下記の通りです。
当記事では、赤破線で囲われているリソースを構築します。
※出来るだけ要点をかいつまんで記載します。
ざっくりまとめ
- ネットワークリソース＞ドメイン＞プロジェクト＞IDE稼働環境（EC2）の順に作成
- プロジェクトからブラウザベースのIDE（VSCode）へアクセス
- Webアプリケーション（localhost）の動作確認は、VSCode拡張機能である”Browse Lite”を利用
- 利用者を追加する場合は、ドメイン＞プロジェクトへそれぞれユーザを追加
ネットワークリソース作成
Amazon SageMaker Studioの機能によって、VPC等のネットワークリソースを一括で作成します。（AWS CloudFormation StackSets利用）
※新規作成が推奨されていますが、既存のネットワークリソースを利用する場合はスキップ可能です。
- スタックのクイック作成ページへ遷移
- 「Amazon SageMaker」＞「ドメイン」＞「ドメインを作成」を選択
- 「VPCを作成」を選択
- 「Amazon SageMaker」＞「ドメイン」＞「ドメインを作成」を選択
- スタックの作成
- 「スタックの作成」を選択
- デフォルトのまま「スタックの作成」選択で問題ありません
- [パラメータ]欄について、今回はデフォルトの”false”を推奨します
- “true”にした場合、データ分析やAI関連など数十個のVPC Endpointが作成されます（ランニングコストに注意が必要です）
- “false”の場合はS3アクセス用のVPC Endpointのみ作成されます
- [タグ]欄は必要に応じて設定してください
- [パラメータ]欄について、今回はデフォルトの”false”を推奨します
- AWS CloudFormation StackSetsが起動しネットワークリソースが作成されます
- VPC×1、プライベートサブネット×3、パブリックサブネット×1等が作成されます
- 後述するIDE稼働環境（EC2）は、プライベートサブネットへ作成する形となります
- デフォルトのまま「スタックの作成」選択で問題ありません
- 「スタックの作成」を選択
ドメイン作成
基盤となる（共通設定を定義する）ドメインを作成します。
- ドメイン作成ページへ遷移
- 「Amazon SageMaker」＞「ドメイン」＞「ドメインを作成」を選択
- 「Amazon SageMaker」＞「ドメイン」＞「ドメインを作成」を選択
- ドメイン作成
- 「続行」を選択
- デフォルトのまま「続行」でも問題ありません
- [名前]欄は任意の名称へ変更可能です
- [サブネット]欄はプライベートサブネットを3つ指定する必要があります
- デフォルトのまま「続行」でも問題ありません
- ログインユーザ設定&「ドメインを作成」を選択
- Amazon SageMaker Studioは、SSOユーザまたはIAMユーザでログインする必要があり、こちらのページでIAM Identity Centerの設定を行います
- 今回の例ではSSOユーザによるアクセスのため、IAM Identity Centerに存在するSSOユーザを指定しています
- ログインユーザにはAmazon SageMaker Studioへのアクセス権限が必要となるため、事前に「AmazonSageMakerFullAccess」ポリシー等のアタッチを実施してください
- 「ドメインを作成」を選択します
- ドメインが作成されます
- Amazon SageMaker Studioは、SSOユーザまたはIAMユーザでログインする必要があり、こちらのページでIAM Identity Centerの設定を行います
- 「続行」を選択
プロジェクト作成
ドメイン作成後、ワークスペースとなるプロジェクトを作成します。
- 統合スタジオへログイン
- 作成したドメインの「統合スタジオを開く」を選択
- ログイン方法を選択
- 今回の例では「Sign in with SSO」を選択します
- 今回の例では「Sign in with SSO」を選択します
- 作成したドメインの「統合スタジオを開く」を選択
- プロジェクト作成
- 「Select a project」＞「Create project」を選択
- [Project name]欄へ任意のプロジェクト名を入力し、「All capabilities」を選択
- 「Continue」を選択してデフォルトのままページ遷移後、「Create project」を選択
- プロジェクトが作成されます
- 表示されている[Project files(3)]は、プロジェクトで共有しているS3バケットのファイルです
※こちらはIDE稼働環境（EC2）作成後、自動でマウントされます
- 「Select a project」＞「Create project」を選択
IDE稼働環境（EC2）作成
プロジェクト作成後、個人用の開発環境としてIDE稼働環境（EC2）を作成します。
- プロジェクトから「Compute」＞「Spaces」タブを選択
- 「Spaces」タブ
- こちらのページでIDE稼働環境（EC2）の作成・起動・停止・削除・IDEアクセスを実施します
- 「Spaces」タブへのページ遷移やブラウザを更新すると、デフォルトで作成されているJupyterLabインスタンスが自動起動しますが、1時間のアイドルタイム経過で自動停止します
※現時点では、デフォルトで作成されているJupyterLabインスタンスを削除する手段はありません
- 「Spaces」タブ
- IDE稼働環境（EC2）作成
- 「Create space」を選択
- [Name]欄へ任意の名前を入力
- [Application]欄で”Code Editor”を選択
- 「Create and start space」を選択
- 他の項目も任意で変更可能です
- EC2のインスタンスタイプの最小は”ml.t3.medium”です
- EC2インスタンスはAWSマネージドな領域で作成され、マネジメントコンソール上からは参照出来ません
- デフォルト設定で、1時間のアイドルタイム経過で自動停止します
- IDE稼働環境（EC2）が作成され、起動されます
- 「Create space」を選択
IDE利用
IDEアクセス
- IDE稼働環境（EC2）起動後、「Open」を選択
- 警告が表示されるため、チェックを入れて「Yes,I trust the authors」を選択
IDE概要
- ブラウザベースでVSCodeが利用可能
- ターミナルについて
- ターミナルは左上のハンバーガーメニューから表示可能です
- ターミナルは左上のハンバーガーメニューから表示可能です
- 日本語化について
- ローカルのVSCode同様に拡張機能をInstallして、使用法記載の手順で日本語化可能です
- ローカルのVSCode同様に拡張機能をInstallして、使用法記載の手順で日本語化可能です
- ディレクトリ構成について
- VSCodeの初期状態では【/home/sagemaker-user/shared】がマウントされており、このディレクトリ配下のファイルは同じプロジェクト内のEC2で共有されてしまいます
そのため【/home/sagemaker-user/】配下へ、個人の作業領域としてのディレクトリ作成を推奨します
※ 【/home/sagemaker-user/】配下以外で作成した場合、EC2停止時にファイルが削除されます（揮発性）
- VSCodeの初期状態では【/home/sagemaker-user/shared】がマウントされており、このディレクトリ配下のファイルは同じプロジェクト内のEC2で共有されてしまいます
- AWSリソースへのアクセスについて
- クレデンシャル情報（アクセスキー/シークレットキー）をターミナルなどから設定する事で、アクセス可能です
Webアプリケーション(localhost)動作確認
VSCodeのターミナルからWebアプリケーションを稼働させて、[localhost:port]でリクエスト待機状態のアドレスへアクセスします。
VSCodeへ”Browse Lite”という拡張機能を導入して、VSCode上のブラウザからWebアプリケーションへのアクセスを実現します。
※VSCodeに付帯している”SimpleBrowser”はローカル端末のブラウザと同じ挙動をするため、AWSのマネジメント領域で稼働しているサーバへのアクセスは失敗します。
※ポートフォワーディングも現時点では未対応です。
Browse Lite導入手順
- Chromeインストール
- Browse LiteはChromeを利用するため、VSCodeのターミナルからインストールコマンドを実行します
$ wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb $ sudo dpkg -i google-chrome-stable_current_amd64.deb $ sudo apt install -f -y ※[sudo dpkg～]実行時に依存関係ライブラリの未導入でErrorが発生しますが、[$ sudo apt install –f -y]で導入完了します $ google-chrome -version $ which google-chrome ※導入完了確認、パス確認用のコマンドです
- Browse LiteはChromeを利用するため、VSCodeのターミナルからインストールコマンドを実行します
- Browse Liteインストール
- VSCodeの拡張機能からBrowse Liteをインストールします
- VSCodeの拡張機能からBrowse Liteをインストールします
- Browse Liteセットアップ
- VSCodeのターミナルで[$ which google-chrome]を実行し、Chromeのパスを取得します
$ which google-chrome
- 取得したChromeのパスをVSCodeの設定[Browse-lite: Chrome Executable]へ登録します
- VSCodeのターミナルで[$ which google-chrome]を実行し、Chromeのパスを取得します
- Browse Lite利用
- VSCodeから「Ctrl＋Shift＋P」でコマンドパレットを開き、[Browse Lite: Open]と入力して選択します
- 表示されたブラウザのURL欄へWebアプリケーションのアドレスを入力し、Enterでアクセスします
- VSCodeから「Ctrl＋Shift＋P」でコマンドパレットを開き、[Browse Lite: Open]と入力して選択します
利用者追加
作成したプロジェクトへ利用者を追加したい場合は、ドメインとプロジェクトでそれぞれユーザ追加設定を実施します。
- ドメインへユーザ追加
- ドメインページ下部の「ユーザ管理」タブより、「追加」を選択してユーザを追加
- ドメインページ下部の「ユーザ管理」タブより、「追加」を選択してユーザを追加
- プロジェクトへユーザ追加
- 統合スタジオから対象のプロジェクトへ遷移し、「Members」ページの「Add members」を選択してユーザを追加
- 統合スタジオから対象のプロジェクトへ遷移し、「Members」ページの「Add members」を選択してユーザを追加
本記事ではここまでです。
続きは、次回の記事をご参照ください。
簡単30秒