photo sharing website

照片共享網站

靜態預渲染的照片共享網站可以公開分享您的圖片，而無需運行或維護服務器。

概念

• 靜態網站 - 公共訪問的Web應用程序，
• 管理Web應用程序 - 密碼保護的Web應用程序（React.js Web應用程序）用於按需生成靜態網站。

下面的YouTube視頻顯示了一切的工作方式：

建築學

1. 用/路徑在S3桶中作為原點
2. S3存儲桶中帶有/website路徑的CloudFront分發作為原點（靜態網站靜態源代碼）
3. S3存儲桶可容納所有靜態資源（HTML，CSS，JavaScript和圖像）
4. 帶有初始上傳圖片的S3存儲桶
5. AWS Lambda用於生成靜態網站的HTML源代碼
6. AWS Lambda用於生成縮略圖並使用Amazon Rekognition檢測上載照片的相關標籤
7. Amazon Cognito為管理用戶提供身份驗證

部署

先決條件

• 創建一個AWS帳戶
• 安裝放大CLI
• 安裝NPM

指示

1。克隆存儲庫

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

2。初步操作

• 管理用戶電子郵件

  • 在amplify/backend/boostrap/adminuser/parameters.json中，用自己的電子郵件地址替換[email protected] 。

• 圖像大小

  • 該應用程序使用包裝為lambda層的sharp庫來調整圖像，
  • 創建一個鋒利的層。請按照本教程在所需的區域中創建一個鋒利的層，然後在amplify/backend/function/S3TriggeraXXXX/S3TriggeraXXXX-cloudformation-template.json中更新層ARN。

3。安裝依賴項

 npm install

4。將堆棧部署到您的AWS帳戶

• 初始化您的放大雲應用程序

   amplify init
  

• 隨著本地開發的運行，雲資源的規定雲資源

   amplify push
  

• 將靜態資產發佈到Amazon S3

   amplify publish
  

享受 ！

配x您可能需要在第一次部署之後等待幾個小時，以便將S3存儲桶的DNS名稱傳播！ （如果使用電子郵件收到的臨時密碼在耗竭後登錄，則必須等待，請等待，然後再嘗試，代碼沒有錯）

關鍵點

• AWS lambda使用HTML模板和存儲在DynamoDB中的數據生成靜態文件，
• 使用AWS Amplify構建的React.js應用程序，
• 在第一次部署時創建了一個admin用戶，
• 靜態網站（帶有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模板都包含要用lambda替換的變量，例如Code Bellow

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

預渲染靜態網站的優點

• 靜態位點的預渲染靜態HTML的加載速度比動態位點上的頁面快得多。快速網站對於良好的用戶體驗非常重要，也可以在搜索引擎排名中提高您的網站，
• 靜態站點發生器降低了現場复​​雜性。反過來，這提高了速度和可靠性，並使開發人員體驗平滑，
• 您不必擔心數據庫 - 通用流量峰值，
• 您可以通過內容交付網絡託管您的網站，該網站隨著網站的流量擴展，
• 降低成本，
• 更好的SEO，
• 好緩存。

我使用此存儲庫來構建自己的網站manbehindlens.com。

工具

• AWS放大JavaScript庫將我們的前端連接到雲資源

• Amazon Cognito處理管理員註冊授權

• 亞馬遜簡單存儲服務（S3）存儲和提供我希望上傳的照片，以託管我們的應用程序的react.js App Assets，並託管靜態生成的網站

• 亞馬遜Cloudfront存儲並提供與我們的用戶關心上傳的盡可能多的照片，並託管我們應用的靜態資產

• Amazon DynamoDB提供對專輯和照片數據的API查詢的毫秒響應時間

• AWS AppSync託管我們的前端的GraphQl API

• AWS lambda在雲中創建光合作用的照片縮略圖並按需生成靜態網站

• 亞馬遜重新認知要檢測每張上傳照片的5個標籤

費用

每月不到一杯咖啡

學分

• 多宇宙HTML模板
• 鏡頭HTML模板
• 使用AWS Amplify Workshop構建照片共享網絡應用
• 為AWS Lambda創建鋒利的層
• AWS層