Jak wdrożyć wszystkie platformy JavaScript w Cloud Run

1. Wprowadzenie

Omówienie

W ramach tego ćwiczenia w Codelabs wdrożysz w Cloud Run 8 aplikacji JavaScript:

• Angular SSR na podstawie Angular
• Nuxt.js – na podstawie Vue.js
• Next.js – oparty na React
• Remiks – na podstawie React
• SvelteKit – na podstawie Svelte
• SolidStart – oparty na Solid.js
• Astro
• Qwik

Czego się nauczysz

• Jak wdrażać platformy JavaScript, które Cloud Build obsługuje automatycznie
• Jak wdrażać platformy JavaScript, które wymagają konfiguracji

Wymagania wstępne

• Zalogujesz się w terminalu Cloud Shell.
• Masz projekt Google Cloud z włączonymi płatnościami i uprawnieniami do wdrażania w Cloud Run
  • Możesz to potwierdzić, jeśli usługa Cloud Run została już wdrożona. Możesz na przykład zapoznać się z krótkim wprowadzeniem do wdrożenia usługi internetowej Node.js z kodu źródłowego.

2. Aktywowanie Cloud Shell

1. Przejdź do terminala Cloud Shell: https://shell.cloud.google.com/?show=terminalJeśli uruchamiasz Cloud Shell po raz pierwszy, wyświetli się ekran z informacjami dla średnio zaawansowanych. Jeśli pojawi się ekran pośredni, kliknij Dalej.Udostępnianie i połączenie z Cloud Shell powinno chwilę potrwać.
2. Aby ustawić projekt gcloud, uruchom to polecenie w Cloud Shell:

   gcloud config set project <PROJECT_ID>
   

   Zastąp <PROJECT_ID> identyfikatorem projektu. Przykład:

   gcloud config set project js-frameworks
   

   Jeśli pojawi się prośba o autoryzację, kliknij Autoryzuj.

3. Włącz interfejsy API

Zanim zaczniesz korzystać z tego ćwiczenia z programowania, musisz włączyć kilka interfejsów API. To ćwiczenie w Codelabs wymaga używania poniższych interfejsów API. Możesz włączyć te interfejsy API, uruchamiając to polecenie:

gcloud services enable \
    cloudbuild.googleapis.com \
    artifactregistry.googleapis.com \
    run.googleapis.com

Następnie możesz ustawić zmienne środowiskowe, które będą używane w tym ćwiczeniu z programowania.

4. Skonfiguruj region domyślny

Region możesz ustawić oddzielnie dla każdego wdrożenia. To polecenie ustawi region domyślny na us-central1, dzięki czemu nie trzeba będzie ustawiać go dla każdego z nich.

gcloud config set run/region us-central1

5. Skonfiguruj git

Niektóre biblioteki oczekują, że git będzie domyślnie używany do kontroli wersji. Jeśli masz już skonfigurowany na komputerze interfejs git (na przykład uruchamiasz ten moduł lokalnie), nie musisz wykonywać tych kroków.

git config --global user.email "[e-mail]"
git config --global user.name "Your Name"
git config --global init.defaultBranch main

6. Angular SSR (Angular)

1. Przejdź do katalogu, w którym chcesz utworzyć aplikację Angular.

   cd ~
   

2. Tworzenie aplikacji Angular korzystającej z renderowania po stronie serwera (SSR)

   npx @angular/cli new angular-app --ssr
   

   Gdy pojawi się prośba o podanie ustawień, naciśnij klawisz Enter, aby zaakceptować wartości domyślne.
3. Otwórz nowo utworzony folder projektu.

   cd angular-app
   

4. Wdrażanie aplikacji

   gcloud run deploy --allow-unauthenticated
   

   Gdy pojawi się prośba o podanie ustawień, naciśnij klawisz Enter, aby zaakceptować wartości domyślne.

Przejście do aplikacji

Wdrożenie potrwa kilka minut. Gdy to zrobisz, Cloud Run zwróci taki URL:

https://angular-app-xxxxxxxxxx-uc.a.run.app

Otwórz podany URL w nowej karcie przeglądarki, aby wyświetlić wdrożoną aplikację.

Opcjonalne czyszczenie

1. Lokalne usuwanie projektu Angular

   cd ..
   rm -rf angular-app
   

