Como criar e implantar um aplicativo de resposta sem servidor - Agatetepê
Como criar e implantar um aplicativo de resposta sem servidor
Frank Zickert Blocked Unblock Seguir Seguindo 8 de julho
TL; DR: Os Componentes de Infraestrutura permitem que você crie, inicie e implante um Aplicativo de Reação sem Servidor facilmente. O componente <SinglePageApp/> faz toda a configuração técnica para você e permite que você se concentre em escrever a lógica de negócios do seu aplicativo.
O que quer que você construa – o equipamento certo pode ser de grande ajuda!
Os componentes de infraestrutura fornecem uma maneira fácil de criar aplicativos React sem ter que lidar com a configuração. Não há necessidade de configurar manualmente o Webpack, o Babel e o Serverless!
A parte de código a seguir é um aplicativo completo de resposta sem servidor que você pode criar , iniciar (localmente) ou implantar (para AWS) com um único comando.
Obtenha seu código de clichê personalizado
O Code-Architect fornece a maneira mais fácil de começar a usar os componentes de infraestrutura . Ele permite que você crie seu código clichê personalizado com apenas alguns cliques.
Faça login com sua conta do GitHub em www.code-architect.com
Especifique um nome para o seu aplicativo React (como myapp ) e um nome de um ambiente (por exemplo, dev )
Baixe e descompacte seu código clichê
Instale todas as dependências, execute: npm install (talvez você precise de sudo rights)
Além disso, o Code-Architect fornece um serviço gerenciado! Você nem precisa de sua própria conta da AWS!
Alternativamente, dê uma olhada neste repositório do GitHub . Ele contém um exemplo que você pode bifurcar ou clonar e simplesmente executar a npm install .
Você criou seu aplicativo com o create-react-app npm init create-react-app ou o iniciou com o npm init ? Sem problemas. Você pode configurar o Infrastructure-Components com as seguintes etapas:
1 Os componentes da infraestrutura da biblioteca contêm os componentes React que você pode usar diretamente no código-fonte do seu aplicativo.
npm install --save infrastructure-components
2 Os scripts de infraestrutura da biblioteca compreendem os scripts necessários para criar , iniciar e implantar o aplicativo. Para este lib contém muitas ferramentas que você só precisa durante o desenvolvimento / implantação, instale esta biblioteca como devDependency . Você também precisa instalar o serverless-single-page-app-plugin serverless e serverless-single-page-app-plugin como devDependency :
scripts de infra-estrutura
3 Edite o comando de compilação no seu arquivo package.json . Os scripts da infraestrutura da biblioteca fornecem o comando scripts . Execute-o com a build argumentos e o caminho relativo para o arquivo que exporta o componente <SinglePageApp/> , por exemplo, src/index.tsx .
"build": "scripts constroem src / index.tsx"
O processo de build adiciona scripts adicionais ao seu package.json . Isso permite que você inicie sua pilha de software offline no modo de desenvolvimento dinâmico e permita implantá-la na AWS.
Iniciar offline no modo de desenvolvimento a quente
scripts {your_app_name} src/index.tsx ou npm run {your_app_name} inicia seu aplicativo da Web no hot-development-mode (substitua {your_app_name} pelo stackName do seu SinglePageApp -Component).
Espere até que o console diga que seu aplicativo está em execução e abra localhost:3000 no seu navegador. Você deve ver seu aplicativo exibindo "Componentes de infraestrutura Hello" – ou qualquer que seja seu próprio componente.
As alterações no seu código-fonte se tornam efetivas imediatamente neste modo. Apenas recarregue sua página no navegador.
Implantar na AWS
O Code-Architect fornece um serviço gerenciado. Você não precisa ter uma conta da AWS e pode pular sua configuração!
Implantar na AWS – Preparações (somente uma vez, pule se estiver usando o Code-Architect)
A implantação do seu aplicativo requer:
1 Uma conta da AWS que você pode criar em https://aws.amazon.com
2 Um usuário técnico (com acesso programático / chave de API)
Em seu console da AWS, abra o menu do IAM e crie um novo usuário com a seguinte política:
Você receberá um ID de chave da AWS e uma chave secreta da AWS .
3 Coloque-os no .env na raiz do seu projeto.
AWS_ACCESS_KEY_ID = *** ... ***
AWS_SECRET_ACCESS_KEY = *** ... ***
Depois de ter suas credenciais no lugar certo (ou você usou o Code-Architect ), agora podemos implantá-las na AWS com um único comando: npm run deploy-{your-environment-name} .
Substitua {your-environment-name} pelo nome especificado no componente <Environment/> . Infra-estrutura de Componentes suportar vários ambientes por projeto, por exemplo, um dev -Ambiente e uma prod -Ambiente.
Depois que você inicia o comando deploy , os scripts criam toda a pilha de infraestrutura na sua conta da AWS. Você receberá de volta um URL como https://{your_app_name}-{your-environment-name}.s3.amazonaws.com que agora exibe seu aplicativo.
Nota : a implantação da pilha de software pode levar algum tempo (até uma hora para a primeira implantação). Implantações subseqüentes serão muito mais rápidas.
O Code-Architect suporta ainda o uso de um domínio personalizado, como www.your-domain.com . Se você quiser configurar um domínio personalizado manualmente, poderá encontrar informações úteis nesta postagem .
Infraestrutura-Componentes estão em desenvolvimento ativo. Se você encontrar um bug, se a sua implantação lançar um erro – que não está relacionado ao seu código 😉 – ou quando precisar de suporte de qualquer tipo, por favor, informe em https://spectrum.chat/infrastructure . Obrigado!
Nossa documentação descreve como usar os componentes de infraestrutura em mais detalhes.
Infraestrutura-Componentes são de código aberto! Então dê uma olhada no nosso repositório GitHub.
componentes de infraestrutura / componentes de infraestrutura
Reagir componentes que permitem configurar sua infraestrutura facilmente… github.com
A jornada de componentes de infra-estrutura acabou de começar. Quanto menor a lista de recursos atuais ainda pode ser, quanto mais tempo é a lista do backlog! Por favor, não perca a próxima atualização do Infrastructure-Components .