Statik olarak işlenen Next.js Web sitelerini Azure statik Web Apps dağıtma

Bu öğreticide, Next.js üretilmiş bir statik Web sitesini Azure statik Web Appsdağıtmayı öğreneceksiniz. Next.js özellikleri hakkında daha fazla bilgi için bkz. Başlangıç şablonu Benioku dosyası.

Önkoşullar

• Etkin aboneliği olan bir Azure hesabı. Ücretsiz hesap oluşturun.
• GitHub hesabı. Ücretsiz hesap oluşturun.
• Node.js yüklendi.

Next.js uygulaması ayarlama

Uygulamanızı oluşturmak için Next.js CLı kullanmak yerine bir başlangıç deposu kullanabilirsiniz. Başlangıç deposu, dinamik yolları destekleyen mevcut bir Next.js uygulaması içerir.

başlamak için, bir şablon deposundan GitHub hesabınız altında yeni bir depo oluşturun.

1. Şuraya gidin https://github.com/staticwebdev/nextjs-starter/generate

2. Depoyu nextjs-Starter olarak adlandırın

3. Sonra, yeni depoyu makinenize kopyalayın. Hesap adınızla değiştirdiğinizden emin olun <YOUR_GITHUB_ACCOUNT_NAME> .

   git clone http://github.com/<YOUR_GITHUB_ACCOUNT_NAME>/nextjs-starter
   

4. Yeni kopyalanmış Next.js uygulamasına gidin:

   cd nextjs-starter
   

5. Bağımlılıkları yükler:

   npm install
   

6. Geliştirme aşamasında Next.js uygulamayı Başlat:

   npm run dev
   

http://localhost:3000Aşağıdaki Web sitesini tercih ettiğiniz tarayıcınızda açık olarak görmeniz gereken uygulamayı açmak için şuraya gidin:

Bir çerçeve veya kitaplık seçtiğinizde, seçili öğe hakkında bir Ayrıntılar sayfası görürsünüz:

Statik Web sitenizi dağıtın

Aşağıdaki adımlarda, uygulamanızı Azure statik Web Apps bağlama gösterilmektedir. Azure 'da bir kez uygulamayı bir üretim ortamına dağıtabilirsiniz.

Statik uygulama oluşturma

1. Azure Portalgidin.

2. Kaynak Oluştur’u seçin.

3. Statik Web Apps arayın.

4. Static 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-nextjs-Grup
   Ad	My-nextjs-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 oturum aç ' ı seçin ve GitHub kimlik doğrulaması yapın.

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

   Özellik	Değer
   Kuruluş	uygun GitHub organizasyonunu seçin.
   Depo	Nextjs-Starter' ı seçin.
   Dal	Ana öğesini seçin.

9. Yapı ayrıntıları bölümünde, derleme ön ayarlarından özel ' i seçin. Yapı yapılandırması için aşağıdaki değerleri ekleyin.

   Özellik	Değer
   Uygulama konumu	/ Kutuya yazın.
   API konumu	Bu kutuyu boş bırakın.
   Çıkış konumu	Kutuya yazın.

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ğlamak için oluştur ' u seçin.

3. Dağıtım tamamlandıktan sonra kaynak ' a gidin.

4. Genel bakış penceresinde, dağıtılan uygulamanızı açmak için URL bağlantısını seçin.

Web sitesi hemen yüklü değilse, derleme çalışmaya devam eder. İş akışı tamamlandıktan sonra, Web uygulamanızı görüntülemek için tarayıcıyı yenileyebilirsiniz.

Eylemler iş akışının durumunu denetlemek için, deponuzdaki eylemler panosuna gidin:

https://github.com/<YOUR_GITHUB_USERNAME>/nextjs-starter/actions

Artık dalda yapılan değişiklikler, main Web sitenizin yeni bir derlemesini ve dağıtımını başlatır.

Değişiklikleri Eşitle

uygulamayı oluştururken Azure Static Web Apps, deponuzda bir GitHub eylemler dosyası oluşturdu. En son yerel deponuza doğru çekerek sunucu ile eşitler.

Terminale dönün ve aşağıdaki komutu çalıştırın git pull origin main .

Kaynakları temizleme

Bu uygulamayı kullanmaya devam edemeyecekinizde, Azure statik Web Apps örneğini aşağıdaki adımlarla silebilirsiniz:

1. Azure portalını açın.
2. En üstteki arama çubuğundan My-nextjs-Group için arama yapın.
3. Grup adı ' nı seçin.
4. Sil düğmesini seçin.
5. Silme eylemini onaylamak için Evet ' i seçin.