e
sv

Flask ile Next.js Dağıtma

avatar

Yazılım Method

  • e 0

    Mutlu

  • e 0

    Eğlenmiş

  • e 0

    Şaşırmış

  • e 0

    Kızgın

  • e 0

    Üzgün

Flask ve Next.js, sırasıyla Python ve JavaScript programlama dillerinin üzerine inşa edilmiş iki benzersiz açık kaynaklı web çerçevesidir.

Next.js olmadan bir Flask uygulaması oluşturabilirsiniz ve ayrıca Flask olmadan bir Next.js uygulaması oluşturabilirsiniz. Ancak, kendinizi Flask ile bir uygulama oluşturduğunuz ve daha sonra sunucu tarafı oluşturma için Next.js’yi kullanmaya karar verdiğiniz bir durumda bulabilirsiniz.

Peki, bu noktada ne yaparsınız?

Deneyebileceğiniz bir şey, Next.js veya Flask’ı aşamalı olarak benimsemektir. Bu makalede, Next.js artımlı benimseme tasarımını kullanarak Next.js’nin bir Flask API ile sorunsuz çalışmasını ve bunu bir Ubuntu sunucusunda Nginx ile nasıl dağıtabileceğinizi göstereceğim.

Bu makalede ilerlemek için:

Next.js ve Flask’ta bir uygulama oluşturun

Gereksinimler

  • Node.js v12
  • piton

Örnek bir Next.js uygulaması oluşturarak başlayalım. Resmi Next.js belgelerini izleyerek Next.js’yi bilgisayarınıza kurmak için aşağıdaki komutu çalıştırın: npx create-next-app@latest . Temel bir uygulama kurmak için talimatları izleyin.

Temel Uygulama Kurulumu

Bu kurulum bize bir “Merhaba Dünya!” verecek. uygulama, dağıtıma hazır. Her şey yolunda giderse, yarn run dev terminalde çalıştırabilir ve çalıştığını doğrulamak için tarayıcınızda localhost:3000 adresini ziyaret edebilirsiniz. Bunun gibi bir şey görmelisiniz:

Next.js Uygulaması

Şimdilik bu kadar. Ardından, temel bir Flask API oluşturalım. Python’un kurulu olduğunu varsayacağım, ancak yoksa, işletim sisteminizin resmi belgelerindeki talimatları izleyerek kurabilirsiniz.

Öncelikle Python uygulamasını içerecek bir sanal ortam oluşturalım ve etkinleştirelim.

 python3 -m venv env ve kaynak ./env/bin/activate

Ardından, terminalinizde aşağıdaki komutu çalıştırarak Flask’ı kurun . Dinlendirici bir API oluşturmak için Flask-RESTful kullanacağız:

 pip Flask flask-rahatlatıcı yükleyin

Ardından hello.py adında bir dosya oluşturun ve buna aşağıdaki kodu ekleyin:

 şişeden ithalat şişesi
flask_restful'dan import reqparse, Api, Resource
uygulama = Şişe(__name__)
API = API(uygulama)

ayrıştırıcı = reqparse.RequestParser()
parser.add_argument('görev')
sınıf Mesajı(Kaynak):
    def get(self):
        dönüş {"mesaj": 'Merhaba Dünya'}
api.add_resource(Mesaj, '/api/merhaba')

eğer __name__ == '__main__':
    app.run(hata ayıklama=Doğru)

Şimdi hem Flask hem de Next.js uygulamasını kurduk. Onları birlikte çalıştırmaya devam edelim.

Yeniden yazmaları kullanarak Flask API’yi Next.js’ye entegre etme

Next.js yeniden yazma işlemleri , gelen bir istek yolunu farklı bir hedef yola eşlemenize olanak tanır.

Yeni oluşturduğumuz Next.js uygulamasının dizinine gidin, next.config.js dosyasını açın ve içeriği aşağıdaki kodla değiştirin:

 modül.exports = () => {
  const yeniden yazarlar = () => {
    dönüş [
      {
        kaynak: "/hello/:path*",
        hedef: "http://localhost:5000/hello/:path*",
      },
    ];
  };
  dönüş {
    yeniden yazar,
  };
};

