photo sharing website 다운로드 - photo sharing website 소스 코드 다운로드

photo sharing website

기타 소스코드

다운로드

사진 공유 웹 사이트

정적 사전 렌더링 된 사진 공유 웹 사이트는 서버를 실행하거나 유지 관리 할 필요없이 사진을 공개적으로 공유합니다.

개념

정적 웹 사이트 - 공개적으로 액세스 가능한 웹 앱,
관리자 웹 애플리케이션 - 비밀번호 보호 웹 응용 프로그램 (React.js 웹 응용 프로그램)은 주문시 정적 웹 사이트를 생성하는 데 사용됩니다.

아래 YouTube 비디오는 모든 것이 어떻게 작동하는지 보여줍니다.

manbehindlens.com이 어떻게 만들어 졌는지 | 사전 렌더링 된 정적 사진 공유 웹 사이트

건축학

원점으로서 S3 버킷의 / 경로를 사용한 클라우드 프론트 분포
원점으로서 S3 버킷의 /website 경로가있는 Cloudfront 배포 (정적 웹 사이트 정적 소스 코드)
모든 정적 자원을 보유하는 S3 버킷 (HTML, CSS, JavaScript 및 이미지)
초기 업로드 된 사진이있는 S3 버킷
정적 웹 사이트의 HTML 소스 코드를 생성하는 데 사용되는 AWS Lambda
AWS Lambda는 썸네일을 생성하고 Amazon Rekognition을 사용하여 업로드 된 사진의 관련 레이블을 감지하는 데 사용되었습니다.
Amazon Cognito는 관리자 사용자를위한 인증을 제공합니다

전개

전제 조건

AWS 계정을 만듭니다
증폭 CLI를 설치하십시오
NPM을 설치하십시오

지침

1. 저장소를 복제하십시오

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

2. 예비 작업

관리자 사용자 이메일
- [email protected] amplify/backend/boostrap/adminuser/parameters.json 의 이메일 주소로 교체하십시오
이미지 크기 조정
- 응용 프로그램은 Lambda 레이어로 패키지 된 sharp 라이브러리를 사용하여 이미지를 크게 선화합니다.
- 날카로운 레이어를 만듭니다. 이 튜토리얼을 따라 원하는 영역에서 날카로운 레이어를 작성한 다음 amplify/backend/function/S3TriggeraXXXX/S3TriggeraXXXX-cloudformation-template.json 에서 레이어 ARN을 업데이트하십시오.

3. 종속성을 설치합니다

 npm install

4. 스택을 AWS 계정에 배포하십시오

Amplify 전원 클라우드 애플리케이션을 초기화하십시오
```
 amplify init
```
지역 개발이 운영되는 클라우드 리소스를 제공합니다
```
 amplify push
```
정적 자산을 Amazon S3에 게시하십시오
```
 amplify publish
```

즐기다 !

켈 첫 번째 배치 후 몇 시간을 기다려야 S3 버킷의 DNS 이름을 전파 할 수 있습니다! (이메일로 수신 된 임시 비밀번호를 사용하여 Deploiment 후에 로그인 할 수없는 경우, 이것은 다시 시도하기 전에 기다려야합니다. 코드에 아무런 문제가 없습니다).

핵심 요점

AWS Lambda는 HTML 템플릿과 DynamoDB에 저장된 데이터를 사용하여 정적 파일을 생성합니다.
AWS Amplify를 사용하여 구축 된 React.js 응용 프로그램
첫 번째 배포시 단일 관리자 사용자가 있습니다.
정적 웹 사이트 (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로 대체 할 변수가 포함되어 있습니다.

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

사전 렌더링 된 정적 웹 사이트의 장점

정적 사이트의 사전 렌더링 된 정적 HTML은 동적 사이트의 페이지보다 훨씬 빠르게로드됩니다. 빠른 웹 사이트는 우수한 사용자 경험과 검색 엔진 순위에서 사이트를 늘리는 데 정말 중요합니다.
정적 사이트 생성기는 사이트 복잡성을 줄입니다. 결과적으로 속도와 신뢰성을 향상시키고 개발자 경험을 매끄럽게합니다.
데이터베이스에 묻는 트래픽 스파이크에 대해 걱정할 필요가 없습니다.
사이트 트래픽으로 확장되는 콘텐츠 제공 네트워크로 사이트를 호스팅 할 수 있습니다.
비용 절감,
더 나은 seo,
좋은 캐싱.

이 저장소를 사용하여 나만의 웹 사이트 Manbehindlens.com을 구축했습니다.

도구

AWS는 자바 스크립트 라이브러리를 증폭하여 프론트 엔드를 클라우드 리소스에 연결합니다.
Amazon Cognito는 관리자 가입 승인을 처리합니다
Amazon Simple Storage Service (S3)는 업로드하고 싶은만큼 많은 사진을 저장하고 제공하여 앱의 React.js 앱 자산을 호스팅 하고 정적 생성 된 웹 사이트를 호스팅합니다.
Amazon Cloudfront는 사용자가 업로드하고 앱의 정적 자산을 호스팅하는만큼 많은 사진을 저장하고 제공합니다.
Amazon DynamoDB 앨범 및 사진 데이터에 대한 API 쿼리에 밀리 초 응답 시간을 제공합니다.
aws appsync 프론트 엔드에 대한 그래프 QL API를 호스팅합니다.
AWS Lambda는 클라우드에서 비동기식으로 사진 썸네일을 만들고 주문에 정적 웹 사이트를 생성합니다 .
업로드 된 각 사진에 대해 5 개의 레이블을 감지하려면 Amazon Rekognition