Gatsby sitesini Azure Static Web Apps'e dağıtma

Bu makalede, Gatsby web uygulamasının nasıl oluşturulacağı ve Azure Static Web Apps'e nasıl dağıtılacağı gösterilmektedir. Nihai sonuç, uygulamanın nasıl derlendiğini ve yayımlandığını denetlemenizi sağlayan yeni bir Static Web Apps sitesidir (ilişkili GitHub Actions ile birlikte).

Bu öğreticide aşağıdakilerin nasıl yapılacağını öğreneceksiniz:

Azure hesabınız yoksa, başlamadan önce ücretsiz hesap oluşturun.

Önkoşullar

Etkin aboneliği olan bir Azure hesabı. Hesabınız yoksa ücretsiz bir hesap oluşturabilirsiniz.
Bir GitHub hesabı. Hesabınız yoksa ücretsiz bir hesap oluşturabilirsiniz.
Yüklü bir Git kurulumu. Yoksa Git'i yükleyebilirsiniz.
Node.js uygulamasının yüklenmiş olması.

Gatsby Komut Satırı Arabirimi'ni (CLI) kullanarak bir Gatsby uygulaması oluşturun:

Terminal açma
Gatsby CLI ile yeni bir uygulama oluşturmak için npx aracını kullanın. Bu işlem birkaç dakika sürebilir.
```
npx gatsby new static-web-app
```
Yeni oluşturulan uygulamaya gitme
```
cd static-web-app
```

Git deposunu başlatma

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

Not

Gatsby'nin en son sürümünü kullanıyorsanız, package.json "altyapıları" içerecek şekilde değiştirmeniz gerekebilir: { "node": ">=18.0.0" },

Yeni bir Azure Static Web Apps kaynağı oluşturmak için GitHub'da bir deponuz olmalıdır.

adlı gatsby-static-web-app uygulamasından boş bir GitHub deposu oluşturun (README oluşturmayın).https://github.com/new
Ardından, yeni oluşturduğunuz GitHub deposunu yerel deponuza uzak depo olarak ekleyin. Aşağıdaki komutta yer tutucu yerine GitHub kullanıcı adınızı eklediğinizden <YOUR_USER_NAME> emin olun.
```
git remote add origin https://github.com/<YOUR_USER_NAME>/gatsby-static-web-app
```
Yerel deponuzu GitHub'a gönderin.
```
git push --set-upstream origin main
```

Aşağıdaki adımlarda yeni bir statik site uygulaması oluşturma ve bunu üretim ortamına dağıtma adımları gösterilmektedir.

Temel Bilgiler sekmesinde aşağıdaki değerleri girin.

Özellik	Değer
Abonelik	Azure aboneliğinizin adı.
Kaynak grubu	my-gatsby-group
Ad	my-gatsby-app
Plan türü	Ücretsiz
Azure İşlevleri API ve hazırlama ortamları için bölge	Size en yakın bölgeyi seçin.
Kaynak	GitHub (İngilizce)

GitHub ile oturum açın'ı seçin ve GitHub ile kimlik doğrulaması yapın.
Aşağıdaki GitHub değerlerini girin.

Özellik Değer

Kuruluş İstediğiniz GitHub kuruluşunu seçin.

Depo gatsby-static-web-app öğesini seçin.

Dal Ana öğesini seçin.

Not

Herhangi bir depo görmüyorsanız GitHub'da Azure Static Web Apps'i yetkilendirmeniz gerekebilir. GitHub deponuza göz atın ve Ayarlar Uygulamaları Yetkili OAuth Uygulamaları'na >gidin, Azure Statik Web Uygulamaları'nı>ardından Ver'i seçin. Kuruluş depoları için, izinleri vermek için kuruluşun sahibi olmanız gerekir.
Derleme Ayrıntıları bölümünde, Derleme Ön Ayarları açılan listesinden Gatsby'yi seçin ve varsayılan değerleri koruyun.

Özellik	Değer
Kuruluş	İstediğiniz GitHub kuruluşunu seçin.
Depo	gatsby-static-web-app öğesini seçin.
Dal	Ana öğesini seçin.

Ayrıntıların doğru olduğunu doğrulamak için Gözden Geçir + Oluştur'u seçin.
App Service Statik Web Uygulaması'nın oluşturulmasını başlatmak ve dağıtım için bir GitHub Actions sağlamak için Oluştur'u seçin.
Dağıtım tamamlandıktan sonra Kaynağa git'i seçin.
Kaynak ekranında, dağıtılan uygulamanızı açmak için URL bağlantısını seçin. GitHub Actions'ın tamamlanması için bir veya iki dakika beklemeniz gerekebilir.

Bu uygulamayı kullanmaya devam etmeyecekseniz, aşağıdaki adımları izleyerek Azure Statik Web Uygulaması kaynağını silebilirsiniz:

Bu sayfayı yararlı buldunuz mu?