photo sharing websiteのダウンロード - photo sharing websiteソースコードのダウンロード

photo sharing website

その他のソースコード

ダウンロード

写真共有ウェブサイト

静的な事前にレンダリングされた写真共有ウェブサイトは、サーバーを実行または保守する必要なく、写真を公開します。

コンセプト

静的ウェブサイト - 公開可能なWebアプリ、
管理者Webアプリケーション - パスワード保護されたWebアプリケーション（React.js Webアプリケーション）は、Static Webサイトをオンデマンドで生成するために使用されます。

以下のYouTubeビデオは、すべてがどのように機能するかを示しています：

manbehindlens.comの作成方法|事前にレンダリングされた静的写真共有Webサイト

建築

S3バケツの/パスを備えたクラウドフロント分布起源として
S3バケツの/websiteパスを備えたクラウドフロント配信原点として（静的Webサイトの静的ソースコード）
すべての静的リソースを保持するS3バケツ（HTML、CSS、JavaScript、および画像）
最初のアップロードされた写真を備えたS3バケツ
静的ウェブサイトのHTMLソースコードを生成するために使用されるAWSラムダ
サムネイルを生成し、Amazon Rekognitionを使用してアップロードされた写真に関連するラベルを検出するために使用されるAWS Lambda
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ライブラリを使用して画像を変更します。
- 鋭いレイヤーを作成します。このチュートリアルに従って、目的の領域に鋭いレイヤーを作成し、 amplify/backend/function/S3TriggeraXXXX/S3TriggeraXXXX-cloudformation-template.jsonでレイヤーARNを更新します。

3.依存関係をインストールします

 npm install

4。スタックをAWSアカウントに展開します

Amplify Powered Cloudアプリケーションを初期化します
```
 amplify init
```
地元の開発が実行されたクラウドリソースの規定
```
 amplify push
```
Amazon S3に静的資産を公開します
```
 amplify publish
```

楽しむ！

ショ和S3バケットのDNS名を伝播するように、最初の展開の数時間後に待つ必要があるかもしれません！（電子メールで受信した一時的なパスワードを使用して枯渇の後にログインできない場合は、これでなければなりません。もう一度試す前に待ってください。コードには何の問題もありません）

キーポイント

AWS Lambdaは、dynamodbに保存されているHTMLテンプレートとデータを使用して静的ファイルを生成します。
AWS Amplifyを使用して構築されたReact.jsアプリケーション、
最初の展開で作成された1人の管理者ユーザーがあります。
静的Webサイト（HTMLテンプレートファイルを使用）は、AWS Lambdaによってオンデマンドで生成されます。
4つのHTMLファイルは、静的Webサイトを生成するために使用されます。

  /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 >

事前にレンダリングされた静的Webサイトの利点

静的サイトの事前にレンダリングされた静的HTMLは、動的サイトのページよりもはるかに速くロードされます。高速ウェブサイトは、優れたユーザーエクスペリエンスや、検索エンジンのランキングでサイトを後押しするために非常に重要です。
静的サイトジェネレーターは、サイトの複雑さを軽減します。これにより、速度と信頼性が向上し、開発者エクスペリエンスがスムーズになります。
データベーストップリングトラフィックスパイクについて心配する必要はありません、
サイトのトラフィックでスケーリングするコンテンツ配信ネットワークでサイトをホストできます。
コストの削減、
より良いSEO、
良いキャッシング。

このリポジトリを使用して、自分のウェブサイトmanbehindlens.comを構築しました。