“This article has participated in the good article call order activity, click to see: back end, big front end double track submission, 20,000 yuan prize pool for you to challenge!”
preface
The first two posts shared how to deploy a Github page and give your own domain name to your web page. I’m sure many people will be able to deploy your own domain name to your Github page without reading these two posts. However, they will soon be persuaded to quit by Github’s slow Internet connection.
I just find on making a web page to measure the speed of http://blesstosam.github.io/, and boy, most Chinese can not access, click here to view the details.
It’s all red. It scares me to death. Let’s see how fast the CDN:
Although sometimes the visit was not quite satisfying, the overall situation was rather slowly than the above.
The problem
Because Github is in a foreign country, it’s already slow to transfer information, and sometimes it’s hard to even open it.
How about a foreign CDN? Emmm, I went to AWS to have a look, to tell you the truth, I don’t quite understand, and now I haven’t used my account, and I still owe money…
When I first came into contact with domestic CDN, I found that:
What… ? Use domestic CDN only for domestic domain names?
What… ? Bought the domain name of domestic even put on record?
What… ? Rent a server for three months before filing?
Grass, I haven’t even fucking configured it yet, and I have to rent 200 servers? I’m afraid I’m not a stupid loser.
However, recently found that Tencent cloud can also give foreign domain name CDN, to share a wave of it.
The preparatory work
Before you start, you want XDM to have the following things ready:
- Has deployed a lot of static web pages, also don’t know how to do can see my personal web page making deployment | one-click deployment
- On NameSilo bought foreign domain name, and in making good configuration, can see you don’t know how my personal web page # making deployment | custom domain name
- A Tencent cloud account (other clouds are up to you)
In order to do this CDN configuration share, I first wrote the above two articles to pave the way, I hope you more support ~
The principle of
Just a quick look at how a CDN, originally called content distribution Network, works.
Why is it called content distribution? If a express delivery from Heilongjiang to Hainan takes about 45 hours.
Jd.com has a different mindset: I put a lot of goods in a warehouse in Hainan, and when someone orders it, it can be shipped directly from the small warehouse in Hainan, which can greatly reduce the delivery time. The whole framework is the content distribution network.
It can be seen from the above two features of CDN:
- Drawn to the nearest
- Content caching
Caching issues
I don’t know if you think about this: if the CDN does caching, then even if I release a new version, the CDN will still cache the old files, and the user will still see the old page.
In fact, both React and Vue projects save js and CSS files as [contenthash].js and [Contenthash].css after packaging, where contenthash is the hash value of the entire file content.
As soon as the content of the file changes, the contenthash value will change, a new CSS or JS file will be uploaded to the CDN, and the CSS and JS resource paths referenced by the index.html will also change. This will solve the problem that each release cannot overwrite the previous version.
Again, someone might ask: “Contenthash value is the same, not afraid of overwriting the file?” . The same contenthash value means that the contents of the file are the same, and even if overwritten, they are overwritten by the same content, so file overwriting is not a problem.
Some people will ask: “If I change one word of my file, publish it once, and each release will send a new JS or CSS file, then the resources on the CDN will become more and more?” . Yes, but the resource space of CDN is theoretically infinite, and JS and CSS generally don’t take up much space. You can’t ship 100 versions a day, can you? Even if the storage space is insufficient, let o&M expand the space.
Note here: do not putindex.htmlPackaged in[contenthash].htmlBecause Github requires that HTML files on our branch be calledindex.html, and the file with the same name on the CDN will have the problem that the above cache is not updated, so only the static resources such as CSS and JS need CDN cache, while HTML cannot be cached.
The above deployment is a common one, where static resources (CSS, JS, fonts, image, etc.) are deployed on the CDN to speed up access, and then index. HTML is deployed on the COS bucket to override the previous version of index. HTML.
In general, our architecture starts like this:
It looks like this:
There is a CDN server between DNS and Github.
Configure the Tencent Cloud CDN server
First, click: console.cloud.tencent.com/cdn enter CDN (content distributed network) of the console.
Go to Domain Management -> Add Domain name.
Then select Outside China in domain configuration, fill in your domain name, and select static acceleration.
In fact, CDN is just a middleman, essentially as the intermediary forwarding, so the IP address of the source site should be configured here, that is, where the cached HTML, CSS, JS should be obtained from. Since we deployed the web page on Github, we need to fill in the four A records provided by Github.
185.199.108.153
185.199.109.153
185.199.110.153
185.199.111.153
Copy the code
Select HTTPS here and configure HTTPS next.
Remember when we said don’t cache the index.html as well, otherwise you’ll see the last version of HTML after deployment. Therefore, add the HTML suffix to the caching behavior in the service configuration – not caching.
Also, you can select node cache and browser cache:
The benefit of browser caching is that you can save traffic on your CDN (yes, traffic costs money, though not much), and the downside is obvious, in case you do do a content refresh, the user may still be visiting the previous version.
So you can choose what you want to do, but I’m only adding 2 days to the node cache.
Finally, click Submit.
HTTPS
It is necessary to give HTTPS to your personal web page, otherwise it is a bit amateurs to pop up “The website you visited is not secure” when someone accesses your web page. So, this step is to give our domain name an SSL certificate.
In the original Content distribution Network console click Certificate Management to create a certificate.
Go to the configuration page and fill in your domain name before selecting the certificate.
I believe that most people do not have Tencent Cloud hosting certificate at the beginning, so click the above SSL certificate management to enter the management page, and then click to apply for free certificate (Baijiao) :
Then fill in the content step by step:
Note that in the third step here, you need to verify the validity of your domain name by adding a TXT record to NameSilo.
(You can also wait until the next NameSilo configuration to add the TXT record, and then continue with the following steps) :
Finally, go back to the CONTENT distribution network and bind the certificate in the configuration certificate so that our CDN can have HTTPS as well.
Configuration NameSilo
Going back to domain name management, we can see that the CDN gives us a CNAME:
As long as the CNAME of the DNS is pointed to the CNAME of the CDN, then the whole access link is strung.
DNS -> CDN -> Github
Copy the codeOpen the NameSilo domain name Management page:
After entering the domain details page, click Update at DNS Records in the upper left corner (this configuration page is really hard to find) :
Then click CNAME to add two CNAME records, and enter the CNAME of the CDN just obtained from Tencent Cloud in value.
Then, go get a cup of coffee, check out station B, wait an hour, head over to your domain name.
conclusion
To summarize, what did we do here:
- Add a CDN server and point the source of the CDN to the Github server
- In the DNS configuration, the CNAME is pointed to the CDN
- Issue a certificate to your own domain name and bind the certificate to the CDN
I believe that after configuring this set, your website will be much faster than before.
If you think this post will help you, you can click a like before you go