Yandex.Cloud Object Storage를 사용하여 정적 웹사이트를 호스팅하는 방법

헤이 하브르!

이 기사에서는 Yandex 기술을 사용하여 정적 웹사이트를 쉽고 간단하게 호스팅하는 방법, 즉 객체 저장소.

결국, 외부 링크를 통해 액세스할 수 있는 웹 호스팅 웹사이트를 갖게 됩니다.

이 기사는 다음과 같은 경우에 유용할 것입니다.

• 이제 막 프로그래밍을 배우는 초보 개발자입니다.
• 포트폴리오를 만들어 공개 도메인에 배치하여 친구와 고용주에게 보여주고 싶은 개발자.

성명서

최근 저는 사람들이 개인 훈련을 위해 스포츠 트레이너를 찾는 일종의 마켓플레이스인 SaaS 서비스를 개발하고 있었습니다. Amazon Web Services 스택(이하 AWS라고 함)을 사용했습니다. 하지만 프로젝트에 더 깊이 파고들수록 스타트업을 조직하는 다양한 프로세스에 대해 더 많은 뉘앙스를 배웠습니다.

다음과 같은 문제가 발생했습니다.

• AWS는 많은 돈을 소비하고 있었습니다. 3년간 대기업에서 근무하면서 Docker, Kubernetes, CI/CD, Blue Green 배포와 같은 즐거움에 익숙해졌고, 야심찬 스타트업 프로그래머로서 이를 구현하고 싶었습니다. 그 결과 AWS는 한 달에 300~400달러를 소비한다는 결론에 도달했습니다. 쿠버네티스는 클러스터 100개, 노드 XNUMX개로 최저 임금이 XNUMX달러 정도로 가장 비싼 것으로 나타났다.
  PS 처음부터 이 작업을 수행할 필요는 없습니다.
• 다음으로 법적 측면을 생각하면서 다음과 같은 법률 152-FZ에 대해 배웠습니다. "러시아 연방 시민의 개인 데이터는 러시아 연방 영토에 저장되어야 합니다.", 그렇지 않으면 내가 원하지 않는 벌금이 부과됩니다. 나는 위에서부터 나에게 오기 전에 이러한 문제를 해결하기로 결정했습니다 :).

탁월한 조 Amazon Web Services에서 Yandex.Cloud로 인프라를 마이그레이션하는 것에 대해 저는 Yandex 스택을 더 자세히 연구하기로 결정했습니다.

제가 생각하는 Yandex.Cloud의 주요 기능은 다음과 같습니다.

• 2-3배 저렴함(위 기사 및 공개 가격표에 따름)
• 러시아 연방 영토 내 사용자의 개인 데이터 저장, 위대한 아마존은 아직 달성할 수 없는 목표입니다.

이 서비스의 다른 경쟁사를 조사했지만 당시 Yandex가 이겼습니다.

내 자신에 대해 말했으니 우리는 사업을 시작해야 합니다.

0단계. 사이트 준비

먼저, 인터넷에 올리고 싶은 웹사이트가 필요합니다. 저는 Angular 개발자이기 때문에 간단한 SPA 애플리케이션 템플릿을 만들어서 인터넷에 게시하겠습니다.

PS Angular를 이해하거나 해당 문서에 대해 아는 사람 https://angular.io/guide/setup-local, 이동 1 단계.

Angular에서 SPA 사이트를 생성하기 위해 Angular-CLI를 설치해 보겠습니다.

npm install -g @angular/cli

다음 명령을 사용하여 Angular 애플리케이션을 만들어 보겠습니다.

ng new angular-habr-object-storage

다음으로, 애플리케이션 폴더로 이동하여 실행하여 기능을 확인하세요.

cd angular-habr-object-storage
ng serve --open

애플리케이션이 생성되었지만 아직 호스팅할 준비가 되지 않았습니다. 불필요한 것을 모두 제거하고 필요한 파일만 남겨두기 위해 애플리케이션을 작은 빌드(프로덕션)로 조립해 보겠습니다.
Angular에서는 다음 명령을 사용하여 이를 수행할 수 있습니다.

ng build --prod

이 명령의 결과로 응용 프로그램의 루트에 폴더가 나타났습니다. dist 우리 웹사이트와 함께.

공장. 이제 호스팅으로 넘어가겠습니다.

