photo sharing website

Сайт обмена фотографиями

Статический предварительно предопределенный веб-сайт обмена фотографиями, чтобы публично поделиться своими фотографиями без необходимости запуска или обслуживания серверов.

Концепция

• Статическое веб -сайт - общедоступное веб -приложение,
• Веб -приложение для администратора - защищенное паролем веб -приложение (React.js Web Application), используемое для создания статического веб -сайта по требованию.

Ниже на YouTube видео показывает, как все работает:

Архитектура

1. Распределение Cloudfront с / путем в ковше S3 в качестве происхождения
2. Распространение CloudFront с /website в ковше S3 в качестве происхождения (статический веб -сайт статический исходный код)
3. S3 Bucket, которое содержит все статические ресурсы (HTML, CSS, JavaScript и изображения)
4. S3 Bucket с начальными загруженными изображениями
5. AWS Lambda используется для генерации исходного кода HTML на статическом веб -сайте HTML
6. AWS Lambda используется для генерации миниатюр и для обнаружения соответствующих метков.
7. Amazon Cognito, чтобы обеспечить аутентификацию для пользователя администратора

Развертывание

Предварительные условия

• Создать учетную запись AWS
• Установите Amplify CLI
• Установите NPM

Инструкции

1. Клонировать репозиторий

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

2. Предварительные операции

• Электронная почта пользователя администратора

  • Заменить [email protected] с вашим собственным адресом электронной почты в amplify/backend/boostrap/adminuser/parameters.json

• Изображение изменение размера

  • Приложение изменяет размер изображений с использованием sharp Library, упакованной в виде Lambda Layer,
  • Создайте острый слой. Следуйте этому уроку, чтобы создать острый слой в желаемой области, а затем обновите слой ARN в amplify/backend/function/S3TriggeraXXXX/S3TriggeraXXXX-cloudformation-template.json .

3. Установка зависимости

 npm install

4. Разверните стек в свою учетную запись AWS

• Инициализировать ваше приложение Amplify Powered Cloud

   amplify init
  

• Положения облачных ресурсов с местными разработками работают

   amplify push
  

• Публикуйте статические активы в Amazon S3

   amplify publish
  

Наслаждаться !

️ Возможно, вам придется подождать через пару часов после первого развертывания, чтобы пропагандировать DNS Bucket Bucket! (Если вы не можете войти в систему после соискания, используя временный пароль, полученный по электронной почте, это должно быть, просто подождите, прежде чем попробовать еще раз, в коде нет ничего плохого)

Ключевые моменты

• AWS Lambda генерирует статические файлы, используя шаблоны HTML и данные, хранящиеся в DynamoDB,
• React.js приложение, созданное с использованием AWS Amplify,
• есть один пользователь администратора, созданный в первом развертывании,
• Статический веб -сайт (с файлами шаблонов HTML) генерируется по требованию AWS Lambda,
• 4 HTML -файлы используются для генерации статического веб -сайта,

  /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

• Каждый шаблон HTML содержит переменные, которые будут заменены лямбда

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

Преимущества предварительно предопределенного статического веб-сайта

• Предварительно предопределенный статический HTML статических участков загружается намного быстрее, чем страницы на динамическом участке. Быстрые веб -сайты действительно важны для хорошего пользовательского опыта, а также для повышения вашего сайта в рейтинге поисковых систем,
• Статические генераторы сайтов уменьшают сложность сайта. Это, в свою очередь, улучшает скорость и надежность и сглаживает опыт разработчика,
• Вам не нужно беспокоиться о шипах трафика, находящих базу данных,
• Вы можете разместить свой сайт с помощью сети доставки контента, которая масштабируется с трафиком вашего сайта,
• более низкие затраты,
• Лучше SEO,
• Хорошее кэширование.

Я использовал этот репозиторий, чтобы создать свой собственный веб -сайт Manbehindlens.com.

Инструменты

• AWS Amplify JavaScript Library для подключения нашего фронта с облачными ресурсами

• Amazon Cognito для обработки администратора регистрации

• Amazon Simple Service (S3) для хранения и обслуживания столько фотографий, как я хочу загрузить, чтобы разместить активы приложения React.js для нашего приложения и размещать статический сгенерированный веб -сайт

• Amazon Cloudfront для хранения и обслуживания столько фотографий, как и наши пользователи, чтобы загрузить, и размещать статические активы для нашего приложения

• Amazon DynamoDB, чтобы предоставить миллисекундное время отклика на запросы API для альбомов и фотодат

• AWS Appsync для размещения API GraphQL для нашего фронта

• AWS Lambda, чтобы создать фондовые миниатюры асинхронно в облаке и генерировать статический веб -сайт по требованию.

• Amazon Rekognition, чтобы обнаружить 5 меток для каждой загруженной фотографии

Расходы

Меньше чашки кофе в месяц

Кредиты

• Multiverse HTML -шаблон
• Главный шаблон HTML
• Создайте веб-приложение для обмена фотографиями с мастерской AWS Amplify
• Создайте острый слой для AWS Lambda
• Слой AWS для Sharp