Bu entegrasyonla, API, Next.js istemcisiyle aynı etki alanında ve bağlantı noktasındaymış gibi tüm API yollarımıza doğrudan Next.js’den erişebiliriz. Bu, yalnızca http://localhost:3000/api/ ‘yi aramamız gerekeceği ve 5000 numaralı bağlantı noktasındaki API’ye dolaylı olarak ulaşabileceğimiz anlamına gelir.

Bir örneğe bakalım.

/pages/index.js dosyasını açın ve bileşenini “Merhaba, Dünya!” ile değiştirin. aşağıdaki bileşen:

 stilleri '../styles/Home.module.css' dosyasından içe aktarın
'tepki'den { useEffect, useState } içe aktarın

varsayılan işlevi dışa aktar Home() {
    const [mesaj, setMessage] = useState("");
    const [yükleniyor, setLoading] = useState(true);

    useEffect(() => {
        getir('/merhaba/')
            .then(res => res.json())
            .then(veri => {
                setMessage(veri.mesaj);
                setYükleniyor(yanlış);
            })
    }, [])

    dönüş (
        <div className={styles.container}>
            <p> {!Yükleniyor ? mesaj : "Yükleniyor.."}</p>
        </div>
    )
}

Yukarıdaki kod, Fetch kullanarak Flask API ile konuşan basit bir Next.js bileşenidir. Gördüğünüz gibi, API çağrısına tam URL’yi koymak zorunda değildik. Next.js, başlangıçta belirlediğimiz ayarlara dayanarak bunu anladı.

Elbette, Flask API’yi doğrudan aramayı da seçebilirsiniz.

Nginx’i kurun

Artık çalışan bir entegrasyonumuz olduğuna göre, Nginx’te dağıtıma geçelim. Nginx’i sunucunuza kurun (bizim durumumuzda bir Ubuntu sunucusu), Nginx yapılandırmanız için nextflask olarak adlandıracağımız bir yapılandırma dosyası oluşturun ve dosyaya aşağıdaki kodu ekleyin:

 /** 
/etc/nginx/siteler kullanılabilir/nextflask
**/
sunucu {
    server_name yourdomainname.com www.yourdomainname.com;
    80 dinle;

  konum /merhaba/ {
    proxy_pass http://127.0.0.1:5000/hello/;
    proxy_http_sürüm 1.1;
    proxy_set_header Bağlantı "yükseltme";
    proxy_set_header Ana Bilgisayar $ana bilgisayar;
    proxy_set_header Yükseltme $http_upgrade;
    proxy_set_header X-Gerçek IP $remote_addr;
    proxy_set_header X-Forwarded-$proxy_add_x_forwarded_for için;
  }
  yer / {
    proxy_pass http://0.0.0.0:3000;
    proxy_http_sürüm 1.1;
    proxy_set_header Bağlantı "yükseltme";
    proxy_set_header Ana Bilgisayar $ana bilgisayar;
    proxy_set_header Yükseltme $http_upgrade;
    proxy_set_header X-Gerçek IP $remote_addr;
    proxy_set_header X-Forwarded-$proxy_add_x_forwarded_for için;
  }
}

Yukarıdaki Nginx yapılandırması, Next.js uygulamanızı yourdomainname.com yourdomainname.com/api/hello sunacaktır.

Bu yapılandırmayı ekledikten sonra aşağıdaki komutu çalıştırarak Nginx’i başlatın:

 sudo systemctl nginx.service'i başlat

Nginx’i Flask API ve Next.js sunucumuza hizmet edecek şekilde ayarlamak için bu kadar. Flask ve Next.js kodunuzu sunucunuza gönderin, bağımlılıkları kurun ve ayrı ayrı çalıştırın. Oh, bekle, onları şeytanlaştırmamız gerekecek.

Python uygulamalarını dağıtmak için iki popüler araç olan Supervisor veya Gunicorn ile bir Flask uygulamasını şeytanlaştırabilirsiniz.

Flask için Gunicorn ve Next.js için PM2 kullanacağız.

