Jak wdrożyć wszystkie platformy JavaScript w Cloud Run

1. Wprowadzenie

Przegląd

W tym laboratorium wdrożysz w Cloud Run 8 aplikacji JavaScript:

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

Czego się nauczysz

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

Wymagania wstępne

• Jesteś zalogowany(-a) 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 sprawdzić, jeśli masz już wdrożoną usługę Cloud Run. Na początek możesz na przykład skorzystać z krótkiego wprowadzenia do wdrażania usługi internetowej Node.js z kodu źródłowego.

2. Aktywowanie Cloud Shell

1. Otwórz terminal Cloud Shell: https://shell.cloud.google.com/?show=terminal. Jeśli uruchamiasz Cloud Shell po raz pierwszy, zobaczysz ekran pośredni z opisem tego środowiska. W takim przypadku kliknij Dalej. Uzyskanie dostępu do środowiska Cloud Shell i połączenie się z nim powinno zająć tylko kilka chwil.
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 samouczka, musisz włączyć kilka interfejsów API. Ten przewodnik wymaga użycia tych 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órych będziesz używać podczas naszych ćwiczeń z programowania.

4. Konfigurowanie regionu domyślnego

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

gcloud config set run/region us-central1

5. Skonfiguruj git

Niektóre biblioteki domyślnie oczekują, że do kontroli wersji będzie używany znak git. Jeśli masz już skonfigurowane git na swoim komputerze (np. wykonujesz to ćwiczenie lokalnie), nie musisz wykonywać tych czynności.

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. Otwórz katalog, w którym chcesz utworzyć aplikację Angular.

   cd ~
   

2. Tworzenie aplikacji Angular, która korzysta z renderowania po stronie serwera

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

   Gdy pojawi się prośba o wybór preferencji, naciśnij klawisz Enter, aby zaakceptować ustawienia domyślne.
3. Otwórz utworzony folder nowego projektu.

   cd angular-app
   

4. Wdrażanie aplikacji

   gcloud run deploy --allow-unauthenticated
   

   Gdy pojawi się prośba o wybór preferencji, naciśnij klawisz Enter, aby zaakceptować ustawienia domyślne.

Przejście do aplikacji

Wdrażanie potrwa kilka minut. Po zakończeniu Cloud Run zwróci adres URL podobny do tego:

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

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

Opcjonalne czyszczenie

1. Usuwanie projektu Angulara lokalnie

   cd ..
   rm -rf angular-app
   

2. Usuwanie usługi Angular Cloud Run

   gcloud run services delete angular-app
   

   Gdy pojawi się pytanie, czy chcesz kontynuować, naciśnij klawisz Enter.

7. Nuxt.js (Vue.js)

1. Otwórz katalog, w którym chcesz utworzyć aplikację Angular.

   cd ~
   

2. Tworzenie aplikacji Nuxt.js

   npx nuxi init nuxt-app
   

   Gdy pojawi się prośba o wybór preferencji, naciśnij klawisz Enter, aby zaakceptować ustawienia domyślne.
3. Otwórz utworzony folder nowego projektu.

   cd nuxt-app
   

4. Wdrażanie aplikacji

   gcloud run deploy --allow-unauthenticated
   

   Gdy pojawi się prośba o wybór preferencji, naciśnij klawisz Enter, aby zaakceptować ustawienia domyślne.

Przejście do aplikacji

Wdrażanie potrwa kilka minut. Po zakończeniu Cloud Run zwróci adres URL podobny do tego:

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

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

Opcjonalne czyszczenie

1. Usuwanie projektu Nuxt.js lokalnie

   cd ..
   rm -rf nuxt-app
   

2. Usuwanie usługi Cloud Run Nuxt.js

   gcloud run services delete nuxt-app
   

   Gdy pojawi się pytanie, czy chcesz kontynuować, naciśnij klawisz Enter.

8. Next.js (React)

