オンラインでのコード編集、デバッグ、デプロイのための WebIDE の設定 - Function Compute

WebIDE は、Function Compute が提供するオンライン統合開発環境 (IDE) です。Visual Studio Code (VS Code) のようなクラウドベースの開発体験を提供します。複雑なローカル開発環境を構築することなく、ブラウザで直接コードの記述、デバッグ、デプロイができます。このトピックでは、WebIDE の機能、UI の概要、および Function Compute コンソールで WebIDE を設定する方法について説明します。

制限事項

現在、WebIDE は Python、Node.js、PHP、およびカスタムランタイムのみをサポートしています。Java、Go、C# のランタイムではオンライン編集はサポートされていません。これらの言語では、コンパイルおよびパッケージ化された ZIP ファイルまたはバイナリファイルをアップロードする必要があります。
WebIDE は、ユーザーごとに 5 GB のストレージ容量を提供します。この上限を超えると、書き込み操作が失敗します。不要なファイルを定期的にクリアすることを推奨します。
関数のために WebIDE を開くと、インスタンスが自動的に起動します。このインスタンスは、約 1 vCPU と 1.5 GB のメモリを持つコンテナインスタンスに相当します。
WebIDE インスタンスの環境は、ご利用の関数の実行環境と一致します。ただし、このインスタンスは、カスタムレイヤーのロード、NAS または OSS のマウント、関数に設定された VPC 環境へのアクセスはできません。これらの機能が必要な場合は、コードをデプロイしてから関数を呼び出すか、専用 WebIDE を使用できます。
専用 WebIDE は現在、中国 (杭州)、中国 (上海)、中国 (北京)、中国 (張家口)、中国 (フフホト)、中国 (深セン)、中国 (香港)、シンガポール、日本 (東京)、ドイツ (フランクフルト)、米国 (バージニア) のリージョンでのみ利用可能です。他のリージョンで専用 WebIDE を使用するには、DingTalk ユーザーグループ (ID: 64970014484) に参加して申請してください。

WebIDE の UI

以下の図は、フルスクリーンモードの WebIDE インターフェイスを示しています。これは、① リソースマネージャー、② ファイルエディター、③ 操作バー、④ CLI ターミナルの 4 つのエリアで構成されています。 web-ide

① リソースマネージャー：コードファイルや依存関係ファイルなど、コードの構造を表示します。
② ファイルエディター：関数コードを編集します。編集が完了したら、右上のボタンをクリックしてコードをデバッグできます。オンライン環境とターミナル環境を同一にするために、③ 操作バーの デプロイメントコード をクリックします。
③ 操作バー：関数コードをデプロイおよびテストします。[フルスクリーンを終了] をクリックすると、操作バーは WebIDE インターフェイスの左上に配置されます。
④ CLI ターミナル：WebIDE インターフェイス上部のツールバーで、を選択してコマンドラインターミナルを開きます。ターミナルを使用して、コードのデバッグやサードパーティの依存関係のインストールができます。

WebIDE の設定

前提条件

関数が作成されていること。詳細については、「関数の作成」をご参照ください。

操作手順

Function Compute コンソールにログインします。左側のナビゲーションウィンドウで、[関数管理] > [関数] を選択します。
上部のナビゲーションバーで、リージョンを選択します。[関数] ページで、対象の関数をクリックします。
(任意) 関数詳細ページで、コード タブをクリックします。右上の [WebIDE の設定] をクリックします。[WebIDE の設定] パネルで、WebIDE のタイプを選択します。
[サーバーレス WebIDE] または [専用 WebIDE] を選択できます。
- サーバーレスバージョン
  デフォルトのバージョンです。無料で、VPC 内のリソースへのアクセスや NAS または OSS のマウントはサポートしていません。
- 専用バージョン
  インスタンスにカスタムレイヤーをロードさせたり、NAS または OSS をマウントしたり、サービスに設定された VPC 環境にアクセスしたりする必要がある場合は、[専用 WebIDE] を選択し、次のパラメーターを設定します。
  - インスタンス仕様
  - 実行タイムアウト時間
  専用 WebIDE を選択すると、Function Compute は関数のリージョンにおける VPC の状態に基づいて、VPC、vSwitch、および汎用 NAS ファイルシステムを再利用または自動的に作成します。自動的に作成されたリソースの料金については、「汎用 NAS の課金」をご参照ください。
WebIDE インターフェイスで、関数コードを記述およびテストし、必要に応じてサードパーティの依存関係をインストールします。
WebIDE インターフェイスの各エリアの概要については、「WebIDE の UI 概要」をご参照ください。

重要

専用 WebIDE を選択した場合は、関数が正しく実行されることを確認してください。そうしないと、WebIDE が開かない可能性があります。

よくある質問

WebIDE の読み込みに関する問題

関数詳細ページを更新するか、WebIDE 環境を迅速にリセットしてみてください。WebIDE 環境のリセット方法の詳細については、「関数の WebIDE の環境変数、ランタイム、レイヤーを迅速にリセットするにはどうすればよいですか？」をご参照ください。

