演習 - はじめに

  • 7 分

この演習では、Web サイトを自動的にビルドして発行する GitHub アクションを含む、Azure Static Web App インスタンスを作成します。

このモジュールでは、サンドボックスを介して利用できるリソースを使用します。これにより、Azure サブスクリプションへの無料の一時的なアクセスと、演習を完了するために必要なリソースが提供されます。 このページの上部にあるサンドボックスをアクティブにしてください。 このモジュールの演習を進める際、各ユニットは前の演習で作成したコンテンツに依存します。 このため、JavaScript フレームワークを選択し、以降のすべての演習で使用します。

リポジトリを作成する

まず、GitHub テンプレートを使用してリポジトリを作成します。 一連のリポジトリ テンプレートを使用できます。このテンプレートには、さまざまなフロントエンド フレームワークに実装されたスターター アプリが含まれています。

  1. GitHub のテンプレートから作成ページに移動します。

  2. 所有者の入力を求められたら、GitHub アカウントのいずれかを選択します。

  3. [リポジトリ名] に「my-static-web-app-and-api」と入力します。

  4. [Create repository] (リポジトリの作成) を選択します。

    テンプレートからプロジェクトを作成すると、GitHub によってリポジトリがバックグラウンドでビルドされます。

アプリをローカルで実行する

これで、GitHub アカウントに my-static-web-app-and-api という名前の GitHub リポジトリが作成されました。 次に、GitHub リポジトリを複製し、コンピューター上でローカルでコードを実行します。

  1. コンピューターのターミナル ウィンドウを開きます。

    Windows を使用している場合は、システム トレイの検索ボックスに「 cmd 」と入力できます。

  2. リポジトリをマシンに複製するには、コマンド プロンプト ウィンドウに次のコードを貼り付けます。

    <YOUR_GITHUB_USERNAME> は必ず自分の GitHub ユーザー名に置き換えてください。

    git clone https://github.com/<YOUR_GITHUB_USERNAME>/my-static-web-app-and-api.git

    注

    コマンド プロンプト ターミナルへのコピーで問題が発生した場合は、タイトル バーのアイコンを右クリックし、[ プロパティ ] タブの [ コピー/貼り付け ] がオンになっていることを確認します。

  3. 複製したソース コードのディレクトリに移動します。

    cd my-static-web-app-and-api

  4. 優先するフロントエンド フレームワークのディレクトリに移動します。

    cd angular-app

    cd react-app

    cd svelte-app

    cd vue-app

  5. アプリケーションの依存関係をインストールします。

    npm install

  6. 次のコマンドを使用して、各依存関係の最新バージョンがインストールされていることを確認します。

    npm audit fix

  7. フロントエンド クライアント アプリケーションを実行します。

    npm start

    npm start

    npm run dev

    npm run serve

アプリに移動する

アプリケーション バンドルが生成されてコンパイルされると、ブラウザー タブが自動的に開き、ローカルで実行されているアプリケーションが表示されます。

angular のローカル ホストが http://localhost:4200。

Angular Web アプリのローカル ホストのスクリーンショット。

react のローカル ホストが http://localhost:3000。

React Web アプリのローカル ホストのスクリーンショット。

svelte のローカル ホストが http://localhost:5000。

Svelte Web アプリのローカル ホストのスクリーンショット。

Vue のローカル ホストが http://localhost:8080。

Vue Web アプリのローカル ホストのスクリーンショット。

データや API がまだないため、アプリに [データを読み込んでいます] と表示されるはずです。 このレッスンの後半で、Web アプリの API を追加します。

ターミナルで Ctrl+キーを押してバッチ ジョブを停止します。

おめでとうございます! アプリケーションをビルドし、ブラウザーでローカルで実行されているのを確認しました。 次に、アプリケーションを Azure Static Web Apps に発行できます。

静的 Web アプリを作成する

独自の GitHub リポジトリを作成しました。 Visual Studio Code 用の Azure Static Web Apps 拡張機能を使用して、独自の静的 Web アプリを作成できるようになりました。

Visual Studio Code 用の Azure Static Web Apps 拡張機能をインストールする

  1. Visual Studio Code を開きます。

  2. 上部のメニューから [ 表示>Extensions] を選択し、検索ボックスに 「Azure Static Web Apps 」と入力します。

  3. Visual Studio Code で拡張機能タブが読み込まれたら、[インストール] を選択 します。

アプリケーション フォルダーを開く

  1. F1 キーを押して、Visual Studio Code のコマンド パレットを開きます。

  2. ファイルの入力: フォルダーを開く....

  3. my-static-web-app-and-api フォルダーを選択します。

  4. [ 開く ] を選択して、Visual Studio Code でフォルダーを開きます。

Visual Studio Code で Azure にサインインする

  1. F1 キーを押して、Visual Studio Code のコマンド パレットを開きます。

  2. 「Azure: サインイン」と入力し、プロンプトに従って認証します。

    Von Bedeutung

    ブラウザー内サンドボックスのアクティブ化に使用したのと同じアカウントを使用して、必ず Azure にサインインしてください。 同じアカウントを使用すると、コンシェルジェ サブスクリプションを使用できるようになります。このチュートリアルでは、無料の Azure リソースにアクセスできます。

サブスクリプションを選択します

  1. F1 キーを押して、Visual Studio Code のコマンド パレットを開きます。

  2. 「Azure」と入力します。[サブスクリプション] を選択し、コンシェルジェ サブスクリプションを除くすべての選択をクリアします。

    コンシェルジェ サブスクリプションが選択されていることを示すスクリーンショット。

