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.

Começando

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.

  1. Faça login com sua conta do GitHub em www.code-architect.com
  2. Especifique um nome para o seu aplicativo React (como myapp ) e um nome de um ambiente (por exemplo, dev )
  3. Baixe e descompacte seu código clichê
  4. 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!

Projeto de exemplo

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 .

Instalação manual

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 :

 npm install --save-dev  
scripts de infra-estrutura
serverless
serverless-single-page-app-plugin

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 .

 "scripts": { 
"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 = *** ... ***

Desdobramento, desenvolvimento

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 .

Suporte e Recursos

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

Qual é o próximo?

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 .