前提条件ステップ 1: HTMLページを準備するステップ 2: DCVViewer React コンポーネントの認証、接続、レンダリングを行う AWS-UI から Cloudscape Design System への更新

Amazon DCV Web UI を使用する SDK

次のチュートリアルでは、Amazon DCVサーバーに対して認証し、接続して、Amazon DCV Web UI から DCVViewer React コンポーネントをレンダリングする方法を示しますSDK。

トピック

前提条件
ステップ 1: HTMLページを準備する
ステップ 2: DCVViewer React コンポーネントの認証、接続、レンダリングを行う
AWS-UI から Cloudscape Design System への更新

前提条件

React、ReactDOM、Cloudscape Design Components React、Cloudscape Design Global Styles、Cloudscape Design Design Tokens をインストールする必要があります。


$ npm i react react-dom @cloudscape-design/components @cloudscape-design/global-styles @cloudscape-design/design-tokens

また、Amazon DCV Web Client SDK のダウンロードも必要になります。これを行う方法については、 step-by-stepAmazon DCV Web Client の開始方法 SDK「」を参照してください。

Amazon DCV Web UI の外部依存関係であるため、dcvモジュールをインポートするためのエイリアスを作成する必要がありますSDK。例えば、webpack を使用してウェブアプリケーションをバンドルする場合、以下のように resolve.alias オプションを使用できます。


const path = require('path');

module.exports = {
  //...
  resolve: {
    alias: {
      dcv: path.resolve('path', 'to', 'dcv.js'),
    },
  },
};

バンドルにロールアップを使用している場合は、@rollup /plugin-alias をインストールして以下のように使用できます。


import alias from '@rollup/plugin-alias';
const path = require('path');

module.exports = {
  //...
  plugins: [
    alias({
      entries: [
        { find: 'dcv', replacement: path.resolve('path', 'to', 'dcv.js') },
      ]
    })
  ]
};

ステップ 1: HTMLページを準備する

ウェブページでは、必要な JavaScript モジュールをロードする必要があり、アプリケーションのエントリコンポーネントidがレンダリングされる有効な <div> HTML 要素が必要です。

例:


<!DOCTYPE html>
<html lang="en" style="height: 100%;">
  <head>
    <title>DCV first connection</title>
  </head>
  <body style="height: 100%;">
    <div id="root" style="height: 100%;"></div>
    <script type="module" src="index.js"></script>
  </body>
</html>

ステップ 2: `DCVViewer` React コンポーネントの認証、接続、レンダリングを行う

このセクションでは、ユーザー認証プロセスを完了する方法、Amazon DCVサーバーを接続する方法、および DCVViewer React コンポーネントをレンダリングする方法を示します。

まず、index.js ファイルから React、ReactDOM、および最上位の App コンポーネントをインポートします。


import React from "react";
import ReactDOM from 'react-dom';
import App from './App';

アプリケーションの最上位のコンテナノードをレンダリングします。


ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById("root")
);

App.js ファイルで、Amazon DCV Web Client をESMモジュールSDKとしてインポートし、Amazon DCV Web UI から DCVViewer React コンポーネントSDK、Reactおよび Cloudscape Design Global Stylesパッケージをインポートします。


import React from "react";
import dcv from "dcv";
import "@cloudscape-design/global-styles/index.css";
import {DCVViewer} from "./dcv-ui/dcv-ui.js";

認証が成功した場合、Amazon DCV Server に対して認証しSDK、Amazon DCV Web UI から DCVViewer React コンポーネントをレンダリングする方法の例を次に示します。


const LOG_LEVEL = dcv.LogLevel.INFO;
const SERVER_URL = "https://your-dcv-server-url:port/";
const BASE_URL = "/static/js/dcvjs";

let auth;