1. Otwórz katalog, 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 wybór preferencji, naciśnij klawisz Enter, aby zaakceptować ustawienia domyślne.
3. Otwórz utworzony folder nowego projektu.

   cd next-app
   

4. Wdrażanie aplikacji

   gcloud run deploy --allow-unauthenticated
   

   Gdy pojawi się prośba o wybór preferencji, naciśnij klawisz Enter, aby zaakceptować ustawienia domyślne.

Przejście do aplikacji

Wdrażanie potrwa kilka minut. Po zakończeniu Cloud Run zwróci adres URL podobny do tego:

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

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

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ę pytanie, czy chcesz kontynuować, naciśnij klawisz Enter.

9. Remiks (reakcja)

1. Otwórz katalog, w którym chcesz utworzyć aplikację Angular.

   cd ~
   

2. Tworzenie aplikacji Remix

   npx create-remix remix-app
   

   Gdy pojawi się prośba o wybór preferencji, naciśnij klawisz Enter, aby zaakceptować ustawienia domyślne.
3. Otwórz utworzony folder nowego projektu.

   cd remix-app
   

4. Wdrażanie aplikacji

   gcloud run deploy --allow-unauthenticated
   

   Gdy pojawi się prośba o wybór preferencji, naciśnij klawisz Enter, aby zaakceptować ustawienia domyślne.

Przejście do aplikacji

Wdrażanie potrwa kilka minut. Po zakończeniu Cloud Run zwróci adres URL podobny do tego:

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

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

Opcjonalne czyszczenie

1. Usuwanie projektu Remix lokalnie

   cd ..
   rm -rf remix-app
   

2. Usuwanie usługi Remix Cloud Run

   gcloud run services delete remix-app
   

   Gdy pojawi się pytanie, czy chcesz kontynuować, naciśnij klawisz Enter.

10. Zwalnianie miejsca w Cloud Shell

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

Cloud Shell oferuje trwał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 usunąć utworzone już aplikacje, uruchom te polecenia:

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

11. SvelteKit (Svelte)

1. Otwórz katalog, w którym chcesz utworzyć aplikację Angular.

   cd ~
   

2. Tworzenie aplikacji SvelteKit

   npx create-svelte svelte-app
   

   Gdy pojawi się prośba o wybór preferencji, naciśnij klawisz Enter, aby zaakceptować ustawienia domyślne.
3. Otwórz utworzony folder nowego projektu.

   cd svelte-app
   

4. Wdrażanie aplikacji

   gcloud run deploy --allow-unauthenticated
   

   Gdy pojawi się prośba o wybór preferencji, naciśnij klawisz Enter, aby zaakceptować ustawienia domyślne.

Przejście do aplikacji

Wdrażanie potrwa kilka minut. Po zakończeniu Cloud Run zwróci adres URL podobny do tego:

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

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

Opcjonalne czyszczenie

1. Usuwanie projektu SvelteKit lokalnie

   cd ..
   rm -rf svelte-app
   

2. Usuwanie usługi SvelteKit Cloud Run

   gcloud run services delete svelte-app
   

   Gdy pojawi się pytanie, czy chcesz kontynuować, naciśnij klawisz Enter.

12. SolidStart (Solid)

1. Otwórz katalog, w którym chcesz utworzyć aplikację Angular.

   cd ~
   

2. Tworzenie aplikacji SolidStart

   npx create-solid solid-app
   

   Gdy pojawi się prośba o wybór preferencji, naciśnij klawisz Enter, aby zaakceptować ustawienia domyślne.
3. Otwórz utworzony folder nowego projektu.

   cd solid-app
   

4. Wdrażanie aplikacji

   gcloud run deploy --allow-unauthenticated
   

   Gdy pojawi się prośba o wybór preferencji, naciśnij klawisz Enter, aby zaakceptować ustawienia domyślne.

Przejście do aplikacji

Wdrażanie potrwa kilka minut. Po zakończeniu Cloud Run zwróci adres URL podobny do tego:

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

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