2. Usuwanie usługi Angular Cloud Run

   gcloud run services delete angular-app
   

   Gdy pojawi się prośba o kontynuowanie, naciśnij klawisz Enter.

7. Nuxt.js (Vue.js)

1. Przejdź do katalogu, w którym chcesz utworzyć aplikację Angular.

   cd ~
   

2. Tworzenie aplikacji Nuxt.js

   npx nuxi init nuxt-app
   

   Gdy pojawi się prośba o podanie ustawień, naciśnij klawisz Enter, aby zaakceptować wartości domyślne.
3. Otwórz nowo utworzony folder projektu.

   cd nuxt-app
   

4. Wdrażanie aplikacji

   gcloud run deploy --allow-unauthenticated
   

   Gdy pojawi się prośba o podanie ustawień, naciśnij klawisz Enter, aby zaakceptować wartości domyślne.

Przejście do aplikacji

Wdrożenie potrwa kilka minut. Gdy to zrobisz, Cloud Run zwróci taki URL:

https://nuxt-app-xxxxxxxxxx-uc.a.run.app

Otwórz podany URL w nowej karcie przeglądarki, aby wyświetlić wdrożoną aplikację.

Opcjonalne czyszczenie

1. Usuń lokalnie projekt Nuxt.js

   cd ..
   rm -rf nuxt-app
   

2. Usuwanie usługi Nuxt.js Cloud Run

   gcloud run services delete nuxt-app
   

   Gdy pojawi się prośba o kontynuowanie, naciśnij klawisz Enter.

8. Next.js (reakcja)

1. Przejdź do katalogu, w którym chcesz utworzyć aplikację Angular.

   cd ~
   

2. Tworzenie aplikacji Next.js

   npx create-next-app next-app
   

   Gdy pojawi się prośba o podanie ustawień, naciśnij klawisz Enter, aby zaakceptować wartości domyślne.
3. Otwórz nowo utworzony folder projektu.

   cd next-app
   

4. Wdrażanie aplikacji

   gcloud run deploy --allow-unauthenticated
   

   Gdy pojawi się prośba o podanie ustawień, naciśnij klawisz Enter, aby zaakceptować wartości domyślne.

Przejście do aplikacji

Wdrożenie potrwa kilka minut. Gdy to zrobisz, Cloud Run zwróci taki URL:

https://next-app-xxxxxxxxxx-uc.a.run.app

Otwórz podany URL w nowej karcie przeglądarki, aby wyświetlić wdrożoną aplikację.

Opcjonalne czyszczenie

1. Usuwanie projektu Next.js lokalnie

   cd ..
   rm -rf next-app
   

2. Usuwanie usługi Cloud Run Next.js

   gcloud run services delete next-app
   

   Gdy pojawi się prośba o kontynuowanie, naciśnij klawisz Enter.

9. Remiksuj (reaguj)

1. Przejdź do katalogu, w którym chcesz utworzyć aplikację Angular.

   cd ~
   

2. Utwórz aplikację do remiksowania

   npx create-remix remix-app
   

   Gdy pojawi się prośba o podanie ustawień, naciśnij klawisz Enter, aby zaakceptować wartości domyślne.
3. Otwórz nowo utworzony folder projektu.

   cd remix-app
   

4. Wdrażanie aplikacji

   gcloud run deploy --allow-unauthenticated
   

   Gdy pojawi się prośba o podanie ustawień, naciśnij klawisz Enter, aby zaakceptować wartości domyślne.

Przejście do aplikacji

Wdrożenie potrwa kilka minut. Gdy to zrobisz, Cloud Run zwróci taki URL:

https://remix-app-xxxxxxxxxx-uc.a.run.app

Otwórz podany URL w nowej karcie przeglądarki, aby wyświetlić wdrożoną aplikację.

Opcjonalne czyszczenie

1. Usuwanie projektu remiksu lokalnie

   cd ..
   rm -rf remix-app
   

2. Usuwanie usługi Remix Cloud Run

   gcloud run services delete remix-app
   

   Gdy pojawi się prośba o kontynuowanie, naciśnij klawisz Enter.

10. Czyszczenie Cloud Shell

Jeśli nie korzystasz z Cloud Shell lub wdrażasz tylko jedną aplikację, ten krok jest opcjonalny.

Cloud Shell oferuje stały katalog domowy o pojemności 5 GB i działa w Google Cloud.