変更をコミットする

アプリケーションの依存関係をインストールすると、プロジェクト内のファイルの一部がプロセスで更新されました。 続行するには、これらの変更をリポジトリにコミットする必要があります。

  1. F1 キーを押して、Visual Studio Code のコマンド パレットを開きます。

  2. 「 Git Commit All」と入力して選択します。

  3. ファイルの先頭に 最初のコミット を入力します。

  4. Git コミット ファイルを保存して閉じます。

    この時点で、変更をサーバーと同期する心配はありません。 静的 Web アプリを発行すると、GitHub に更新プログラムがコピーされます。

静的 Web アプリを作成する

静的 Web アプリを作成するには、現在の Azure と GitHub で認証されたセッションが必要です。 両方のプロバイダーにまだサインインしていない場合は、作成プロセス中にサインインするように求められます。

  1. F1 キーを押して、Visual Studio Code のコマンド パレットを開きます。

  1. 「Azure Static Web Apps: Create Static Web App...」と入力して選択します。

    コマンド パレットプロンプトの残りの部分には、次の値を入力します。

    プロンプト 価値
    サブスクリプション コンシェルジェ サブスクリプションを選択する
    名前 my-static-web-app-and-api を入力します
    リージョン 最も近いリージョンを選択します
    プリセット [Angular] を選択する
    アプリケーション コードの場所 angular-app を入力する
    Output location (出力場所) dist/angular-app に移動する

  1. 「Azure Static Web Apps: Create Static Web App...」と入力して選択します。

    コマンド パレットプロンプトの残りの部分には、次の値を入力します。

    プロンプト 価値
    サブスクリプション コンシェルジェ サブスクリプションを選択する
    名前 my-static-web-app-and-api を入力します
    リージョン 最も近いリージョンを選択します
    プリセット [React] を選択する
    アプリケーション コードの場所 react-app を入力する
    Output location (出力場所) distを入力

  1. 「Azure Static Web Apps: Create Static Web App...」と入力して選択します。

    コマンド パレットプロンプトの残りの部分には、次の値を入力します。

    プロンプト 価値
    サブスクリプション コンシェルジェ サブスクリプションを選択する
    名前 my-static-web-app-and-api を入力します
    リージョン 最も近いリージョンを選択します
    プリセット Svelte を選択する
    アプリケーション コードの場所 svelte-app を入力する
    Output location (出力場所) パブリック環境に入 る

  1. 「Azure Static Web Apps: Create Static Web App...」と入力して選択します。

    コマンド パレットプロンプトの残りの部分には、次の値を入力します。

    プロンプト 価値
    サブスクリプション コンシェルジェ サブスクリプションを選択する
    名前 my-static-web-app-and-api を入力します
    リージョン 最も近いリージョンを選択します
    プリセット Vue を選択
    アプリケーション コードの場所 vue-app を入力する
    Output location (出力場所) distを入力

注

このリポジトリは、使い慣れた他のプロジェクトとは異なります。 このプロジェクトには、4 つの異なるフォルダーに 4 つの異なるアプリが含まれています。 各フォルダーには、異なる JavaScript フレームワークで作成されたアプリが格納されています。 通常、リポジトリのルートにはアプリが 1 つしかないため、アプリ パスの場所の既定の / になります。 この構造は、Azure Static Web Apps を使用して最初に場所を構成する方法の優れた例です。アプリの構築方法を完全に制御できます。

  1. アプリが作成されると、確認通知が Visual Studio Code に表示されます。

    [GitHub でアクションを開く] または [構成の表示/編集] ポップアップ ウィンドウのスクリーンショット。

    ビルドの構成中に、Visual Studio Code によってビルドの状態が報告されます。

    デプロイを待機している運用環境の状態を示すスクリーンショット。

  2. [ アクション ] メニューを展開すると、GitHub Actions を使用してデプロイの進行状況を表示できます。

    GitHub Actions を表示する方法を示すスクリーンショット。

    デプロイが完了したら、自分の Web サイトに直接移動できます。

  3. ブラウザーで Web サイトを表示するには、Static Web Apps 拡張機能でプロジェクトを右クリックし、[サイトの参照] を選択します。

    Visual Studio Code 拡張機能を使用して静的 Web アプリを参照する方法を示すスクリーンショット。

    データや API がまだないため、アプリに [データを読み込んでいます] と表示されるはずです。 このモジュールでは、後で Web アプリ用の API を追加します。

おめでとうございます! アプリは Azure Static Web Apps にデプロイされます。

注

アプリがまだビルドおよびデプロイされていないことを示す Web ページが表示される場合は、心配しないでください。 しばらくしてからブラウザーを再更新してみてください。 GitHub Action サービスは、Azure Static Web アプリの作成時に自動的に実行されます。 そのため、スプラッシュ ページが表示されても、アプリはデプロイ中です。

GitHub から変更内容をプルする

GitHub から最新の変更をプルして、Azure Static Web Apps サービスによって作成されたワークフロー ファイルをダウンさせます。

  1. ++ キーを押してコマンド パレットを開きます。

  2. 「Git: Pull」と入力して選択します。

  3. Enter キーを押します。

次のステップ

次に、Azure Functions プロジェクトを使用して API をビルドして実行する方法について説明します。