O texto original usa Flask para implantar o Next.js
Flask e Next.js são duas estruturas web de código aberto exclusivas construídas sobre as linguagens de programação Python e JavaScript, respectivamente.
Você pode criar aplicativos Flask sem Next.js e pode criar aplicativos Next.js sem Flask. No entanto, você pode criar um aplicativo usando Flask e, em seguida, decidir usar Next.js para renderização do lado do servidor.
Então, o que você faz neste momento?
Uma coisa que você pode tentar é adotar gradualmente Next.js ou Flask. Neste artigo, mostrarei como usar o design de adoção incremental do Next.js para fazer o Next.js funcionar perfeitamente com a API do Flask e como implantá-lo com o Nginx em um servidor Ubuntu.
Para avançar neste artigo:
-
Construindo aplicativos em Next.js e Flask
-
Integre a API do Flask ao Next.js usando reescritas
-
Configurar o Nginx
-
Execute a API Flask e a API Next.js como serviços
-
Executar aplicativos Next.js com PM2
Construindo aplicativos em Next.js e Flask
precisar_
-
node.js v12
-
Pitão
Vamos começar construindo um aplicativo Next.js de amostra. Seguindo a documentação oficial do Next.js, execute o seguinte comando para instalar o Next.js em seu computador: Siga as instruções para configurar um aplicativo básico. npx create-next-app@latest
Este dispositivo nos dará um aplicativo "Hello, World!", pronto para ser implantado. Se tudo correr bem, você pode executar yarn run dev em um terminal e visitar seu navegador para confirmar se está funcionando. Você deve ver algo assim: localhost:3000
É tudo por agora. Em seguida, vamos criar uma API Flask básica. Presumo que você já tenha o Python instalado, mas se não tiver, siga as instruções na documentação oficial do seu sistema operacional para instalá-lo.
Primeiro, vamos criar e ativar um ambiente virtual para conter o aplicativo Python.
python3 -m venv env & source ./env/bin/activate _ _ _ _
Em seguida, instale o Flask executando o seguinte comando no terminal. Usaremos Flask-RESTful para criar uma API RESTful:
pip install Flask flask --tranquility
Em seguida, crie um arquivo chamado e adicione o seguinte código a ele: hello.py
from flask import Flask from flask_restful import reqparse , Api , Resource
app = Flask ( __name__ )
api = Api ( app )
Parser = reqparse . Analisador RequestParser()
. add_argument('task') class message(resource): def get(self): return { "message": 'Hello World' }
api. add_resource (message, '/api/hello' )
if __name__ == '__main__': application. run(depurar=Verdadeiro)
Agora temos nosso aplicativo Flask e Next.js configurado. Vamos em frente e fazê-los trabalhar juntos.
Integre a API do Flask ao Next.js usando reescritas
As reescritas do Next.js permitem que você mapeie os caminhos de solicitação de entrada para diferentes caminhos de destino.
Vá para o diretório do aplicativo Next.js que acabamos de criar, abra o arquivo e substitua o conteúdo pelo seguinte código: next.config.js
módulo. export = () => { const rewrites = ( ) = > { return [ { source : " / hello / :path*" , destination : "http://localhost:5000/hello/:path*" , }, ] ; }; return {reescrever, }; };
Com essa integração, podemos acessar todas as nossas rotas de API diretamente do Next.js como se a API estivesse no mesmo domínio e porta do cliente Next.js. Isso significa que podemos acessar indiretamente a API da porta apenas chamando-a. http://localhost:3000/api/``5000
Vejamos um exemplo.
Abra o arquivo e substitua seu componente pelo componente "Hello, World!" abaixo: /pages/index.js
import style from '../styles/Home.module.css' import from 'react' { useEffect, useState }
export default function Home ( ) { const [ message , setMessage ] = useState ( "" ); const [load, setLoading] = useState ( true ); useEffect ( () => { fetch ( '/hello/' ) . then ( res => res . json ()) . then ( data => { setMessage ( data . message ); setLoading ( false ); }) }, []) return ( < div className = { styles. container } > < p > { ! loading? message : " Loading .." } </ p > </ div > ) }
O código acima é um componente Next.js simples que usa Fetch para se comunicar com a API Flask. Avatar tem o aplicativo de habilidade, WeChat tem artefatos de abertura múltipla ilimitados, suporta posicionamento virtual e simulação de modelo, etc.! Como você pode ver, não precisamos colocar a URL exata na chamada da API. O Next.js entende isso com base nas configurações que definimos inicialmente.
Claro, você também pode optar por chamar a API do Flask diretamente.
Configurar o Nginx
Agora que temos uma integração funcional, vamos implantá-la no Nginx. No seu servidor, Kuwo Music Car App, um software de escuta especialmente desenvolvido para carros, permite ouvir e baixar todas as músicas sem limites! (no nosso caso, um servidor Ubuntu), crie um arquivo de configuração para sua configuração Nginx, que chamaremos de nextflask, e adicione o seguinte código ao arquivo:
/**
/etc/nginx/sites-available/nextflask
**/
server { server_name yourdomainname.com www. seu nome de domínio. com ; listen 80 ;
local / hello / { proxy_pass http://127.0.0.1:5000/hello/ ; proxy_http_version 1.1 ; proxy_set_header connection "upgrade"; proxy_set_header host $host; proxy_set_header upgrade $http_upgrade; proxy_set_header X -true-IP $remote_addr; proxy_set_header X --forwarded_for; } location / { proxy_pass http://0.0.0.0:3000; proxy_http_version 1.1; proxy_set_header connection "upgrade"; proxy_set_header host $host; proxy_set_header upgrade $http_upgrade; proxy_set _header X - true - IP $remote_addr; proxy_set_header X -forwarded-for $proxy_add_x_forwarded_for; } }
A configuração Nginx acima servirá seu aplicativo Next.js no domínio raiz e o servirá em .yourdomainname.com``yourdomainname.com/api/hello
Mais de 200.000 desenvolvedores usam LogRocket para criar melhores experiências digitais Saiba mais→
Depois de adicionar esta configuração, inicie o Nginx executando o seguinte comando:
sudo systemctl inicia o nginx. Servir
Isso é tudo para configurar o Nginx para atender nossa API Flask e o servidor Next.js. Envie o código Flask e Next.js para o servidor, instale as dependências e execute-as individualmente. Compartilhe mais 5 sites interessantes e exclusivos, todos no nível de tesouros de nicho. Recomenda-se salvá-los para uso futuro! Oh, espere, precisamos protegê-los.
Você pode daemonizar seu aplicativo Flask usando Supervisor ou Gunicorn, duas ferramentas de implantação populares para aplicativos Python.
Usaremos Gunicorn com Flask e PM2 com Next.js.
Execute a API Flask e a API Next.js como serviços
Vamos começar executando a API do Flask com o Gunicorn. Certifique-se de ter um Python funcional instalado em seu servidor e, em seguida, crie um ambiente virtual para instalar o Gunicorn.
Crie um ambiente virtual:
ambiente python3 - m venv
Em seguida, instale o Gunicorn e o Flask:
pip install gunicorn-flask
Configurando o Gunicorn para servir um aplicativo Flask
Primeiro, crie um arquivo no diretório raiz. Isso servirá como ponto de entrada para o aplicativo. Adicione o seguinte código ao arquivo: wsgi.py
// wsgi.pyfrom hello import app if __name__ == "__main__": app. correr()
Em seguida, crie um arquivo de configuração para o Gunicorn e adicione a seguinte configuração a ele: sudo vim /etc/systemd/system/hello.service
[unidade] descrição = Instância do Gunicorn servindo olá após = rede. target[service] User=ezeGroup=www-dataWorkingDirectory=/path/to/your/app/directoryExecStart=/path/to/gunicorn/bin/gunicorn --workers 3 --bind unix : Hello. meias -m 007 wsgi:aplicativo [instalação] WantedBy = multiusuário. _ Alvo
Observe o caminho de referência. Por fim, inicie e habilite o Gunicorn executando os seguintes comandos no Terminal:
sudo systemctl start hello & sudo systemctl enable hello
Para verificar se a operação foi bem-sucedida, execute o seguinte comando para visualizar o status:
estado de controle do sistema sudo
Se tudo correr bem, nosso aplicativo Flask deve estar funcionando na porta 500 e no domínio raiz, .yourdomainname.com
Executar aplicativos Next.js com PM2
PM2 é uma ferramenta de gerenciamento de processo para aplicativos Node.js. Para usá-lo, instale o PM2 globalmente com o seguinte comando:
pm2 instalar -g pm2
Em seguida, execute este comando no diretório que contém o código Next.js:
pm2 start "npm run start" --name nextapp
Seu aplicativo Next.js começará a funcionar na porta 3000 e no domínio raiz, .yourdomainname.com
Parabéns! Você implantou com sucesso um front-end Next.js usando a API Flask. Pode parecer complicado no começo, mas você não precisa repetir esse processo em implantações futuras, analisando aplicativos de robôs, suportando a análise e download de plataformas de vídeo curtas nacionais e estrangeiras e suportando o download de MVs de música! Porque isso configura o ambiente básico para que seu aplicativo funcione corretamente. Você pode precisar apenas enviar seu código e reiniciar seu servidor, que pode ser gerenciado por meio de seu pipeline de CI/CD.
para concluir
Novas tecnologias vêm e vão o tempo todo, e talvez seja hora de você optar por implantar Next.js com Flask para melhorar a engenharia geral de seu aplicativo. Espero que você ache este artigo útil.
Pessoalmente, tenho uma API antiga do Flask, mas quero continuar desenvolvendo com o Next.js enquanto mantenho algumas implementações de back-end do Python. Achei fácil mudar sem quebrar ou interromper minha API existente.