Olá a todos. Juntamente com a primavera, novos cursos chegaram à OTUS, que estamos começando a apresentar hoje. Já está aberto o recrutamento para o curso "React.js developer" . Você pode aprender mais sobre o curso no seminário on-line gratuito , que será realizado em 11 de março. Como parte do mesmo webinar, um pequeno aplicativo da web no ReactJS será desenvolvido.
E agora sugerimos que você leia o artigo sobre a implantação do seu primeiro aplicativo, que foi escrito pelo nosso autor freelancer.
O modelo de inicialização Create-react-app e Heroku são ótimas ferramentas para criar rapidamente aplicativos baseados em nuvem, mas a documentação do React e do Heroku inclui surpreendentemente poucas informações sobre como implantar o aplicativo React no Heroku. As etapas descritas neste artigo funcionarão em qualquer projeto criado usando create-react-app . Em nosso artigo, instalaremos no Heroku um aplicativo simples de tarefas com o mínimo de back-end, apenas para observar o próprio processo. Mas as primeiras coisas primeiro:O que é o Heroku em geral? Por que eu preciso dele?
O Heroku é uma plataforma PaaS (plataforma como serviço) baseada em nuvem que suporta muitas linguagens de programação (e realmente se orgulha e se destaca). A história do Heroku começou em 2007 e, em seguida, Ruby foi a primeira linguagem de programação. Agora ele suporta Java, Node.js, Scala, Clojure, Python, PHP e Go.Por que preciso dessa nuvem? Eu posso comprar hospedagem barata
Sim, você pode comprar qualquer hospedagem para si mesmo e instalar o servidor Node.js., se esse serviço for suportado na hospedagem. No entanto, as plataformas em nuvem têm qualidades como, por exemplo, medição de elasticidade e consumo - se muitos usuários visitarem seu serviço, provavelmente a plataforma automaticamente (ou você mesmo usando as ferramentas fornecidas pela plataforma) aumentará ou diminuirá o fluxo. Contabilizar o consumo significa que você pagará apenas pelos recursos que estão com demanda. As plataformas em nuvem têm muito mais vantagens, uma lista completa pode ser encontrada aqui . Bem, iremos diretamente para a implantação.Criando seu próprio aplicativo React
Que tipo de modelo de criação de reação é esse ? Provavelmente, é impossível estar um pouco envolvido no desenvolvimento de aplicativos React e não saber sobre isso. Este modelo fornece React, React-dom, Webpack, ESLint "sob o capô". Obviamente, você mesmo pode criar seu próprio aplicativo React, mas por que criar um aplicativo complexo com várias dependências quando pode usar uma bicicleta pronta?Para começar, verifique se você tem o Node.js instalado .Para criar um novo aplicativo, digite os seguintes comandos no console: npx create-react-app test-app
cd test-app
Nota útil, , create-react-app . npm install -g create-react-app. , ( , ), - , react-scripts 3.4.0. , npm uninstall -g create-react-app.
Ok, você entregou o pacote e agora deseja implantá-lo. Para não implantar um pacote simples com um componente que o create-react-app entrega imediatamente, decidi escrever um pequeno aplicativo de tarefas, cujo código-fonte, se você também quiser tentar preenchê-lo, pode ser encontrado aqui . Em suma, o estado é salvo lá na forma de entradas novas e elegantes , onde o texto dos casos e seu ID são salvos , os quais são gerados diretamente Date.now(). Participei do layout dos componentes do Material-UI reagir .Você pode colocar esse aplicativo para si mesmo e implantá-lo com: npm i -D
npm start
Então temos uma oportunidade incrível para brincar e criar nossos próprios assuntos. No entanto, todos os recursos que estão neste aplicativo são para salvar as coisas no estado . Eu não fiz nenhuma liga para o servidor ou, pelo menos, para o localStorage , o objetivo deste artigo não é esse. Suponha que eu seja muito paranóico e registrarei meus assuntos em apenas uma inclusão da guia do navegador.Crie seu favicon
Por que precisamos de um servidor Node.js. se não houver trabalho com o banco de dados? Usando o servidor, forneceremos o favicon e todo o restante do código. Em nosso aplicativo React , vá para a pasta pública e exclua o modelo favicon.ico de lá. Vou pegar o ícone daqui e transferi-lo para a pasta pública.Crie seu servidor Express
Em seguida, criamos nosso servidor Express para atender à compilação. Diretamente na pasta do aplicativo, crie um arquivo server.jsno qual o trabalho do nosso back-end se desenrolará.Escrevemos o seguinte: const express = require('express');
const favicon = require('express-favicon');
const path = require('path');
const port = process.env.PORT || 8080;
const app = express();
app.use(favicon(__dirname + '/build/favicon.png'));
app.use(express.static(__dirname));
app.use(express.static(path.join(__dirname, 'build')));
app.get('/ping', function (req, res) {
return res.send('pong');
});
app.get('/*', function (req, res) {
res.sendFile(path.join(__dirname, 'build', 'index.html'));
});
app.listen(port);
Como usamos os pacotes express , express-favicon e path , precisamos instalá-los: yarn add express express-favicon path -D
Em nós, package.jsonalteramos o comando start para o seguinte: "start": "node server.js",
Executar construção
Em seguida, precisamos construir o aplicativo usando o seguinte comando: yarn build
Seria bom testar se nosso aplicativo está funcionando corretamente. Para isso, recrutamos yarn starte avaliamos como funciona corretamente.Ocultar mapa de origem
Talvez você não queira que ninguém possa acessar seu código-fonte. Nesse caso, você precisa remover o acesso ao seu sourcemap. Para fazer isso, crie um arquivo no repositório .enve proíba a geração de mapas nele: GENERATE_SOURCEMAP=false
Nota útilSource map ( , , , , - ). — source map, , .
Implantar diretamente
Se você ainda não possui uma conta no heroku , deve se registrar aqui . Para implantação, você também precisará instalar o Heroku CLI a partir daqui . Teste sua operação escrevendo o logon heroku na linha de comando. Em seguida, você encontrará um redirecionamento para o site heroku, onde precisa fazer login.Em seguida, insira o nome do seu aplicativo. No meu caso, será todoisakura313 , porque você não pode usar caracteres especiais e sublinhados no nome do aplicativo: heroku create todoisakura313
Em seguida, enviaremos nossa compilação usando os seguintes comandos: npm install
git add --all
git commit -m "first commit"
git push heroku master
Esses comandos permitem adicionar dependências, inicializar gite fazer o download do próprio aplicativo.Bem! Em geral, está tudo pronto, agora o aplicativo já deve aparecer no endereço https://< >.herokuapp.com/. Você pode abrir o aplicativo digitando os seguintes comandos no console:heroku open
Se algo der errado, descubra o que há de errado com a equipe heroku logs --tail. No entanto, em geral, se você não se afastou das instruções deste artigo, deveria ter conseguido.Isso é tudo! Obrigado pela atenção. Um aplicativo de trabalho pode ser encontrado aqui e com seu código finalizado - aqui .E aqueles que leram até o final, convidamos você para outro webinar gratuito , no qual você aprenderá os pontos fortes e fracos dos frameworks JS mais populares para o desenvolvimento do Frontend, entenderá para quais tarefas qual framework é mais adequado e você pode decidir qual é o melhor estudar.