Opcjonalne czyszczenie

1. Usuwanie projektu SolidStart lokalnie

   cd ..
   rm -rf solid-app
   

2. Usuwanie usługi SolidStart Cloud Run

   gcloud run services delete solid-app
   

   Gdy pojawi się pytanie, czy chcesz kontynuować, naciśnij klawisz Enter.

13. Astro

1. Otwórz katalog, w którym chcesz utworzyć aplikację Angular.

   cd ~
   

2. Tworzenie aplikacji Astro

   npx create-astro astro-app
   

   Gdy pojawi się prośba o wybór preferencji, naciśnij klawisz Enter, aby zaakceptować ustawienia domyślne.
3. Otwórz utworzony folder nowego projektu.

   cd astro-app
   

4. Dodawanie adaptera Astro dla Node.js

   npx astro add node
   

5. Aktualizowanie skryptu start w usłudze 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 wybór preferencji, naciśnij klawisz Enter, aby zaakceptować ustawienia domyślne.

Uwaga: Astro nie jest automatycznie obsługiwany przez Cloud Run, ponieważ domyślnie nie korzysta ze środowiska Node.js. Powyższe polecenie npm pkg set aktualizuje skrypt start w package.json do HOST=0.0.0.0 node ./dist/server/entry.mjs. Jeśli znasz polecenie uruchamiające aplikację, ustaw je jako start. Cloud Build spróbuje uruchomić aplikację za pomocą skryptu start.

Przejście do aplikacji

Wdrażanie potrwa kilka minut. Po zakończeniu Cloud Run zwróci adres URL podobny do tego:

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

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

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ę pytanie, czy chcesz kontynuować, naciśnij klawisz Enter.

14. Qwik

1. Otwórz katalog, w którym chcesz utworzyć aplikację Angular.

   cd ~
   

2. Tworzenie aplikacji Qwik

   npx create-qwik
   

   Gdy pojawi się prośba o wybór preferencji, naciśnij klawisz Enter, aby zaakceptować ustawienia domyślne.
3. Otwórz utworzony folder nowego projektu.

   cd qwik-app
   

4. Dodawanie adaptera Qwik dla Cloud Run

   npm run qwik add cloud-run
   

5. Wdrażanie aplikacji

   gcloud run deploy --allow-unauthenticated
   

   Gdy pojawi się prośba o wybór preferencji, naciśnij klawisz Enter, aby zaakceptować ustawienia domyślne.

Uwaga: Qwik używa pliku Dockerfile do określania sposobu kompilowania i uruchamiania projektu. Jeśli wybrana platforma nie jest automatycznie obsługiwana przez Cloud Run, możesz użyć pliku Dockerfile, aby wdrożyć preferowaną platformę, tak jak w przypadku Qwik. Cloud Build wyszuka plik Dockerfile, zanim spróbuje użyć pakietów Buildpack do automatycznego wdrożenia aplikacji.

Przejście do aplikacji

Wdrażanie potrwa kilka minut. Po zakończeniu Cloud Run zwróci adres URL podobny do tego:

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

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

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ę pytanie, czy chcesz kontynuować, naciśnij klawisz Enter.

15. Gratulacje!

Gratulujemy ukończenia ćwiczenia!

Zalecamy zapoznanie się z dokumentacją Krótkie wprowadzenie: wdrażanie w Cloud Run z repozytorium Git, aby przyszłe kompilacje mogły być wdrażane automatycznie przy każdym wypchnięciu do systemu kontroli wersji.

Co zostało omówione

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

16. Czyszczenie danych

Aby uniknąć przypadkowych opłat (np. jeśli ta usługa Cloud Run zostanie przypadkowo wywołana więcej razy niż miesięczna pula wywołań Cloud Run w ramach bezpłatnej wersji), możesz usunąć zadanie Cloud Run lub projekt utworzony w kroku 1.

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

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