Flask API’sini ve Next.js API’sini bir hizmet olarak çalıştırın

Gunicorn ile Flask API’yi çalıştırarak başlayalım. Sunucunuzda çalışan bir Python kurulumunun olduğundan emin olun, ardından Gunicorn’u kurmak için sanal bir ortam oluşturun.

Sanal bir ortam oluşturun:

 python3 -m venv env

Ardından Gunicorn ve Flask’ı kurun:

 pip gunicorn şişesi yükleyin

Gunicorn’u Flask uygulamasına hizmet edecek şekilde ayarlayın

İlk olarak, kök dizinde bir wsgi.py dosyası oluşturun. Bu, uygulamanın giriş noktası olarak hizmet edecektir. Dosyaya aşağıdaki kodu ekleyin:

 // wsgi.py
merhaba içe aktarma uygulamasından

eğer __name__ == "__main__":
    uygulama.run()

Ardından, Gunicorn için sudo vim /etc/systemd/system/hello.service yapılandırma dosyası oluşturun ve buna aşağıdaki yapılandırmayı ekleyin:

 [Birim]
Description=Merhaba sunmak için Gunicorn örneği
sonra=network.hedef

[Hizmet]
kullanıcı=eze
Grup=www-veri
WorkingDirectory=/path/to/your/app/directory
ExecStart=/path/to/gunicorn/bin/gunicorn --workers 3 --bind unix:hello.sock -m 007 wsgi:app

[Düzenlemek]
WantedBy=çok kullanıcılı.hedef

Referans yollarına dikkat edin. Son olarak, terminalinizde aşağıdaki komutu çalıştırarak Gunicorn’u başlatın ve etkinleştirin:

 sudo systemctl merhaba başlat ve sudo systemctl merhaba etkinleştir

İşlemin başarılı olup olmadığını kontrol etmek için aşağıdaki komutu çalıştırarak durumu gözden geçirin:

 sudo systemctl durumu

Her şey yolunda giderse, Flask uygulamamız 500 numaralı bağlantı noktasında ve etki alanı yourdomainname.com kök etki alanında çalışır durumda olmalıdır.

Next.js uygulamasını PM2 ile çalıştırın

PM2 , Node.js uygulamaları için bir süreç yönetimi aracıdır. Kullanmak için PM2’yi aşağıdaki komutla global olarak kurun:

 pm2 kurulumu -g pm2

Ardından, Next.js kodunuzun bulunduğu dizinde bu komutu çalıştırın:

 pm2 start "npm run start" --name nextapp

Next.js uygulamanız 3000 numaralı bağlantı noktasında ve kök etki alanında, yourdomainname.com üzerinde çalışmaya başlayacaktır.

Tebrikler! Next.js ön uçunuzu Flask API’nizle başarıyla dağıttınız. İlk başta karmaşık görünebilir, ancak uygulamanızın düzgün çalışması için temel ortamı belirlediğinden, gelecekteki dağıtımlarınızda bu işlemi tekrarlamanız gerekmeyecektir. Yalnızca kodunuzu göndermeniz ve CI/CD ardışık düzeniniz tarafından yönetilebilen sunucunuzu yeniden başlatmanız gerekebilir.

Çözüm

Her zaman yeni teknolojiler gelir ve gider ve şimdi uygulamanızın genel mühendisliğini geliştirmek için Next.js’yi Flask ile dağıtmayı seçmenizin zamanı gelmiş olabilir. Umarım bu makaleyi faydalı bulursunuz.

Şahsen, eski bir Flask API’m vardı, ancak bazı Python arka uç uygulamalarını korurken Next.js ile geliştirmeye devam etmek istedim. Mevcut API’mi kesintiye uğratmadan veya bozmadan geçiş yapmayı çok kolay buldum.

Bu makaledeki işlemi çoğaltmak için klonlayabileceğiniz bu örnek Next.js projesine göz atın. Şerefe!

etiketlerETİKETLER
Üzgünüm, bu içerik için hiç etiket bulunmuyor.

Sıradaki içerik:

Flask ile Next.js Dağıtma