Aby wdrożyć wszystkie 8 platform za pomocą Cloud Shell, musisz utworzyć miejsce na pozostałe aplikacje.

Usunięcie projektów w Cloud Shell nie spowoduje usunięcia wdrożonych usług Cloud Run.

Aby wyczyścić dane, które zostały już utworzone, uruchom te polecenia:

cd ~
rm -rf angular-app/
rm -rf nuxt-app/
rm -rf next-app/
rm -rf remix-app/

11. SvelteKit (Svelte)

1. Przejdź do katalogu, w którym chcesz utworzyć aplikację Angular.

   cd ~
   

2. Tworzenie aplikacji SvelteKit

   npx create-svelte svelte-app
   

   Gdy pojawi się prośba o podanie ustawień, naciśnij klawisz Enter, aby zaakceptować wartości domyślne.
3. Otwórz nowo utworzony folder projektu.

   cd svelte-app
   

4. Wdrażanie aplikacji

   gcloud run deploy --allow-unauthenticated
   

   Gdy pojawi się prośba o podanie ustawień, naciśnij klawisz Enter, aby zaakceptować wartości domyślne.

Przejście do aplikacji

Wdrożenie potrwa kilka minut. Gdy to zrobisz, Cloud Run zwróci taki URL:

https://svelte-app-xxxxxxxxxx-uc.a.run.app

Otwórz podany URL w nowej karcie przeglądarki, aby wyświetlić wdrożoną aplikację.

Opcjonalne czyszczenie

1. Lokalne usuwanie projektu SvelteKit

   cd ..
   rm -rf svelte-app
   

2. Usuwanie usługi SvelteKit Cloud Run

   gcloud run services delete svelte-app
   

   Gdy pojawi się prośba o kontynuowanie, naciśnij klawisz Enter.

12. SolidStart (stały)

1. Przejdź do katalogu, w którym chcesz utworzyć aplikację Angular.

   cd ~
   

2. Tworzenie aplikacji SolidStart

   npx create-solid solid-app
   

   Gdy pojawi się prośba o podanie ustawień, naciśnij klawisz Enter, aby zaakceptować wartości domyślne.
3. Otwórz nowo utworzony folder projektu.

   cd solid-app
   

4. Wdrażanie aplikacji

   gcloud run deploy --allow-unauthenticated
   

   Gdy pojawi się prośba o podanie ustawień, naciśnij klawisz Enter, aby zaakceptować wartości domyślne.

Przejście do aplikacji

Wdrożenie potrwa kilka minut. Gdy to zrobisz, Cloud Run zwróci taki URL:

https://solid-app-xxxxxxxxxx-uc.a.run.app

Otwórz podany URL w nowej karcie przeglądarki, aby wyświetlić wdrożoną aplikację.

Opcjonalne czyszczenie

1. Lokalne usuwanie projektu SolidStart

   cd ..
   rm -rf solid-app
   

2. Usuwanie usługi SolidStart Cloud Run

   gcloud run services delete solid-app
   

   Gdy pojawi się prośba o kontynuowanie, naciśnij klawisz Enter.

13. Astro

1. Przejdź do katalogu, w którym chcesz utworzyć aplikację Angular.

   cd ~
   

2. Utwórz aplikację Astro

   npx create-astro astro-app
   

   Gdy pojawi się prośba o podanie ustawień, naciśnij klawisz Enter, aby zaakceptować wartości domyślne.
3. Otwórz nowo utworzony folder projektu.

   cd astro-app
   

4. Dodaj adapter Astro dla Node.js

   npx astro add node
   

5. Zaktualizuj skrypt start w: package.json

   npm pkg set scripts.start="HOST=0.0.0.0 node ./dist/server/entry.mjs"
   

6. Wdrażanie aplikacji

   gcloud run deploy --allow-unauthenticated
   

   Gdy pojawi się prośba o podanie ustawień, naciśnij klawisz Enter, aby zaakceptować wartości domyślne.

Uwaga: Cloud Run nie obsługuje automatycznie usługi Astro, ponieważ nie używa ona domyślnie środowiska Node.js. Powyższe polecenie npm pkg set aktualizuje skrypt start w pliku package.json na HOST=0.0.0.0 node ./dist/server/entry.mjs. Jeśli znasz to polecenie uruchamiające aplikację, ustaw je jako skrypt start. Cloud Build spróbuje uruchomić Twoją aplikację przy użyciu skryptu ustawionego jako start.

