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:
- Bir Gatsby uygulaması oluşturma
- Azure Static Web Apps sitesi ayarlama
- Gatsby uygulamasını Azure'a dağıtma
Azure aboneliğiniz yoksa başlamadan önce birücretsiz Azure hesabı 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 Uygulaması Oluşturma
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"
Dekont
Gatsby'nin en son sürümünü kullanıyorsanız package.json dosyasını "engines": { "node": ">=18.0.0" },
Uygulamanızı GitHub'a gönderme
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
Web uygulamanızı dağıtma
Aşağıdaki adımlarda yeni bir statik site uygulaması oluşturma ve bunu üretim ortamına dağıtma adımları gösterilmektedir.
Uygulamayı oluşturma
Azure portal'a gidin
Kaynak Oluştur'u seçin
Statik Web Uygulamaları için arama yapın
Statik Web Uygulamaları'nı seçin
Oluştur'u seçin
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 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. Dekont
Herhangi bir depo görmüyorsanız GitHub'da Azure Static Web Apps'i yetkilendirmeniz gerekebilir. GitHub deponuza gidin ve Ayarlar Uygulamalar Yetkili OAuth Uygulamaları'na gidin, Azure Statik Web Uygulamaları'nı ve 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.
Gözden geçir ve oluştur
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.
Kaynakları temizleme
Bu uygulamayı kullanmaya devam etmeyecekseniz, aşağıdaki adımları izleyerek Azure Statik Web Uygulaması kaynağını silebilirsiniz:
- Azure portalı açın
- Üstteki arama çubuğunda, uygulamanızı daha önce sağladığınız ada göre arayın
- Uygulamaya tıklayın
- Sil düğmesine tıklayın
- Silme eylemini onaylamak için Evet'e tıklayın