Này Habr!
Trong bài viết này, tôi sẽ cho bạn biết cách lưu trữ một trang web tĩnh bằng công nghệ Yandex một cách dễ dàng và đơn giản, cụ thể là Lưu trữ đối tượng.
Cuối cùng, bạn sẽ có một trang web được lưu trữ trên web có thể truy cập được thông qua liên kết bên ngoài.
Bài viết này sẽ hữu ích nếu bạn
- Một nhà phát triển mới bắt đầu học lập trình;
- Một nhà phát triển đã tạo một danh mục đầu tư và muốn đưa nó vào phạm vi công cộng để hiển thị cho bạn bè và nhà tuyển dụng.
Về bản thân
Gần đây, tôi đang phát triển dịch vụ SaaS, một loại thị trường nơi mọi người tìm thấy huấn luyện viên thể thao để rèn luyện cá nhân. Đã sử dụng ngăn xếp Dịch vụ web của Amazon (sau đây gọi là AWS). Nhưng càng đi sâu vào dự án, tôi càng học được nhiều sắc thái hơn về các quy trình tổ chức khởi nghiệp khác nhau.
Tôi gặp phải những vấn đề sau:
- AWS đã tiêu tốn rất nhiều tiền. Làm việc 3 năm ở các công ty Enterprise, tôi đã quen với những niềm vui như Docker, Kubernetes, CI/CD, triển khai blue green và với tư cách là một lập trình viên khởi nghiệp đầy tham vọng, tôi muốn thực hiện điều tương tự. Kết quả là tôi đi đến kết luận rằng AWS tiêu tốn 300-400 đô la hàng tháng. Kubernetes hóa ra là đắt nhất, khoảng 100 đô la, với mức lương tối thiểu cho một cụm và một nút.
PS Không cần phải làm điều này khi bắt đầu. - Tiếp theo, nghĩ về khía cạnh pháp lý, tôi đã tìm hiểu về luật 152-FZ, trong đó có nội dung như sau: "Dữ liệu cá nhân của công dân Liên bang Nga phải được lưu trữ trên lãnh thổ Liên bang Nga", nếu không thì sẽ bị phạt, điều mà tôi không muốn. Tôi quyết định giải quyết những vấn đề này trước khi nó đến với tôi từ phía trên :).
Lấy cảm hứng về việc di chuyển cơ sở hạ tầng từ Amazon Web Services sang Yandex.Cloud, tôi quyết định nghiên cứu Yandex stack chi tiết hơn.
Đối với tôi, các tính năng chính của Yandex.Cloud như sau:
- Rẻ hơn 2-3 lần (theo bài viết trên và bảng giá công khai)
- , điều mà Amazon vĩ đại vẫn chưa thể đạt được.
Tôi đã nghiên cứu các đối thủ cạnh tranh khác của dịch vụ này, nhưng vào thời điểm đó Yandex đang chiến thắng.
Tôi đã kể cho bạn nghe về bản thân mình, vậy nên chúng ta có thể bắt tay vào công việc.
Bước 0. Chuẩn bị trang web
Đầu tiên, chúng ta cần một trang web mà chúng ta muốn đưa lên Internet. Vì tôi là nhà phát triển Angular nên tôi sẽ tạo một mẫu ứng dụng SPA đơn giản, sau đó tôi sẽ đăng lên Internet.
PS Ai hiểu Angular hoặc biết về tài liệu của nó , đi đến .
Hãy cài đặt Angular-CLI để tạo các trang SPA trong Angular:
npm install -g @angular/cliHãy tạo một ứng dụng Angular bằng lệnh sau:
ng new angular-habr-object-storageTiếp theo, vào thư mục ứng dụng và khởi chạy nó để kiểm tra chức năng của nó:
cd angular-habr-object-storage
ng serve --open
Ứng dụng đã được tạo nhưng chưa sẵn sàng để lưu trữ. Hãy tập hợp ứng dụng thành một bản dựng nhỏ (Sản xuất) để loại bỏ tất cả những thứ không cần thiết và chỉ để lại những tệp cần thiết.
Trong Angular bạn có thể thực hiện việc này bằng lệnh sau:
ng build --prodKết quả của lệnh này là một thư mục xuất hiện trong thư mục gốc của ứng dụng dist với trang web của chúng tôi.
Làm. Bây giờ hãy chuyển sang lưu trữ.
Bước 1.
Hãy đi đến trang web và nhấp vào nút “Kết nối”.
Lưu ý:
- Để sử dụng dịch vụ Yandex, bạn có thể cần thư Yandex (nhưng điều này không chắc chắn)
- Đối với một số chức năng, bạn sẽ phải gửi tiền vào tài khoản cá nhân của mình (tối thiểu 500 rúp).
Sau khi đăng ký và ủy quyền thành công, chúng tôi đang ở trong tài khoản cá nhân của bạn.
Tiếp theo ở bên trái trong menu, bạn cần tìm dịch vụ “Lưu trữ đối tượng”, chúng tôi sẽ sử dụng dịch vụ này để lưu trữ trang web.
Nói ngắn gọn về mặt:
- Object Storage là bộ lưu trữ tệp tương thích với công nghệ AWS S3 tương tự của Amazon, công nghệ này cũng có API riêng để quản lý bộ nhớ từ mã và giống như AWS S3, có thể được sử dụng để lưu trữ một trang tĩnh.
- Trong Bộ lưu trữ đối tượng, chúng tôi tạo các "nhóm" (nhóm), là các vùng lưu trữ riêng biệt cho các tệp của chúng tôi.
Hãy tạo một trong số chúng. Để thực hiện việc này, trong bảng điều khiển dịch vụ, hãy nhấp vào nút “Tạo nhóm”.
Biểu mẫu tạo nhóm có các trường sau, chúng ta hãy xem qua chúng:
- Tên thùng. Để đơn giản, hãy gọi dự án giống như Angular -
angular-habr-object-storage - Tối đa. kích cỡ. Chúng tôi đặt cược tùy theo trọng lượng của trang web của chúng tôi, vì trang web này không được lưu trữ miễn phí và với mỗi gigabyte được phân bổ, chúng tôi sẽ trả cho Yandex một xu khá lớn.
- Truy cập để đọc các đối tượng. Chúng tôi đặt nó thành “Công khai”, vì người dùng phải nhận từng tệp trên trang web tĩnh của chúng tôi để bố cục có thể được vẽ chính xác trên đó, các tập lệnh có thể được xử lý, v.v.
- Truy cập vào danh sách các đối tượng và Truy cập để đọc cài đặt. Để nó là "Giới hạn". Điều này là cần thiết để sử dụng nhóm làm bộ lưu trữ tệp nội bộ cho các ứng dụng.
- Lớp lưu trữ. Để nó là "Tiêu chuẩn". Điều này có nghĩa là trang web của chúng tôi sẽ được truy cập thường xuyên và do đó các tệp tạo nên trang web sẽ được tải xuống thường xuyên. Ngoài ra, mặt hàng còn ảnh hưởng đến hiệu suất và thanh toán (chèn liên kết).
Nhấp vào “Tạo nhóm” và nhóm được tạo.
Bây giờ chúng ta cần tải trang web của mình lên thùng. Cách dễ nhất là mở một thư mục gần đó dist trang web của chúng tôi và kéo nó trực tiếp lên trang bằng tay cầm. Điều này thuận tiện hơn so với việc nhấp vào nút “Tải đối tượng”, vì trong trường hợp này, các thư mục không được chuyển và bạn sẽ phải tạo chúng theo cách thủ công theo đúng trình tự.
Vì vậy, trang web được tải vào bộ nhớ, vì vậy chúng tôi có thể cung cấp cho người dùng cơ hội truy cập bộ nhớ dưới dạng trang web.
Để thực hiện việc này, ở phía bên trái của menu, hãy nhấp vào tab “Trang web”.
Trên trang thiết lập nhóm làm trang web, hãy chọn tab “Lưu trữ”. Ở đây chúng tôi chỉ ra trang chính của trang web, thường là index.html. Nếu bạn có ứng dụng SPA, thì có lẽ tất cả các lỗi cũng được xử lý trên trang chính, vì vậy chúng tôi cũng sẽ chỉ ra index.html trên trang lỗi.
Chúng tôi ngay lập tức thấy liên kết nào trang web của chúng tôi sẽ có thể truy cập được thông qua. Nhấp vào để lưu.
Sau khoảng 5 phút, nhấp vào liên kết, chúng tôi thấy rằng trang web của chúng tôi hiện có sẵn cho tất cả mọi người.
Cảm ơn mọi người đã đọc đến cuối! Đây là bài viết đầu tiên của tôi; tôi dự định mô tả sâu hơn về các dịch vụ Yandex khác và sự tích hợp của chúng với các công nghệ giao diện người dùng và phụ trợ.
Viết nhận xét về mức độ quan tâm của bạn khi tìm hiểu về các dịch vụ Yandex khác hoặc về việc sử dụng Angular trong quá trình phát triển hiện đại.
Nguồn: www.habr.com