×
Community Blog How Do I Deploy My Static Website

How Do I Deploy My Static Website

Here is tutorial about how to set up your own static website by using alibaba cloud Object Storage Server (OS) which is easy and high-efficiency to apply.

Being a collection of static files – a static website and a frontend application have virtually no difference when it comes to deployments. They both come with static files such as HTML, CSS, JS, JPEG, and PNG.

A common approach for hosting static websites on Alibaba Cloud is to use the "static hosting" feature of Object Storage Service (OSS) and Content Delivery Network (CDN):

  1. No server is required to host the assets
  2. OSS stores redundant copies of the assets across multiple zones within a region; thus, region-level high availability is provided for the origin of the assets without the need to do anything additionally
  3. CDN is used to improve delivery and, thus, the user experience
  4. CDN is a massive global network of interconnected servers so high availability is provided at global level for the user facing servers
  5. OSS is very cheap

This guide aims to introduce an approach to deploying static websites/frontend applications onto Alibaba Cloud in a simple and reliable manner. It serves as a good reference for a company's engineering team wishing to automate deployments. It should be noted that even though this practice can be used with video, audio and large files, Alibaba Cloud CDN provides a CDN type optimized for each of those use cases (thus, even a better user experience can be delivered by separating these assets and using a dedicated CDN type for each one of them).

Prerequisites

The following things will be required to follow this guide:

  1. Aliyuncli and ossutil installed and configured. If you have Docker installed, a quicker alternative is to use the "python-toolbox" which includes both
  2. curl installed (alternatively, you can use a browser with the inspection functionality in sections where we inspect headers)
  3. Firm understanding of Object Storage Service (OSS) and Content Delivery Network (CDN)
  4. Essential Linux skills on a Linux box

Architecture

So what's happening here? The machine with the source assets ("Source") pushes them up to OSS. OSS serves as the "Origin" for the CDN which will fetch assets from it whenever it can't find a copy of the asset in its cache; the CDN accepts all requests for static files.

For the rest guide to deploy static websites and frontend applications onto Alibaba Cloud in a simple and reliable manner. You can click Deploying Static Websites Using OSS and CDN on Alibaba Cloud to read the following steps.

Related Market products

OSS: Building an Industry Information Website

Object Storage Server (OSS) is a massive, secure, low-cost and highly reliable distributed storage service offered by Alibaba Cloud.

Abstract: Object Storage Server (OSS) is a massive, secure, low-cost and highly reliable distributed storage service offered by Alibaba Cloud. It provides unlimited storage space, 99.99999999% data reliability, quick access to large files, and nested image processing capabilities to help you easily deal with storage of and access to massive files. OSS has the following advantages compared to self-built storage services:

Multiple servers to support horizontal expansion of business systems
A business system with a highly scalable architecture is virtually capable of withstanding any amount of access traffic. Unlike vertical scaling, horizontal scaling puts less pressure on the overall hardware of a server.

To implement load balancing, you can use traditional technologies for traffic distribution to support multiple servers. Commonly used load balancing technology such as F5 uses expensive hardware. Furthermore, software such as LVS, Nginx, and HAProxy is challenging to build and maintain on a system.

Alibaba Cloud Server Load Balancer accomplishes the same goal while keeping costs at a minimum. Server Load Balancer is easier to use than traditional methods and can reduce costs by up to 60%. Server Load Balancer can be flexibly scaled according to the application load, and avoid interruption of external services in the event of traffic fluctuations. With its redundant design, it can ensure the service availability to up to 99.99%.

Server Load Balancer products' load sharing capabilities, combined with ECS's rapid creation capabilities, can lay a solid foundation for us to build a system for large numbers of users.

Accelerated static file access for regional users through CDN
If the servers for an application are deployed in the Beijing data center, users in Beijing will enjoy quicker access than Guangzhou users. This is because the access requests and reply messages for Guangzhou users have to go through a longer routing process before arriving at the servers in Beijing.

You can use Alibaba Cloud CDN to solve this issue. CDN works by caching data content to a data center that is nearest to the user. This approach greatly shortens the network access path and increases website access responsiveness and website availability. CDN can also solve issues of low network bandwidth, high user access traffic, and uneven distribution of network nodes.

Accelerated database access through caching
Most of website visits follow the Pareto principle, in which only 20% of the data represents 80% of the access requests. Therefore, we can cache hotspot data to shorten the access path to the data and reduce the pressure on our databases, thereby improving system performance and user experience.

Alibaba Cloud's Open Cache Service (OCS) works out-of-the-box to help you with quick deployment and implementation. Unlike traditional local caching services, OCS deploys its hardware and data on the cloud and offers sound infrastructure, network security and system maintenance services. You are only required to pay for the resources you have used.

If you need data persistence, select the KVStore product (compatible with the Redis protocol). Otherwise, select the OCS (compatible with the Memcached protocol) or the KVStore (compatible with the Redis protocol) according to your actual business needs.

Build an E-commerce Website Using Magento and Docker on Alibaba Cloud Starter Package

