For junior developers who are cost-conscious and strive to minimize expenses for their company, here is a method for deploying a website server using Alibaba Cloud OSS storage combined with CDN.
Introduction
Alibaba Cloud OSS
OSS (Object Storage Service) provided by Alibaba Cloud is a file storage solution. It operates on the same principle as Baidu Cloud BCS and Sina Cloud Storage that we were familiar with in the past: a cloud-based file storage scheme. Generally, OSS stores only the static files required by the website, not the program files. For example, you can store images, videos, scripts, stylesheets, and other files of the website in OSS. Similar to third-party photo album services we used previously, Alibaba Cloud provides a URL for each file stored in OSS, allowing direct access. Managing attachments on OSS via its client for Windows or Mac is also very convenient. In short, OSS is a service that helps websites store files.
Since we already have our own servers, why upload files to OSS and use the URLs provided by Alibaba Cloud? In modern server-side development, it is essential to adopt a cloud computing mindset. When setting up server environments and designing server-side architectures, we must design and implement based on cloud computing principles. This is the result of server-side development trends over the past few years. (Of course, if a website is extremely small with minimal traffic, this might be negligible.) By running the website on ECS (Elastic Compute Service) while storing large files (such as images and videos) in OSS, we can effectively reduce the I/O pressure on the server when visitors download these files, resulting in smoother server performance. This is the fundamental reason for using OSS. Additionally, using OSS accelerates file transfer speeds, allowing users to noticeably faster loading times for images and videos. Combined with CDN, it further optimizes the file access path. Compared to simply paying for additional server storage space, using OSS can also save money.
The Role of CDN
Many people are somewhat familiar with the term CDN. Instead of explaining its operational principles, let’s directly discuss its benefits. CDN solves network accessibility issues directly through network routing. Before using CDN, if you resolve your domain name directly to your server, a user accessing your website must traverse their home router, then to the regional telecom operator, then to the backbone network, and finally through network routing and DNS to find your server and download the necessary resources to display them in the browser. Any poor network condition at any intermediate link can lead to slow website access or even failure. After using CDN, you resolve your domain name to an intermediate address provided by the CDN, and set your server’s real IP at the CDN provider. When users access your website, the CDN provider caches your website resources on its own servers and returns the cache from the server closest to the visitor. This directly accelerates website access speed. In services provided by Qiniu, there is a term called “mirror.” Mirroring your website to Qiniu is essentially implementing CDN; thus, in this context, mirroring equals CDN.
In addition to these primary functions, CDN has recently added intelligent resolution, SEO optimization, and DDoS protection services. Therefore, nowadays, it is almost embarrassing to claim your website is impressive without using CDN.
Retrieving Files from OSS via Internal Network and Serving Them Externally
In Alibaba Cloud’s pricing model, storage, external network access, and API calls are all charged, with external network access fees being quite high. CDN also incurs charges, and external access to OSS is billed. Essentially, Alibaba Cloud profits significantly from this. However, Alibaba Cloud’s pricing policy states: internal network access is free. This means that if our ECS instance requests resources from OSS via the internal network, no charge is incurred. Therefore, the problem we need to solve now is: how to retrieve resources via the internal network and serve them to visitors externally?
Server and OSS Bucket Must Be in the Same Region
This is a prerequisite for building the “internal network” combination. If your website server is purchased in Hangzhou, you must select Hangzhou when creating the Bucket. If the server is in Shenzhen, you must select Shenzhen during creation.
Learn to Use Nginx Proxy Settings
Besides acting as a web server, another major function of Nginx is serving as a proxy server. This lightweight yet versatile characteristic is arguably Nginx’s greatest strength. So, how do we implement this proxy? It is actually quite simple.
Open your Nginx configuration file, such as `nginx.conf`. If you have some familiarity with this configuration file, you should easily distinguish between the `http` and `server` blocks. What we need to do is add some configuration items within one of the `server` blocks. Which specific `server` block depends on how you arranged your domain bindings. The core configuration is as follows:
http {
## ....
server {
## ....
location ~ .*.(mp3|mp4|ovg)$ {
proxy_pass http://***.oss-cn-beijing-internal.aliyuncs.com;
}
## ...
}
## ....
}
The grayed-out part above needs to be obtained from the OSS Bucket overview page. After modifying the Nginx configuration, reload the service.
Reasonably Arrange Your Website Directory and Domain Layout
Based on the two basics understood above, you need to consider another question: Do you plan to continue using www.yunwei123.com to access your website and all static files, or do you plan to use another (or several) domains to control access to your static files. My suggestion is to allocate a separate domain, such as `static.yourdomain.com`, for accessing your static files, because later we will use CDN, which requires resolving the domain name to the address provided by the CDN provider first.
Next, we handle this `static` domain. Everything under the original `www` remains unchanged. You need to write a new `server` block in `nginx.conf` to bind the `static` domain. At the same time, ensure the following in this `server` block: PHP execution must be disabled, and directory browsing must be denied (if accessible, PHP files would be downloaded); the root directory path bound must be the same as that of `www`. This means accessing `static` is actually accessing `www`, so all original static file access addresses only require replacing the domain name without modifying the URI; add the proxy configuration mentioned above. Note that not all file types call resources from OSS via proxy. For example, JS and CSS can be served directly from the local machine (of course, if you don’t mind the hassle or want unified management, you can put all static files, including JS and CSS, into OSS). Finally, reload the Nginx configuration and resolve the `static` domain to your server IP (we haven’t involved CDN yet).
location ~ .*.(gif|jpg|jpeg|png|bmp|swf|eot|otf|svg|ttf|woff)$ {
expires 30d;
}
location ~ .*.(js|css)?$ {
expires 12h;
}
# Use objects from OSS
location ~ .*.(mp3|mp4|ovg)$ {
expires 30d;
rewrite /(.+)$ /$1 break;
proxy_pass http://your-bucket.oss-cn-your-city-internal.aliyuncs.com;
}
location ~ .*.php$ {
deny all;
}
location ~ /.{
deny all;
}
If everything goes smoothly, you should be able to access your static files using the `static` domain. However, with the configuration above, you need to upload mp3, mp4, and ovg files to OSS as soon as possible, ensuring that the URL paths match those used in your website.
The next step is to modify all addresses in your website that originally called static files to the corresponding URLs associated with the `static` domain. This completes the deployment.
Deploying CDN to Accelerate Website Speed
To save costs, we can consider using some effective but free CDNs (or those with very low fees). Deploying CDN is simple: first, register for a CDN service, re-resolve the `static` domain (previously resolved to your server IP) to the address provided by the CDN provider, and then set your server’s real IP as the origin address in the CDN backend. This makes it easy to complete the setup.
However, if you occasionally need to modify CSS files, using CDN directly may cause CSS file caching, which hinders timely interface refreshes for visitors to see the latest effects. Resolving this contradiction is tricky: we want the acceleration benefits of CDN but also need timely file updates. If you must use CDN, you might need to pay for premium CDN services, which generally provide an API. When you update files, you can call this API to force the CDN to update the corresponding files. But if you really don’t want the hassle, you can simply use the `www` domain to read CSS and JS files, merge them, and output them to save bandwidth. I recommend reading an article written by Xiao Pang: “OpenResty + Lua + GraphicsMagick for Taobao-like Image Processing.”
OK, through this explanation, you should have mastered the method of retrieving OSS resources via the internal network and displaying them externally.
References:
- Setting up Reverse Proxy on ECS to Access OSS via Internal Network
- OpenResty + Lua + GraphicsMagick for Taobao-like Image Processing