Samouczek: publikowanie witryny VuePress w usłudze Azure Static Web Apps

W tym artykule pokazano, jak utworzyć i wdrożyć aplikację internetową VuePress w usłudze Azure Static Web Apps. Ostatecznym wynikiem jest nowa aplikacja usługi Azure Static Web Apps ze skojarzonymi funkcjami GitHub Actions, która zapewnia kontrolę nad sposobem tworzenia i publikowania aplikacji.

W tym poradniku nauczysz się, jak:

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

Wymagania wstępne

• Konto 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 zainstalowane.

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 usługą Azure Static Web Apps, potrzebujesz 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) na podstawie 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 lokalne repozytorium 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. Wyszukiwanie usługi Static Web Apps

4. Wybieranie pozycji Static Web Apps

5. Wybierz Utwórz

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

   Majątek	Wartość
   Subscription	Nazwa subskrypcji platformy Azure.
   Grupa zasobów	my-vuepress-group
   Nazwa	vuepress-static-app
   Typ planu	Bezpłatna
   Region dla interfejsu API usługi Azure Functions i środowisk przejściowych	Wybierz region najbliżej Ciebie.
   Źródło	GitHub

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

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

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

   Uwaga / Notatka

   Jeśli nie widzisz żadnych repozytoriów, może być konieczne autoryzowanie usługi Azure Static Web Apps w usłudze GitHub. Przejdź do repozytorium GitHub i przejdź do pozycji Ustawienia > Aplikacje > autoryzowane przez 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ądanie i tworzenie

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

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

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

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

   

Uprzątnij zasoby

Jeśli nie zamierzasz nadal korzystać z tej aplikacji, możesz usunąć zasób statycznej aplikacji internetowej platformy Azure, wykonując następujące kroki:

1. Otwieranie witryny 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

Dalsze kroki

Dodawanie domeny niestandardowej