Przejście do aplikacji

Wdrożenie potrwa kilka minut. Gdy to zrobisz, Cloud Run zwróci taki URL:

https://astro-app-xxxxxxxxxx-uc.a.run.app

Otwórz podany URL w nowej karcie przeglądarki, aby wyświetlić wdrożoną aplikację.

Opcjonalne czyszczenie

1. Usuwanie projektu Astro lokalnie

   cd ..
   rm -rf astro-app
   

2. Usuwanie usługi Astro Cloud Run

   gcloud run services delete astro-app
   

   Gdy pojawi się prośba o kontynuowanie, naciśnij klawisz Enter.

14. Qwik

1. Przejdź do katalogu, w którym chcesz utworzyć aplikację Angular.

   cd ~
   

2. Utwórz aplikację Qwik

   npx create-qwik
   

   Gdy pojawi się prośba o podanie ustawień, naciśnij klawisz Enter, aby zaakceptować wartości domyślne.
3. Otwórz nowo utworzony folder projektu.

   cd qwik-app
   

4. Dodaj adapter Qwik do Cloud Run

   npm run qwik add cloud-run
   

5. Wdrażanie aplikacji

   gcloud run deploy --allow-unauthenticated
   

   Gdy pojawi się prośba o podanie ustawień, naciśnij klawisz Enter, aby zaakceptować wartości domyślne.

Uwaga: Qwik używa pliku Dockerfile do określenia, jak skompilować i uruchomić projekt. Jeśli wybrana platforma nie jest automatycznie obsługiwana przez Cloud Run, możesz użyć pliku Dockerfile do wdrożenia preferowanej platformy, tak jak robi to Qwik. Cloud Build poszuka pliku Dockerfile, zanim spróbujesz użyć pakietu Buildpacks do automatycznego wdrożenia aplikacji.

Przejście do aplikacji

Wdrożenie potrwa kilka minut. Gdy to zrobisz, Cloud Run zwróci taki URL:

https://qwik-app-xxxxxxxxxx-uc.a.run.app

Otwórz podany URL w nowej karcie przeglądarki, aby wyświetlić wdrożoną aplikację.

Opcjonalne czyszczenie

1. Usuwanie projektu Qwik lokalnie

   cd ..
   rm -rf qwik-app
   

2. Usuwanie usługi Qwik Cloud Run

   gcloud run services delete qwik-app
   

   Gdy pojawi się prośba o kontynuowanie, naciśnij klawisz Enter.

15. Gratulacje!

Gratulujemy ukończenia ćwiczeń z programowania.

Zalecamy zapoznanie się z dokumentacją w krótkim wprowadzeniu: wdrażanie do Cloud Run z repozytorium Git (w języku angielskim), aby przyszłe kompilacje mogły wdrażać się automatycznie przy każdym wypychaniu do kontroli wersji.

Co zostało omówione

• Jak wdrażać platformy JavaScript, które Cloud Build obsługuje automatycznie
  • Angular SSR na podstawie Angular
  • Nuxt.js – na podstawie Vue.js
  • Next.js – oparty na React
  • Remiks – na podstawie React
  • SvelteKit – na podstawie Svelte
  • SolidStart – oparty na Solid.js
• Jak wdrażać platformy JavaScript, które wymagają konfiguracji
  • Astro
  • Qwik

16. Czyszczenie danych

Aby uniknąć niezamierzonych opłat (na przykład jeśli ta usługa Cloud Run została przypadkowo wywołana więcej razy niż miesięczny przydział wywołań Cloud Run na poziomie bezpłatnym), możesz usunąć zadanie Cloud Run lub projekt utworzony w kroku 1.

Aby usunąć usługi Cloud Run, otwórz konsolę Cloud Run na stronie https://console.cloud.google.com/run/ i usuń usługi Cloud Run.

Jeśli zdecydujesz się usunąć cały projekt, możesz otworzyć stronę https://console.cloud.google.com/cloud-resource-manager, wybrać projekt utworzony w kroku 2 i kliknąć Usuń. Jeśli usuniesz projekt, musisz zmienić projekty w pakiecie SDK Cloud. Aby wyświetlić listę wszystkich dostępnych projektów, uruchom polecenie gcloud projects list.