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
- 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ć.
- Aby ustawić projekt
gcloud
, uruchom to polecenie w Cloud Shell: Zastąp <PROJECT_ID> identyfikatorem projektu. Przykład:gcloud config set project <PROJECT_ID>
Jeśli pojawi się prośba o autoryzację, kliknij Autoryzuj.gcloud config set project js-frameworks
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 "you@example.com" git config --global user.name "Your Name" git config --global init.defaultBranch main
6. Angular SSR (Angular)
- Przejdź do katalogu, w którym chcesz utworzyć aplikację Angular.
cd ~
- Tworzenie aplikacji Angular korzystającej z renderowania po stronie serwera (SSR)
Gdy pojawi się prośba o podanie ustawień, naciśnij klawisznpx @angular/cli new angular-app --ssr
Enter
, aby zaakceptować wartości domyślne. - Otwórz nowo utworzony folder projektu.
cd angular-app
- Wdrażanie aplikacji
Gdy pojawi się prośba o podanie ustawień, naciśnij klawiszgcloud run deploy --allow-unauthenticated
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
- Lokalne usuwanie projektu Angular
cd .. rm -rf angular-app
- Usuwanie usługi Angular Cloud Run
Gdy pojawi się prośba o kontynuowanie, naciśnij klawiszgcloud run services delete angular-app
Enter
.
7. Nuxt.js (Vue.js)
- Przejdź do katalogu, w którym chcesz utworzyć aplikację Angular.
cd ~
- Tworzenie aplikacji Nuxt.js
Gdy pojawi się prośba o podanie ustawień, naciśnij klawisznpx nuxi init nuxt-app
Enter
, aby zaakceptować wartości domyślne. - Otwórz nowo utworzony folder projektu.
cd nuxt-app
- Wdrażanie aplikacji
Gdy pojawi się prośba o podanie ustawień, naciśnij klawiszgcloud run deploy --allow-unauthenticated
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
- Usuń lokalnie projekt Nuxt.js
cd .. rm -rf nuxt-app
- Usuwanie usługi Nuxt.js Cloud Run
Gdy pojawi się prośba o kontynuowanie, naciśnij klawiszgcloud run services delete nuxt-app
Enter
.
8. Next.js (reakcja)
- Przejdź do katalogu, w którym chcesz utworzyć aplikację Angular.
cd ~
- Tworzenie aplikacji Next.js
Gdy pojawi się prośba o podanie ustawień, naciśnij klawisznpx create-next-app next-app
Enter
, aby zaakceptować wartości domyślne. - Otwórz nowo utworzony folder projektu.
cd next-app
- Wdrażanie aplikacji
Gdy pojawi się prośba o podanie ustawień, naciśnij klawiszgcloud run deploy --allow-unauthenticated
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
- Usuwanie projektu Next.js lokalnie
cd .. rm -rf next-app
- Usuwanie usługi Cloud Run Next.js
Gdy pojawi się prośba o kontynuowanie, naciśnij klawiszgcloud run services delete next-app
Enter
.
9. Remiksuj (reaguj)
- Przejdź do katalogu, w którym chcesz utworzyć aplikację Angular.
cd ~
- Utwórz aplikację do remiksowania
Gdy pojawi się prośba o podanie ustawień, naciśnij klawisznpx create-remix remix-app
Enter
, aby zaakceptować wartości domyślne. - Otwórz nowo utworzony folder projektu.
cd remix-app
- Wdrażanie aplikacji
Gdy pojawi się prośba o podanie ustawień, naciśnij klawiszgcloud run deploy --allow-unauthenticated
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
- Usuwanie projektu remiksu lokalnie
cd .. rm -rf remix-app
- Usuwanie usługi Remix Cloud Run
Gdy pojawi się prośba o kontynuowanie, naciśnij klawiszgcloud run services delete remix-app
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)
- Przejdź do katalogu, w którym chcesz utworzyć aplikację Angular.
cd ~
- Tworzenie aplikacji SvelteKit
Gdy pojawi się prośba o podanie ustawień, naciśnij klawisznpx create-svelte svelte-app
Enter
, aby zaakceptować wartości domyślne. - Otwórz nowo utworzony folder projektu.
cd svelte-app
- Wdrażanie aplikacji
Gdy pojawi się prośba o podanie ustawień, naciśnij klawiszgcloud run deploy --allow-unauthenticated
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
- Lokalne usuwanie projektu SvelteKit
cd .. rm -rf svelte-app
- Usuwanie usługi SvelteKit Cloud Run
Gdy pojawi się prośba o kontynuowanie, naciśnij klawiszgcloud run services delete svelte-app
Enter
.
12. SolidStart (stały)
- Przejdź do katalogu, w którym chcesz utworzyć aplikację Angular.
cd ~
- Tworzenie aplikacji SolidStart
Gdy pojawi się prośba o podanie ustawień, naciśnij klawisznpx create-solid solid-app
Enter
, aby zaakceptować wartości domyślne. - Otwórz nowo utworzony folder projektu.
cd solid-app
- Wdrażanie aplikacji
Gdy pojawi się prośba o podanie ustawień, naciśnij klawiszgcloud run deploy --allow-unauthenticated
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
- Lokalne usuwanie projektu SolidStart
cd .. rm -rf solid-app
- Usuwanie usługi SolidStart Cloud Run
Gdy pojawi się prośba o kontynuowanie, naciśnij klawiszgcloud run services delete solid-app
Enter
.
13. Astro
- Przejdź do katalogu, w którym chcesz utworzyć aplikację Angular.
cd ~
- Utwórz aplikację Astro
Gdy pojawi się prośba o podanie ustawień, naciśnij klawisznpx create-astro astro-app
Enter
, aby zaakceptować wartości domyślne. - Otwórz nowo utworzony folder projektu.
cd astro-app
- Dodaj adapter Astro dla Node.js
npx astro add node
- Zaktualizuj skrypt
start
w:package.json
npm pkg set scripts.start="HOST=0.0.0.0 node ./dist/server/entry.mjs"
- Wdrażanie aplikacji
Gdy pojawi się prośba o podanie ustawień, naciśnij klawiszgcloud run deploy --allow-unauthenticated
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://astro-app-xxxxxxxxxx-uc.a.run.app
Otwórz podany URL w nowej karcie przeglądarki, aby wyświetlić wdrożoną aplikację.
Opcjonalne czyszczenie
- Usuwanie projektu Astro lokalnie
cd .. rm -rf astro-app
- Usuwanie usługi Astro Cloud Run
Gdy pojawi się prośba o kontynuowanie, naciśnij klawiszgcloud run services delete astro-app
Enter
.
14. Qwik
- Przejdź do katalogu, w którym chcesz utworzyć aplikację Angular.
cd ~
- Utwórz aplikację Qwik
Gdy pojawi się prośba o podanie ustawień, naciśnij klawisznpx create-qwik
Enter
, aby zaakceptować wartości domyślne. - Otwórz nowo utworzony folder projektu.
cd qwik-app
- Dodaj adapter Qwik do Cloud Run
npm run qwik add cloud-run
- Wdrażanie aplikacji
Gdy pojawi się prośba o podanie ustawień, naciśnij klawiszgcloud run deploy --allow-unauthenticated
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://qwik-app-xxxxxxxxxx-uc.a.run.app
Otwórz podany URL w nowej karcie przeglądarki, aby wyświetlić wdrożoną aplikację.
Opcjonalne czyszczenie
- Usuwanie projektu Qwik lokalnie
cd .. rm -rf qwik-app
- Usuwanie usługi Qwik Cloud Run
Gdy pojawi się prośba o kontynuowanie, naciśnij klawiszgcloud run services delete qwik-app
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
.