= Como usar o AWS Amplify para implantar um aplicativo React =
== Um guia para implantar aplicativos React com AWS Amplify ==
Desde que comecei a prestar consultoria como Engenheiro de Software, eu queria montar um site de portfólio que mostrasse o
projetos pessoais e profissionais em que trabalhei. Nas férias de inverno, passei um tempo projetando, desenvolvendo e implantando meu site de portfólio e, neste artigo, mostrarei como o implantei com o AWS Amplify. Você pode visualizar o site em dan-murphy.com e o código no GitHub.
= Um Breve Histórico =
A maior parte do meu trabalho profissional envolve a criação de aplicativos orientados a dados e a simplificação de pipelines de dados. Para realizar essas tarefas, eu uso regularmente Python e Ruby e incorporo JavaScript para qualquer trabalho de front-end. Em um esforço para me sentir mais confortável com o React, decidi usar a estrutura para criar meu site de portfólio.
= Configurando o Aplicativo =
O primeiro passo que dei foi decidir como estruturar o aplicativo. eu utilizei
create-react-app como modelo base para meus diretórios e reestruturei o aplicativo com algumas pastas adicionais. A configuração finalizada fica assim:
origem
componentes
arquivos
extras
dados
imagens
Páginas
conteúdo
dados
estilos
testes
luminárias
Algumas das mudanças notáveis são a
**componentes**
, e
**Páginas**
diretórios.
**estilos**
,
: é aqui que armazeno todos os componentes do aplicativo. Ao armazenar os componentes em uma pasta centralizada, é mais fácil reutilizar e refatorar meu código e mais intuitivo para os outros entenderem. Alguns dos componentes que compõem o site do meu portfólio são
componentes
Cabeçalho,
Rodapé, e
ProjectSidebar.
: é aqui que construo as páginas distintas para o aplicativo. Eu importo os componentes necessários do
Páginas
pasta e, em seguida, agregue-os para criar a página. Aqui está um exemplo de como eu fiz isso para o
página inicial dos componentes:
: é aqui que defino estilos CSS globais para o aplicativo. eu amo usar
estilos
styled-componentspara componentes individuais, mas também achei útil criar estilos globais disponíveis para cada página.
Por fim, para mapear solicitações para as páginas corretas, usamos
react-router-dom. As rotas são definidas no
App.js como mostrado abaixo:
Isso irá mapear
Pagina inicial,
/projetos solicitações para
ProjetosPágina,
/sobre pedidos para
SobrePágina e
/bookshelf solicita para
BookPage. Agora que o desenvolvimento do aplicativo está concluído, precisamos implantá-lo para que outras pessoas possam usá-lo!
/pedidos para
= Implantando com o AWS Amplify =
== Resumo ==
Existem várias maneiras de implantar um site React, mas descobri que uma das mais simples é usar
**Amplify Amplify é descrito como a maneira mais rápida e fácil de criar aplicativos móveis e da Web que podem ser dimensionados. Para conseguir isso, A AWS extrapola todas as complicações de configurar um servidor, instalar dependências e criar uma versão de produção do seu site, permitindo que você se concentre apenas na criação de uma UX intuitiva. Para saber mais sobre o que o AWS Amplify oferece para aplicativos baseados em dados (especificamente, sites com **front-end** e **back-end, consulte a documentação.
== Conectando seu repositório ==
Para hospedar seu aplicativo da web no AWS Amplify, primeiro você precisa conectar o repositório que contém seu código-fonte. Para fazer isso, você pode navegar até o
*AWS Amplify* *Primeiros passos* **Hospede o My Web App e clique em **Connect app repo *página, role até a*página, role até 
Em seguida, você será redirecionado para uma página separada, onde poderá conectar o repositório que contém seu código-fonte. Para este exemplo, escolherei o GitHub, mas o AWS Amplify também oferece suporte a BitBucket, GitLab, AWS CodeCommit e até mesmo implantação sem um provedor Git.
Após a autorização bem-sucedida, você pode selecionar qual repositório deseja implantar e selecionar a ramificação que o AWS Amplify deve usar para compilações de produção.
Depois disso, clique
**Avançar** e a AWS solicitará que você defina suas configurações de *construção* e *teste*. O modelo base que a AWS fornece é mostrado abaixo.
versão 1
front-end:
fases:
pré-construção:
comandos:
- npm install build:
comandos:
- npm run build
artefatos:
baseDirectory: construir
arquivos:
-
Cache:
caminhos:
- node_modules
Além disso, sob o
Com a alternância **configurações avançadas**, você pode definir variáveis de ambiente e um contêiner de compilação personalizado.
Por fim, depois de revisar as configurações do seu aplicativo, clique em
**Salve e implante **e **A AWS começará a configurar e implantar seu aplicativo. Quando a implantação da AWS terminar, você poderá navegar até a página inicial do Amplify e ver seu aplicativo recém-implantadoAWS começará a configurar e implantar seu aplicativo. Quando a implantação da AWS terminar, você poderá navegar até a página inicial do Amplify e ver seu aplicativo recém-implantado.
Agora, vamos personalizar a URL usando
**Gerenciamento de domínio do AWS Amplify
== Adicionando um domínio personalizado ==
Para começar a adicionar um domínio personalizado, navegue até a barra lateral esquerda e selecione
**gerenciamento de domínio 
Configuração de **gerenciamento de domínio**.
Em seguida, selecione
**adicionar domínio **configurar domínio **digite seu nome de domínio (conforme mostrado abaixo) e clique**digite seu nome de domínio (conforme mostrado abaixo) e clique em 
Depois disso, você pode configurar qualquer redirecionamento necessário para o seu domínio. Por exemplo, no exemplo a seguir, crio um redirecionamento de httpsdan-murphy.com para httpswww.dan-murphy.com.
Por fim, depois que seu domínio personalizado estiver configurado corretamente, a AWS fornecerá a você um
**Certificado de validação Você também pode visualizar este certificado no console do AWS Certificate Manager.
== Adicionando um registro CNAME ==
A última etapa na configuração de seu domínio personalizado é adicionar um registro CNAME. No exemplo a seguir, uso o Google Domains, mas os conceitos fundamentais permanecem os mesmos em diferentes registradores de domínio.
Primeiro, role para baixo até
**Registros de recursos personalizados** no Google Domains. Crie um registro *CNAME *que aponte todos os subdomínios para o domínio do AWS Amplify: Nome: insira o nome do subdomínio. Se o subdomínio for www.domain.com, digite . Se for www app.domain.com, digite app. Dados: na página de gerenciamento de domínio, clique em Ações e selecione Exibir registros DNS. Em seguida, insira o domínio do AWS Amplify disponível em Configure DNS provider. 
Na página **Gerenciamento de domínios**, selecione **Ações **Visualizar registros DNS**
Ao todo, o registro de recurso personalizado terá a seguinte aparência:
Em seguida, adicione mais um
Registro *CNAME* que aponta para o servidor de validação do AWS Certificate Manager. O AWS Certificate Manager validado lida com TLS para seu aplicativo: Nome: insira o subdomínio do servidor de validação. Se o registro DNS para verificar a propriedade do seu domínio for _1234.example.com, digite apenas _1234. Dados: insira o certificado de validação do ACM. Se o servidor de validação for _1234.abcdefg.acm-validations.aws., insira _1234.abcdefg.acm-validations.aws.
Todas as informações para seus certificados de validação são encontradas no console do AWS Certificate Manager. Depois do segundo
*CNAME* for adicionado, seus registros personalizados devem ficar assim: 
Por último, vamos adicionar um
**Registro Sintético** para configurar um encaminhamento de subdomínio: Subdomínio: insira a URL do domínio: www. 
= Encerrando =
No geral, neste artigo, aprendemos como estruturar aplicativos React e implantá-los com o AWS Amplify. Primeiro, discutimos como modularizar um aplicativo react em
*componentes* *páginas* pastas. Em seguida, aprendemos sobre o **AWS Amplify** e como implantar aplicativos estáticos e orientados a dados com ele. Por fim, aprendemos como usar o **AWS Amplify Domain Management** e o **Google Domains** para personalizar o domínio de nosso aplicativo. **e e
Se você tiver alguma dúvida, preocupação ou feedback sobre este artigo ou meu site de portfólio, sinta-se à vontade para comentar ou enviar um e-mail para
*
[email protected]*. Obrigado por ler!