function App() {
  const [authenticated, setAuthenticated] = React.useState(false);
  const [sessionId, setSessionId] = React.useState('');
  const [authToken, setAuthToken] = React.useState('');
  const [credentials, setCredentials] = React.useState({});

  const onSuccess = (_, result) => {
    var { sessionId, authToken } = { ...result[0] };

    console.log("Authentication successful.");

    setSessionId(sessionId);
    setAuthToken(authToken);
    setAuthenticated(true);
    setCredentials({});
  }

  const onPromptCredentials = (_, credentialsChallenge) => {
    let requestedCredentials = {};

    credentialsChallenge.requiredCredentials.forEach(challenge => requestedCredentials[challenge.name] = "");
    setCredentials(requestedCredentials);
  }

  const authenticate = () => {
    dcv.setLogLevel(LOG_LEVEL);

    auth = dcv.authenticate(
      SERVER_URL,
      {
        promptCredentials: onPromptCredentials,
        error: onError,
        success: onSuccess
      }
    );
  }

  const updateCredentials = (e) => {
    const { name, value } = e.target;
    setCredentials({
      ...credentials,
      [name]: value
    });
  }

  const submitCredentials = (e) => {
    auth.sendCredentials(credentials);
    e.preventDefault();
  }

  React.useEffect(() => {
    if (!authenticated) {
      authenticate();
    }
  }, [authenticated]);

  const handleDisconnect = (reason) => {
    console.log("Disconnected: " + reason.message + " (code: " + reason.code + ")");
    auth.retry();
    setAuthenticated(false);
  }

  return (
    authenticated ?
    <DCVViewer
      dcv={{
        sessionId: sessionId,
        authToken: authToken,
        serverUrl: SERVER_URL,
        baseUrl: BASE_URL,
        onDisconnect: handleDisconnect,
        logLevel: LOG_LEVEL
      }}
      uiConfig={{
        toolbar: {
          visible: true,
          fullscreenButton: true,
          multimonitorButton: true,
        },
      }}
    />
    :
    <div
      style={{
        height: window.innerHeight,
        backgroundColor: "#373737",
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
      }}
    >
      <form>
        <fieldset>
          {Object.keys(credentials).map((cred) => (
            <input
              key={cred}
              name={cred}
              placeholder={cred}
              type={cred === "password" ? "password" : "text"}
              onChange={updateCredentials}
              value={credentials[cred]}
            />
          ))}
        </fieldset>
        <button
          type="submit"
          onClick={submitCredentials}
        >
          Login
        </button>
      </form>
    </div>
  );
}

const onError = (_, error) => {
  console.log("Error during the authentication: " + error.message);
}

export default App;

promptCredentials 関数、error 関数、success 関数は、必須コールバック関数であり、認証プロセスで定義する必要があります。。

Amazon DCVサーバーが認証情報の入力を求められた場合、promptCredentialsコールバック関数は Amazon DCVサーバーから要求された認証情報チャレンジを受け取ります。Amazon DCVサーバーがシステム認証を使用するように設定されている場合、認証情報はユーザー名とパスワードの形式で提供する必要があります。

認証に失敗すると、errorコールバック関数は Amazon DCVサーバーからエラーオブジェクトを受け取ります。

認証が成功すると、successコールバック関数は、ユーザーが Amazon DCVサーバーで接続することを許可されている各セッションのセッション ID ( sessionId ) と認証トークン ( authToken ) を含むカップルの配列を受け取ります。上記のコードサンプルは、認証に成功すると React ステータスを更新し、DCVViewer コンポーネントをレンダリングします。

このコンポーネントで受け入れられるプロパティの詳細については、「Amazon DCV Web UI SDKリファレンス」を参照してください。

自己署名証明書の詳細については、「自己署名証明書によるリダイレクトの説明」をご覧ください。

AWS-UI から Cloudscape Design System への更新

SDK バージョン 1.3.0 以降、DCVViewerコンポーネントを AWS-UI から進化した Cloudscape Design に更新しました。

Cloudscape は AWS-UI とは異なるビジュアルテーマを使用しますが、基盤となるコードベースは同じままです。したがって、DCVViewer ベースのアプリケーションの移行は容易です。移行するには、インストールした AWS-UI 関連のNPMパッケージを、関連する Cloudscape パッケージに置き換えます。

AWS-UI パッケージ名	Cloudscape パッケージ名
@awsui/components-react	@cloudscape-design/components
@awsui/global-styles	@cloudscape-design/global-styles
@awsui/collection-hooks	@cloudscape-design/collection-hooks
@awsui/design-tokens	@cloudscape-design/design-tokens

移行の詳細については、AWS-UI GitHub ドキュメントページを参照してください。

ブラウザで JavaScript が無効になっているか、使用できません。

AWS ドキュメントを使用するには、JavaScript を有効にする必要があります。手順については、使用するブラウザのヘルプページを参照してください。

ドキュメントの表記規則

Amazon DCVの機能を使用する

SDK リファレンス