photo sharing website

Site de compartilhamento de fotos

Site estático de compartilhamento de fotos pré-renderizado para compartilhar publicamente suas fotos sem precisar executar ou manter servidores.

Conceito

• Um site estático - aplicativo da web acessível ao público,
• Um aplicativo da Web Admin - Aplicativo da Web protegido por senha (aplicativo React.js Web) usado para gerar o site estático sob demanda.

O vídeo abaixo do YouTube mostra como tudo funciona:

Arquitetura

1. Distribuição CloudFront com / Path no S3 Bucket como a origem
2. Distribuição CloudFront com /website no S3 Bucket como Origem (o Site estático Código -fonte estático)
3. S3 Bucket, que detém todos os recursos estáticos (HTML, CSS, JavaScript e imagens)
4. S3 Bucket com as fotos enviadas inicial
5. AWS Lambda usada para gerar o código -fonte HTML do site estático
6. AWS Lambda usada para gerar miniaturas e para detectar rótulos relevantes para fotos carregadas usando a Amazon Rekognition
7. Amazon Cognito para fornecer uma autenticação para o usuário administrador

Implantação

Pré -requisitos

• Crie uma conta da AWS
• Instale a CLI amplificada
• Instale o NPM

Instruções

1. Clone o repositório

 git clone https://github.com/cornelcroi/photo-sharing-website.git

2. Operações preliminares

• E -mail do usuário administrador

  • Substitua [email protected] por seu próprio endereço de e -mail em amplify/backend/boostrap/adminuser/parameters.json

• Redimensionamento da imagem

  • O aplicativo redimensiona as imagens usando a biblioteca sharp embalada como camada lambda,
  • Crie uma camada nítida. Siga este tutorial para criar uma camada nítida na região desejada e, em seguida, atualize a camada ARN em amplify/backend/function/S3TriggeraXXXX/S3TriggeraXXXX-cloudformation-template.json .

3. Instala as dependências

 npm install

4. Implante a pilha na sua conta da AWS

• Inicialize seu aplicativo de nuvem alimentado com Amplify

   amplify init
  

• Disposições Cloud Resources com os desenvolvimentos locais executados

   amplify push
  

• Publique ativos estáticos para a Amazon S3

   amplify publish
  

Aproveitar !

️ Pode ser necessário esperar algumas horas após a primeira implantação, para que o nome DNS do balde S3 seja propagado! (Se você não puder fazer login após o esgotamento usando a senha temporária recebida por e -mail, deve ser, apenas espere antes de tentar novamente, não há nada de errado com o código)

Pontos -chave

• O AWS Lambda gera os arquivos estáticos usando modelos HTML e dados armazenados no DynamoDB,
• React.js Aplicativo construído usando a AWS Amplify,
• Há um único usuário administrador criado na primeira implantação,
• O site estático (com arquivos de modelo HTML) é gerado sob demanda por um AWS Lambda,
• 4 arquivos HTML são usados ​​para gerar o site estático,

  /albums-gallery-template.html                                       <-- template for an album gallery page
  /albums-template.html                                               <-- template for list of albums page
  /album-item-template.html                                           <-- template for one album used in list of albums page
  /photo-item-template.html                                           <-- template for one photo used on album gallery page

• Cada modelo HTML contém variáveis ​​a serem substituídas por lambda como o pedaço de código abaixo

  < div >
    < h2 > {ALBUM_NAME} </ h2 >
    < div > {ALBUM_PHOTOS} photos · {ALBUM_DATE} </ div >
  </ div > 

Vantagens do site estático pré-renderizado

• O HTML estático pré-renderizado de locais estáticos carrega muito mais rápido que as páginas em um local dinâmico. Os sites rápidos são realmente importantes para uma boa experiência do usuário e também para aumentar seu site em rankings de mecanismos de pesquisa,
• Os geradores estáticos do local reduzem a complexidade do local. Isso, por sua vez, melhora a velocidade e a confiabilidade e suaviza a experiência do desenvolvedor,
• Você não precisa se preocupar com picos de tráfego de tópicos de banco de dados,
• Você pode hospedar seu site com uma rede de entrega de conteúdo que escala com o tráfego do seu site,
• custos mais baixos,
• melhor SEO,
• Bom cache.

Usei este repositório para construir meu próprio site manbehindlens.com.

Ferramentas

• AWS Amplify JavaScript Library para conectar nosso front -end aos recursos da nuvem

• Amazon Cognito para lidar com a autorização de inscrição do administrador

• Amazon Simples Storage Service (S3) para armazenar e servir quantas fotos eu desejo fazer upload, para hospedar os ativos do aplicativo React.js para nosso aplicativo e hospedar o site gerado estático

• Amazon CloudFront para armazenar e servir tantas fotos quanto nossos usuários se importam em fazer upload e hospedar os ativos estáticos para o nosso aplicativo

• Amazon DynamoDB para fornecer tempos de resposta de milissegundos às consultas da API para dados de álbuns e fotos

• AWS AppSync para hospedar uma API do GraphQL para o nosso front -end

• AWS Lambda para criar miniaturas fotográficas de forma assíncrona na nuvem e gerar o site estático sob demanda

• Amazon Rekognition para detectar 5 rótulos para cada foto carregada

Custos

Menos de uma xícara de café por mês

Créditos

• Modelo HTML multiverso
• Modelo HTML da lente
• Crie um aplicativo da web de compartilhamento de fotos com workshop AWS Amplify
• Crie uma camada nítida para a AWS Lambda
• Camada de aws para nítido