専用 WebIDE

専用 WebIDE は、本質的にはお客様のアカウントにデプロイされた Function Compute (FC) 関数です。その名前は _webide-server- で始まります。

専用 WebIDE を使用すると、インスタンスはカスタムレイヤーをロードし、NAS または OSS をマウントし、サービスに設定された VPC にアクセスできます。これにより、ターミナル環境がオンラインの実行環境と同一になり、開発とデバッグが簡素化されます。また、インスタンス仕様を選択して、例えば CPU とメモリの仕様を増やすことで、WebIDE のパフォーマンスを向上させることもできます。

専用 WebIDE を使用する場合、基盤となる関数はお客様自身のアカウントで実行されます。そのため、以下の費用はお客様の負担となります：

Function Compute での関数呼び出しとリソース使用料金。詳細については、「課金概要」をご参照ください。
マウントされた NAS ファイルシステムに関連する料金。詳細については、「汎用 NAS の課金」をご参照ください。

テスト結果の不一致

WebIDE はコードの迅速なテスト、プロジェクトのビルド、依存関係のインストールに役立ちますが、WebIDE 環境は実際の Function Compute 実行環境ではありません。WebIDE では、カスタムレイヤー、マウントされた NAS または OSS、VPC を介してアクセスされるリソースを直接テストすることはできません。

この問題を回避するには、専用 WebIDE を使用できます。または、コードを編集した後、デプロイメントコード をクリックし、次に 関数のテスト をクリックしてテストを実行します。

WebIDE 環境のリセット

関数詳細ページまたは WebIDE インターフェイスを更新すると、オンライン関数の最新の環境変数、レイヤー、およびランタイムが WebIDE インスタンスに同期されます。ターミナルで env コマンドを実行して、最新の関数環境変数やその他の情報を表示できます。

ワークスペースの保持

デフォルトでは、ワークスペースは 48 時間保持されます。48 時間連続して WebIDE で関数を開かない場合、ワークスペースの内容は削除されます。

また、コンソールまたは SDK ツールを使用してオンラインコードが変更されると、関数の code checksum が変更されます。WebIDE を更新または再度開くと、ワークスペースの内容は自動的に最新のオンラインコードに更新されます。

コードのデバッグ

はい。WebIDE でさまざまなランタイム向けの組み込み VS Code デバッグプラグインを直接使用できます。カスタムランタイム内の他のあまり一般的でない言語については、適切な VS Code プラグインをインストールできます。

例えば、Python 3.9 の場合、次の図の赤い枠で示されているように、ハンドラー関数を実行するための補助コードを追加する必要があります。

Git プラグインとコードの差分

いいえ。WebIDE で初めて関数コードパッケージを開くと、WebIDE は自動的に git init を実行して、現在のコードとオンラインコードの差分を表示します。一度 [関数のデプロイ] をクリックすると、ターミナル内のコードがオンラインコードと同一であることを示す コミット が自動的に生成されます。次の図では、save function with codechecksum xxxx は、関数のデプロイが実行されたことを示します。この機能は、ユーザー体験を向上させるために設計されています。

重要

関数コードパッケージには git レコードを含めないことを推奨します。コードをパッケージ化する際に .git ディレクトリを削除することで、WebIDE での問題を回避できます。

RAM ユーザーのワークスペース分離

Function Compute WebIDE は、同じ Alibaba Cloud アカウントの RAM ユーザーに対するワークスペースの分離をサポートしています。例えば、RAM ユーザー A が WebIDE A を開き、RAM ユーザー B が WebIDE B を開いたとします。RAM ユーザー B には、RAM ユーザー A が自分のワークスペースで行ったコードの変更は表示されません。この場合、RAM ユーザー A と RAM ユーザー B に表示されるコードは異なります。

RAM ユーザー A と RAM ユーザー B の両方が、自分のワークスペースのコードとオンラインの関数コードとの差分を確認できます。詳細については、「関数を修正すると、git プラグインにコードの差分が表示されます。これは WebIDE が関数コードをホストしているということですか？」をご参照ください。

ターミナルの読み込みに関する問題

以下の手順で問題をトラブルシューティングできます：

ネットワーク設定が正しいか確認します。例えば、ローカルクライアントにアクセスを制限するプロキシがあるか、WebSocket プロトコルが無効になっていないかを確認します。WebIDE はリアルタイム通信と対話のために WebSocket を使用します。WebSocket が無効になっていると、WebIDE は正常に実行できません。
ローカルクライアントが海外リージョンの関数を開いているかどうかを確認します。ローカルネットワークの国際接続性が低い場合、海外リージョンへの接続が遅くなったり、失敗したりすることがあります。
コードパッケージが大きすぎないか確認します。コードパッケージが大きい場合、コードのアップロードやデプロイに時間がかかることがあります。コードパッケージのサイズを最適化してから、再度試してください。

上記の手順を実行しても問題が解決しない場合は、お問い合わせください。

Function Compute:WebIDE の使用