This tutorial shows you how to set up your Magento e-commerce website using Docker with Alibaba Cloud's Starter Package service.

The rapid evolution of internet technologies empowers the scores of companies to take their business online. Moreover, the rising adoption of Cloud technologies in modern enterprises enables them to minimize the costs of procuring and managing IT systems. Therefore, organizations striving to meet their growth objectives can leverage the twofold benefits of cloud computing services and e-commerce platforms. This tutorial demonstrates how you can build your own e-commerce website using the Alibaba Cloud platform.

To make it more easy and cost-efficient for startups and small-and-medium businesses (SMBs) to kickstart their online businesses, Alibaba Cloud is relaunching its Starter Package Program with several affordable plans that cost you significantly less compared to Amazon AWS, Microsoft Azure and Google GCP.

1. Why Build Your e-Commerce Website on Alibaba Cloud

Building your e-commerce platform on Alibaba Cloud offers the following advantages:

· Alibaba Cloud supports world's #1 e-commerce website, Alibaba.com, which serves millions of customers on a daily basis.
· It is a premier cloud service with 61 availability zones in 200+ countries and regions globally. This implies that with Alibaba Cloud, you deliver the data requested by your customers from the nearest available point to eliminate latency challenges.
· Alibaba Cloud supports several international certifications pertaining to Datacenters around the world, such as CSA-STAR, SOC, PCI/DSS, GDPR. Such certifications assure that the data processed on · Alibaba Cloud will always be secured by modern tools to meet the compliance requirements of international standards for data security.
· Alibaba Cloud partnered with many globally recognized enterprises such as Air Asia, Ford, and many more to deliver superior services for their clients.

2. Setup the Environment

To build your e-commerce website, you should meet the following requirements:

· Alibaba Cloud account. In case you don't already have one, set up an account before continuing
· Computer with internet access
· Basic knowledge of Docker and Docker Compose
· A virtual machine running on Ubuntu OS 16 or higher

3. Alibaba Cloud Starter Package 2.0

Alibaba Cloud's Starter Package helps you get started instantly through simple, scalable, and cost-effective Elastic Compute Service (ECS) that caters to all your cloud hosting needs. The new SSD Cloud Server Packages provide easy-to-use, high-performance virtual machines with higher data transfer plans at hugely discounted rates for enabling you to start from as low as $2.50 a month. Since it is available across 14 global regions, you can easily choose the Datacenter Region for your servers to meet any specific requirements. It allows each user to have up to five ECS instances with the simultaneous Data Transfer Plans.

How to apply OSS resources to websites

Alibaba Cloud Object Storage Service (OSS) can be used for all kinds of static resources. In this article, we will discuss how to apply OSS resources to a website and examine why a website may fail to be accessed after OSS has been applied.

Applying OSS Resources to a Website

A user can store static resources, such as images, documents, and multimedia files, on OSS and bind a custom domain name to an OSS bucket.

Bind custom domain name to OSS: OSS domain name binding

For example, if the user's website is www.a.com and it contains a static resource 1.jpg , the user can store 1.jpg on the OSS bucket and bind the domain name oss.a.com to the bucket. The previous URL link for www.a.com was www.a.com/1.jpg, but now it can be changed to oss.a.com/1.jpg. If everything is done correctly, the OSS resource will be available on the website.

How to Migrate Static Resources to OSS

There are a few options to migrate static resources to OSS.

1) Iterate over each static resource you wish to migrate and call the putObject method in the SDK to upload them to the OSS: SDK object upload

Note: This requires prior knowledge in programming

2) Call ossimport to migrate. This requires a Java development environment and ossimport tool. The tool itself is quite simple. See OSSimport data migration tool

3) Search for third-party client tools in the Alibaba Cloud Marketplace to migrate your data

Market Products

Publish a Static Website in China

Learn how to publish a static website using Alibaba Cloud services and complete the ICP process.

Site.pro Website Builder

Site.pro is a enterprise-grade website builder with a mission to reduce website development costs.

Related Documentation

Static website hosting

You can set your bucket configuration to the static website hosting mode. After the configuration takes effect, you can access this static website with the bucket domain and be redirected to a specified index page or error page.

Related Products

Object Storage Service

An encrypted and secure cloud storage service which stores, processes and accesses massive amounts of data from anywhere in the world

Elastic Compute Service

Alibaba Cloud Elastic Compute Service (ECS) helps you to power your cloud applications with low latency. All ECS instances come with Anti-DDoS protection to ensure your data security.

Related Courses

Using OSS to Publish a Static Website in China

This course is associated with Publish a static website in China with ICP. You must purchase the certification package before you are able to complete all lessons for a certificate.

Quickly Publish a Static Website using Alibaba Cloud service (Cantonese)

This course is associated with Quickly Publish a Static Website Using Alibaba Cloud Service (Cantonese). You must purchase the certification package before you are able to complete all lessons for a certificate.

1 0 0
Share on

Alibaba Clouder

2,600 posts | 754 followers

You may also like

Comments

5082756785016080 July 2, 2022 at 6:04 pm

If you need to ass a static website form to the site you can use https://fabform.io