Instrukcje: wdrażanie aplikacji płynnych przy użyciu usługi Azure Static Web Apps
W tym artykule pokazano, jak wdrażać aplikacje płynne przy użyciu usługi Azure Static Web Apps. Repozytorium FluidHelloWorld zawiera aplikację Fluid o nazwie DiceRoller , która umożliwia wszystkim połączonym klientom rzutowanie kostką i wyświetlanie wyniku. W tym przewodniku wdrożysz aplikację DiceRoller w usłudze Azure Static Web Apps przy użyciu rozszerzenia programu Visual Studio Code.
Jeśli nie masz subskrypcji platformy Azure, utwórz bezpłatne konto próbne.
Wymagania wstępne
- Konto usługi GitHub
- Konto platformy Azure
- Visual Studio Code
- Rozszerzenia usługi Azure Static Web Apps dla programu Visual Studio Code
- Zainstaluj oprogramowanie Git
Rozwidlenie i sklonowanie repozytorium
Przejdź do https://github.com/microsoft/FluidHelloWorld i kliknij przycisk Rozwidlenie , aby utworzyć własne rozwidlenie repozytorium FluidHelloWorld.
Następnie sklonuj rozwidlenie na maszynę lokalną przy użyciu następującego polecenia.
git clone -b main-azure https://github.com/<YOUR_GITHUB_ACCOUNT_NAME>/FluidHelloWorld.git
Pamiętaj, aby zastąpić <YOUR_GITHUB_ACCOUNT_NAME> ciąg nazwą użytkownika usługi GitHub.
Następnie otwórz program Visual Studio Code i przejdź do pozycji Plik > Otwórz folder , aby otworzyć sklonowane repozytorium w edytorze.
Połączenie do usługi Azure Fluid Relay
Możesz nawiązać połączenie z usługą Azure Fluid Relay, podając identyfikator dzierżawy i klucz, który jest unikatowy wygenerowany podczas tworzenia zasobu platformy Azure. Możesz utworzyć własną implementację dostawcy tokenów lub użyć dwóch implementacji dostawcy tokenów, które Elastyczna struktura udostępnia element AzureFunctionTokenProvider.
Aby dowiedzieć się więcej na temat używania elementu InsecureTokenProvider na potrzeby programowania lokalnego, zobacz Połączenie do usługi i uwierzytelniania i autoryzacji w aplikacji.
Korzystanie z elementu AzureFunctionTokenProvider
AzureFunctionTokenProvider to dostawca tokenów, który nie uwidacznia klucza tajnego w kodzie po stronie klienta i może być używany w scenariuszach produkcyjnych. Ta implementacja dostawcy tokenów może służyć do pobierania tokenu z punktu końcowego HTTPS odpowiedzialnego za podpisywanie tokenów dostępu za pomocą klucza dzierżawy. Zapewnia to bezpieczny sposób generowania tokenu i przekazywania go z powrotem do aplikacji klienckiej.
import { AzureClient, AzureFunctionTokenProvider } from "@fluidframework/azure-client";
const config = {
tenantId: "myTenantId",
tokenProvider: new AzureFunctionTokenProvider("https://myAzureAppUrl"+"/api/GetAzureToken", { userId: "test-user",userName: "Test User" }),
endpoint: "https://myServiceEndpointUrl",
type: "remote",
};
const clientProps = {
connection: config,
};
const client = new AzureClient(clientProps);
Aby użyć tego dostawcy tokenów, należy wdrożyć punkt końcowy HTTPS, który będzie podpisywać tokeny, i przekazać adres URL do punktu końcowego do dostawcy AzureFunctionTokenProvider.
Wdrażanie funkcji platformy Azure przy użyciu statycznych aplikacji internetowych platformy Azure
Usługa Azure Static Web Apps umożliwia tworzenie witryny internetowej pełnego stosu bez konieczności obsługi konfiguracji po stronie serwera całego środowiska hostingu internetowego. Usługę Azure Functions można wdrożyć razem ze statyczną witryną internetową. Korzystając z tej funkcji, można wdrożyć funkcję platformy Azure wyzwalaną przez protokół HTTP, która będzie podpisywać tokeny.
Aby uzyskać więcej informacji na temat wdrażania interfejsów API opartych na funkcji platformy Azure w statycznej aplikacji internetowej, zobacz Dodawanie interfejsu API do usługi Azure Static Web Apps za pomocą usługi Azure Functions.
Uwaga
Możesz użyć przykładowego kodu funkcji platformy Azure w temacie Implementowanie funkcji platformy Azure, aby podpisać tokeny w celu zaimplementowania funkcji.
Po wdrożeniu funkcji platformy Azure należy zaktualizować adres URL przekazany do elementu AzureFunctionTokenProvider.
import { AzureClient } from "@fluidframework/azure-client";
const config = {
tenantId: "myTenantId",
tokenProvider: new AzureFunctionTokenProvider("https://myStaticWebAppUrl/api/GetAzureToken", { userId: "test-user",userName: "Test User" }),
endpoint: "https://myServiceEndpointUrl",
type: "remote",
};
const clientProps = {
connection: config,
};
const client = new AzureClient(config);
npm run build Uruchom polecenie z katalogu głównego, aby ponownie skompilować aplikację. Spowoduje to wygenerowanie dist folderu z kodem aplikacji, który powinien zostać wdrożony w statycznej aplikacji internetowej.
Logowanie się do platformy Azure
Jeśli używasz już rozszerzeń usługi platformy Azure, musisz już się zalogować i pominąć ten krok.
Po zainstalowaniu rozszerzenia w programie Visual Studio Code musisz zalogować się do konta platformy Azure.
W programie Visual Studio Code wybierz ikonę Eksplorator platformy Azure , a następnie wybierz pozycję Zaloguj się do platformy Azure i postępuj zgodnie z monitami.
Po zalogowaniu sprawdź, czy adres e-mail konta platformy Azure jest wyświetlany na pasku stanu, a subskrypcje są wyświetlane w Eksploratorze platformy Azure :
Tworzenie statycznej aplikacji internetowej
W programie Visual Studio Code na pasku Activity Bar wybierz logo platformy Azure, aby otworzyć okno rozszerzeń platformy Azure.
Uwaga
Aby kontynuować, musisz zalogować się do platformy Azure i usługi GitHub w programie Visual Studio Code. Jeśli jeszcze nie uwierzytelniono, rozszerzenie wyświetli monit o zalogowanie się do obu usług podczas procesu tworzenia.
Wybierz klawisz F1 , aby otworzyć paletę poleceń programu Visual Studio Code.
Wprowadź wartość Create static web app (Utwórz statyczną aplikację internetową) w polu polecenia .
Wybierz pozycję Azure Static Web Apps: Utwórz statyczną aplikację internetową... i wybierz klawisz Enter.
Ustawienie Wartość Nazwisko Wprowadź my-first-static-web-app Region (Region) Wybierz region znajdujący się najbliżej Ciebie. Wstępne ustawienia kompilacji Wybierz Niestandardowy. Wprowadź wartości ustawień, które są zgodne z wybranym ustawieniem wstępnym platformy.
Ustawienie Wartość Lokalizacja kodu aplikacji Wprowadź /src Lokalizacja kodu funkcji platformy Azure api Po utworzeniu aplikacji w programie Visual Studio Code zostanie wyświetlone powiadomienie zawierające potwierdzenie.
W miarę postępu wdrażania rozszerzenie programu Visual Studio Code zgłasza stan kompilacji.
Po zakończeniu wdrażania możesz przejść bezpośrednio do witryny internetowej.
Aby wyświetlić witrynę internetową w przeglądarce, kliknij prawym przyciskiem myszy projekt w rozszerzeniu Static Web Apps, a następnie wybierz pozycję Przeglądaj witrynę.
Lokalizacja kodu aplikacji, funkcji platformy Azure i danych wyjściowych kompilacji jest częścią
azure-static-web-apps-xxx-xxx-xxx.ymlpliku przepływu pracy znajdującego/.github/workflowssię w katalogu. Ten plik jest tworzony automatycznie podczas tworzenia statycznej aplikacji internetowej. Definiuje ona funkcję GitHub Actions do kompilowania i wdrażania statycznej aplikacji internetowej.
Czyszczenie zasobów
Jeśli nie zamierzasz nadal korzystać z tej aplikacji, możesz usunąć wystąpienie usługi Azure Static Web Apps za pomocą rozszerzenia.
W oknie Eksplorator programu Visual Studio Code wróć do sekcji Static Web Apps i kliknij prawym przyciskiem myszy pozycję my-first-static-web-app i wybierz polecenie Usuń.