1 단계.

사이트로 이동하자 https://console.cloud.yandex.ru/ 그리고 “연결” 버튼을 클릭하세요.

참고 :

• Yandex 서비스를 이용하려면 Yandex 메일이 필요할 수 있습니다(그러나 확실하지는 않습니다).
• 일부 기능의 경우 개인 계좌(최소 500루블)에 돈을 입금해야 합니다.

성공적인 등록 및 승인 후에는 귀하의 개인 계정이 있습니다.

다음으로 메뉴 왼쪽에서 사이트 호스팅에 사용할 "Object Storage" 서비스를 찾아야 합니다.

간단히 말하면:

• Object Storage는 Amazon의 유사한 AWS S3 기술과 호환되는 파일 스토리지입니다. 이 기술에는 코드에서 스토리지를 관리하기 위한 자체 API가 있으며 AWS S3처럼 정적 사이트를 호스팅하는 데 사용할 수 있습니다.
• Object Storage에서는 파일을 위한 별도의 저장 영역인 "버킷"(버킷)을 생성합니다.

그중 하나를 만들어 보겠습니다. 이렇게 하려면 서비스 콘솔에서 "버킷 만들기" 버튼을 클릭하세요.

버킷 생성 양식에는 다음과 같은 필드가 있습니다. 이를 살펴보겠습니다.

• 버킷 이름. 단순화를 위해 프로젝트를 Angular와 동일하게 부르겠습니다. angular-habr-object-storage
• 최대. 크기. 사이트가 무료로 저장되지 않고 할당된 각 기가바이트에 대해 Yandex에 상당한 금액을 지불할 것이기 때문에 우리는 사이트의 무게만큼 베팅합니다.
• 읽기 객체에 대한 액세스입니다. 레이아웃을 올바르게 그릴 수 있고 스크립트를 처리할 수 있도록 사용자가 정적 사이트의 각 파일을 받아야 하므로 이를 "공개"로 설정했습니다.
• 개체 목록에 대한 액세스 및 설정 읽기에 대한 액세스입니다. "제한"으로 두세요. 이는 버킷을 애플리케이션의 내부 파일 저장소로 사용하기 위해 필요합니다.
• 스토리지 클래스. "표준"으로 두십시오. 이는 당사 사이트를 자주 방문하므로 사이트를 구성하는 파일이 자주 다운로드된다는 것을 의미합니다. 또한 해당 항목은 성능 및 결제에 영향을 미칩니다(링크 삽입).

'버킷 만들기'를 클릭하면 버킷이 생성됩니다.

이제 사이트를 버킷에 업로드해야 합니다. 가장 쉬운 방법은 근처에 있는 폴더를 여는 것입니다 dist 핸들을 사용하여 사이트를 페이지로 직접 드래그하세요. 이는 "개체 로드" 버튼을 클릭하는 것보다 더 편리합니다. 이 경우 폴더가 전송되지 않고 올바른 순서로 수동으로 생성해야 하기 때문입니다.

그래서 사이트가 스토리지에 로딩되어 사용자에게 웹사이트처럼 스토리지에 접근할 수 있는 기회를 제공할 수 있습니다.
이렇게 하려면 메뉴 왼쪽에서 “웹사이트” 탭을 클릭하세요.

버킷을 사이트로 설정하는 페이지에서 "호스팅" 탭을 선택합니다. 여기서는 사이트의 기본 페이지(일반적으로 index.html)를 나타냅니다. SPA 애플리케이션이 있는 경우 모든 오류는 기본 페이지에서도 처리되므로 오류 페이지에 index.html도 표시됩니다.

우리 사이트에 액세스할 수 있는 링크를 즉시 확인합니다. 저장을 클릭하세요.

약 5분 후 링크를 ​​클릭하면 이제 모든 사람이 우리 사이트를 사용할 수 있는 것을 볼 수 있습니다.

끝까지 읽어주신 모든 분들께 감사드립니다! 이것은 나의 첫 번째 기사이며 다른 Yandex 서비스와 프런트엔드 및 백엔드 기술과의 통합에 대해 더 자세히 설명할 계획입니다.

다른 Yandex 서비스 또는 현대 개발에서 Angular 사용에 대해 알아보는 데 얼마나 관심이 있는지 의견을 적어주세요.

출처 : habr.com