前へ

次へ

演習 - プロジェクトを設定する

完了

あなたは Tailwind Traders の新しい開発者です。 開始する前に、開発環境を構成しておく必要があります。 心配はありません。Tailwind Traders では、オンボード プロセスを簡単に行うことができます。 作業を開始するために従う必要がある小さな手順はほんのわずかです。

プロジェクト リソースのスキャフォールディング

1. サンドボックスを起動して、このページの上部に示されているように、Azure Cloud Shell ("Tailwind Traders の運用環境" とも呼ばれます) にサインインします。

2. 次の行をコピーして、右側の Azure Cloud Shell ターミナルに貼り付けます。

   git clone https://github.com/MicrosoftDocs/mslearn-build-api-azure-functions && ./mslearn-build-api-azure-functions/DB_SETUP/CREATE_DATABASE.sh
   

   このコマンドを使って、製品データを含む新しいデータベースを作成します。 このプロセスには最大 10 分かかることがあります。 モジュールを先に進めてもかまいません。 このページから移動した場合でも、プロセスは継続して実行されます。

Visual Studio Code でプロジェクトを複製する

1. Visual Studio Code を開きます。

2. 上部メニュー バーの [表示]>[コマンド パレット] を選択します。

3. プロンプトで、「clone」と入力します。

4. コマンド パレットで、[Git: Clone] を選択します。

5. 次のリポジトリの URL を入力します。

   https://github.com/MicrosoftDocs/mslearn-build-api-azure-functions
   

6. プロジェクトがクローンされるローカル ドライブ上のフォルダーを選びます。

7. クローンされたリポジトリを開くようにメッセージが表示されたら、 [開く] を選択します。

8. Visual Studio Code によって、このプロジェクト内のワークスペース ファイルが検出され、それを開くかどうかが確認されます。 [ワークスペースを開く] を選択します。

   

ワークスペースが開くと、frontend と api という 2 つのプロジェクトが Visual Studio Code に表示されます。 "フロントエンド" プロジェクトには、Web アプリが含まれています。 api プロジェクトは、Azure Functions でサーバーレス API をビルドする場所です。

フロントエンド プロジェクトを実行する

1. Visual Studio Code で統合ターミナルを開くには、Ctrl + Shift + ` キーを押します。

2. [frontend] を選択します。

3. ブラウザーでフロントエンド プロジェクトを実行するには、統合ターミナルで npm start コマンドを実行します。

   npm start
   

   Visual Studio Code ターミナル ウィンドウで、serve という小さい Web サーバーが実行されます。 フロントエンド アプリが実行されている URL が表示されます。

   

4. ブラウザーでアプリを開くには、ターミナル ウィンドウでその URL を選びます。

   アプリは読み込まれますが、このアプリの API は作成されていないため、データは存在しません。

   

お疲れ様でした。 Tailwind Traders で生産性の高い開発者であるための環境が正常に構成されました。 つまり、次は、Products Manager アプリケーションの API として機能する Azure Functions プロジェクトを作成することになります。

続行