Samouczek: publikowanie witryny VuePress w celu Azure Static Web Apps

W tym artykule pokazano, jak utworzyć i wdrożyć aplikację internetową VuePress w Azure Static Web Apps. Końcowy wynik to nowa aplikacja Azure Static Web Apps ze skojarzonymi GitHub Actions, które zapewniają kontrolę nad sposobem tworzenia i publikowania aplikacji.

Ten samouczek zawiera informacje na temat wykonywania następujących czynności:

• Tworzenie aplikacji VuePress
• Konfigurowanie Azure Static Web Apps
• Wdrażanie aplikacji VuePress na platformie Azure

Wymagania wstępne

• Konto platformy Azure z aktywną subskrypcją. Jeśli go nie masz, możesz bezpłatnie utworzyć konto.
• Konto usługi GitHub. Jeśli go nie masz, możesz bezpłatnie utworzyć konto.
• Zainstalowano instalatora usługi Git. Jeśli go nie masz, możesz zainstalować narzędzie Git.
• Node.js zainstalowany.

Tworzenie aplikacji VuePress

Utwórz aplikację VuePress na podstawie interfejsu wiersza polecenia:

1. Utwórz nowy folder dla aplikacji VuePress.

   mkdir static-site
   

2. Dodaj README.md plik w folderze.

   echo '# Hello From VuePress' > README.md
   

3. Zainicjuj plik package.json .

   npm init -y
   

4. Dodaj VuePress jako element devDependency.

   npm install --save-dev vuepress
   

5. Otwórz plik package.json w edytorze tekstów i dodaj polecenie kompilacji scripts do sekcji .

   ...
   "scripts": {
       "build": "vuepress build"
   }
   ...
   

6. Utwórz plik .gitignore , aby wykluczyć folder node_modules .

   echo 'node_modules' > .gitignore
   

7. Inicjowanie repozytorium Git.

    git init
    git add -A
    git commit -m "initial commit"
   

Wypychanie aplikacji do usługi GitHub

Aby nawiązać połączenie z Azure Static Web Apps, potrzebne jest repozytorium w usłudze GitHub. W poniższych krokach pokazano, jak utworzyć repozytorium dla witryny.

1. Utwórz puste repozytorium GitHub (nie twórz pliku README) z https://github.com/new nazwy vuepress-static-app.

2. Dodaj repozytorium GitHub jako repozytorium zdalne do lokalnego repozytorium. Pamiętaj, aby dodać nazwę użytkownika usługi GitHub zamiast symbolu zastępczego <YOUR_USER_NAME> w poniższym poleceniu.

   git remote add origin https://github.com/<YOUR_USER_NAME>/vuepress-static-app
   

3. Wypchnij repozytorium lokalne do usługi GitHub.

   git push --set-upstream origin main
   

Wdrażanie aplikacji internetowej

W poniższych krokach pokazano, jak utworzyć nową aplikację witryny statycznej i wdrożyć ją w środowisku produkcyjnym.

Tworzenie aplikacji

1. Przejdź do witryny Azure Portal.

2. Wybieranie pozycji Utwórz zasób

3. Wyszukaj usługę Static Web Apps

4. Wybierz Static Web Apps

5. Wybierz pozycję Utwórz

6. Na karcie Podstawy wprowadź następujące wartości.

   Właściwość	Wartość
   Subskrypcja	Nazwa subskrypcji platformy Azure.
   Grupa zasobów	my-vuepress-group
   Nazwa	vuepress-static-app
   Typ planu	Bezpłatna
   Region dla interfejsu API Azure Functions i środowisk przejściowych	Wybierz region najbliżej Ciebie.
   Element źródłowy	GitHub

7. Wybierz pozycję Zaloguj się przy użyciu usługi GitHub i uwierzytelnij się w usłudze GitHub.

8. Wprowadź następujące wartości w usłudze GitHub.

   Właściwość	Wartość
   Organizacja	Wybierz żądaną organizację usługi GitHub.
   Repozytorium	Wybierz pozycję vuepress-static-app.
   Gałąź	Wybierz pozycję main.

   Uwaga

   Jeśli nie widzisz żadnych repozytoriów, może być konieczne autoryzowanie Azure Static Web Apps w usłudze GitHub. Przejdź do repozytorium GitHub i przejdź do pozycji Ustawienia > Aplikacje autoryzowane aplikacje > OAuth, wybierz pozycję Azure Static Web Apps, a następnie wybierz pozycję Udziel. W przypadku repozytoriów organizacji musisz być właścicielem organizacji, aby udzielić uprawnień.

9. W sekcji Szczegóły kompilacji wybierz pozycję VuePress z listy rozwijanej Ustawienia wstępne kompilacji i zachowaj wartości domyślne.

Przegląd i tworzenie

1. Wybierz pozycję Przejrzyj i utwórz , aby sprawdzić, czy szczegóły są poprawne.

2. Wybierz pozycję Utwórz, aby rozpocząć tworzenie App Service statycznej aplikacji internetowej i aprowizować GitHub Actions na potrzeby wdrożenia.

3. Po zakończeniu wdrażania wybierz pozycję Przejdź do zasobu.

4. Na ekranie zasobu wybierz link adresu URL , aby otworzyć wdrożona aplikację. Może być konieczne poczekanie minuty lub dwóch na ukończenie GitHub Actions.

   

Czyszczenie zasobów

Jeśli nie zamierzasz nadal korzystać z tej aplikacji, możesz usunąć zasób usługi Azure Static Web App, wykonując następujące kroki:

1. Otwórz witrynę Azure Portal.
2. Na górnym pasku wyszukiwania wyszukaj aplikację według podanej wcześniej nazwy
3. Kliknij aplikację
4. Kliknij przycisk Usuń
5. Kliknij przycisk Tak , aby potwierdzić akcję usuwania

Następne kroki

Dodawanie domeny niestandardowej