Öğretici: Bir Gatsby sitesini Azure Static Web Apps

Bu makalede, bir Gatsby web uygulamasının nasıl oluşturularak Azure Static Web Apps. Nihai sonuç, uygulamanın nasıl Static Web Apps yayımlanır ve yayımlanırken size denetim GitHub Actions yeni bir sitedir (ilişkili kullanıcı grubuyla birlikte).

Bu öğreticide şunların nasıl yapıldığını öğreneceksiniz:

Azure aboneliğiniz yoksa başlamadan önce ücretsiz bir hesap oluşturun.

Önkoşullar

• Etkin aboneliği olan bir Azure hesabı. Hesabınız yoksa ücretsiz bir hesap oluşturabilirsiniz.
• GitHub hesabı. Hesabınız yoksa ücretsiz bir hesap oluşturabilirsiniz.
• Node.js yüklü.

Gatsby Uygulaması oluşturma

Gatsby Komut Satırı Arabirimini (CLI) kullanarak bir Gatsby uygulaması oluşturun:

1. Terminal açma

2. Gatsby CLI ile yeni bir uygulama oluşturmak için npx aracını kullanın. Bu birkaç dakika sürebilir.

   npx gatsby new static-web-app
   

3. Yeni oluşturulan uygulamaya gidin

   cd static-web-app
   

4. Git depo başlatma

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

Uygulamalarınızı GitHub'a itme

Yeni bir depolama kaynağı oluşturmak için GitHub'da bir Azure Static Web Apps gerekir.

1. https://github.com/new gatsby-static-web-app adlı depodan boş bir GitHub deposu oluşturun (BENİ OKUMA) oluşturun.

2. Ardından, yeni oluşturduğunuz GitHub deposunu yerel deponuza uzak olarak ekleyin. Aşağıdaki komutta yer tutucu yerine GitHub Kullanıcı adınızı eklediğinizden emin olun <YOUR_USER_NAME> .

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

3. Yerel deponuzu GitHub 'a iletin.

   git push --set-upstream origin main
   

Web uygulamanızı dağıtın

Aşağıdaki adımlarda, yeni bir statik site uygulamasının nasıl oluşturulacağı ve bir üretim ortamına nasıl dağıtılacağı gösterilmektedir.

Uygulama oluşturma

1. Azure portalına gidin

2. Kaynak oluştur ' u seçin

3. Statik Web Uygulamaları için arama yapın

4. Statik Web Apps seçin

5. Oluştur’u seçin

6. Temel bilgiler sekmesinde, aşağıdaki değerleri girin.

   Özellik	Değer
   Abonelik	Azure abonelik adınız.
   Kaynak grubu	My-Gatsby grubu
   Ad	Uygulamam-Gatsby-uygulama
   Plan türü	Ücretsiz
   Azure Işlevleri API 'SI ve hazırlama ortamları için bölge	Size en yakın bölgeyi seçin.
   Kaynak	GitHub

7. GitHub Ile oturum açma ve GitHub ile kimlik doğrulama ' yı seçin.

8. Aşağıdaki GitHub değerlerini girin.

   Özellik	Değer
   Kuruluş	İstediğiniz GitHub kuruluşunuzu seçin.
   Depo	Gatsby-static-Web-App' i seçin.
   Dal	Ana öğesini seçin.

9. Yapı ayrıntıları bölümünde, derleme ön ayarları açılır listesinden Gatsby ' i seçin ve varsayılan değerleri koruyun.

Gözden geçir ve oluştur

1. Ayrıntıların tümünün doğru olduğunu doğrulamak için gözden geçir + oluştur düğmesini seçin.

2. App Service Statik Web Uygulaması'nın oluşturulmasını başlatmak ve dağıtım için bir GitHub Eylemi sağlamayı başlatmak için Oluştur'a seçin.

3. Dağıtım tamamlandıktan sonra Kaynağına git'e tıklayın.

4. Kaynak ekranında, dağıtılan uygulamanızı açmak için URL bağlantısına tıklayın. GitHub Eyleminin tamamlanması için bir veya iki dakika beklemesi gerekir.

   

Kaynakları temizleme

Bu uygulamayı kullanmaya devam edemeyecekecekseniz, Azure statik Web uygulaması kaynağını aşağıdaki adımlarla silebilirsiniz:

1. Azure portalı açın
2. En üstteki arama çubuğunda, daha önce verdiğiniz adı izleyerek uygulamanızı arayın
3. Uygulamaya tıklayın
4. Sil düğmesine tıklayın
5. Silme eylemini onaylamak için Evet ' e tıklayın

Sonraki adımlar