Upgrade the website from HTTP to HTTPS

Zhongkai_ Kaige Java 2021-02-23 10:46:26
upgrade website http https

Website by http Upgrade to https Text course

This article is based on the personal website of Kago by http Upgrade to https The record of .

A description of the premises : Kago's website is AliYun On file . So based on this . If the domain name of Tencent cloud backup is similar .

A term is used to explain :

HTTP And HTTPS What is it? ?

HTTP agreement ( Hypertext transfer protocol ) It is the most widely used network protocol on the Internet , It is often used in web Passing information between browser and web server ,http The protocol transfers data in plaintext , If it's intercepted on the way , You can read the information . Remember that the login interface of a certain medical device of the company was intercepted before , The page is full of advertisements .

In order to solve HTTP This flaw in the agreement , It's going to stretch out HTTPS agreement ( Secure socket layer Hypertext Transfer Protocol ),HTTPS stay HTTP On the basis of adding SSL agreement ,SSL Rely on certificates to verify the identity of the server , by web The communication data between browser and server is encrypted .

HTTPS There are two main functions of the agreement :

Set up an information security channel , To ensure the security of data transmission

Confirm the authenticity of the website .

HTTP And HTTPS What's the difference?

https The agreement needs to reach ca Apply for a certificate , Generally, there are fewer free certificates , So there is a certain cost .

http It's the hypertext transfer protocol , The message is transmitted in clear text ,https It is safe ssl Encrypted transport protocol .

http and https It USES a completely different connection , The ports are different , The former is 80, The latter is 443.

http The connection is simple , It's stateless ;HTTPS Agreement is made SSL+HTTP The protocol is built for encrypted transmission 、 Network protocol for identity authentication , Than

Certificate application process :

1: There are free certificates in Alibaba cloud or Tencent cloud .( notes : Because Kaige is registered in alicloud . So it's based on AliYun Applied .)

2: Log in to alicloud - Console - Products and services - Search for SSL. Here's the picture :


Click on SSL certificate ( Application security ) Then go to the purchase page . Here's the picture :


choice : Yundun certificate resource package . Here's the picture :


Choose free certificate expansion package . Here's the picture :


explain : You can get it once in a natural year 20 Free certificate resource package for . By the end of the natural year , It will automatically clear . Every natural year is 12 month 31 Japan 24:00

Buy now :


After successful purchase , Waiting for the management console :


You can see the certificate resource package . Then click certificate application , You can see it in the certificate management list below , Add a new piece of data . Here's the picture :


Then click certificate application . Will open and fill in the application . Here's the picture :


explain :

Certificate binding domain name : It's the domain you need to bind

Contact and location , After selection , Can .CRS There is no need to modify the generation method .

After completion , It goes to the verification information . Here's the picture :


Because in the last step 【CRS There is no need to modify the generation method 】 We didn't choose manual . therefore , It can be submitted directly for review .

Submit for review soon . It's just 1-2 Minutes! . Here's the picture :


After selecting the domain name to be deployed , Select Download . The certificate of the specific deployment mode will be opened . Then select the corresponding download . Because Kago uses Nginx. So the download is Nginx Of . Here's the picture :


The download is a zip Compressed package . After decompressing the compressed package , You can get the corresponding to PEM and KEY Two files at the end . Here's the picture :


Nginx Deploy :

Upload Certificate :

Upload the two extracted files to the server .

Like Kago's upload directory :/usr/local/nginx/ssl/lingquan

explain : Among them lingquan It's one of Kago's websites . If there are more than one that can be distinguished in this way .

stay Nginx Configuration in the configuration file of :

Because Kago uses the pagoda panel . So modify between the corresponding websites in the pagoda panel . Here's the picture :


without 443 Of server Node add . If there is , Follow the configuration below :

server {

listen 443 ssl;

server_name Your domain name ;

root Your project roots ;

index index.html;

ssl_certificate /usr/local/nginx/ssl/xxx/xxx.pem;

ssl_certificate_key /usr/local/nginx/ssl/xxx/xxx.key;

ssl_session_timeout 5m;

ssl_protocols TLSv1 TLSv1.1 TLSv1.2;


ssl_prefer_server_ciphers on;


Here's the picture :


explain :
ssl_certificate: yes PEM The absolute path to the file

ssl_certificate_key: yes KEY The absolute path to the file .

Once the configuration is complete , restart Nginx. And then verify . Use https Visit your domain name .

Verify that the configuration is successful


You can see the use of https At the time of the visit , There's a little green lock . Indicating successful configuration

http Force jump to https To configure :

sometimes , We need to http Access is forced to jump to https Of . The configuration is as follows :

server {

listen 80;

server_name You go to the domain name ;

return 301 https:// h o s t host request_uri;


本文为[Zhongkai_ Kaige Java]所创,转载请带上原文链接,感谢

  1. Svg editor -- new path
  2. Detailed explanation of debounce and throttle of JavaScript function
  3. Anti shake and throttling and corresponding react hooks package
  4. C2m: the first CSDN article moved to MOOC script 5000 words, detailed painstaking development process, there are renderings and source code at the end of the article
  5. Front end, school recruitment, Taobao, guide
  6. [vue2 & G6] get started quickly
  7. Canvas from the beginning to the pig
  8. Take five minutes to standardize the code comments?
  9. Some thoughts on sass
  10. what?! You haven't filled in the award information yet
  11. How to get the interface + tsdoc needed by TS through swagger
  12. Binary tree
  13. Canvas drawing method in Web screenshot
  14. Front end docker image volume optimization (node + nginx / node + multi-stage construction)
  15. Become a big influence of technology? Coding pages quickly build personal blog
  16. Object and array deconstruction, spread operator, rest operator
  17. Analysis of Axios source code
  18. Two ways to delete useless code in project (Practical)
  19. Edit your picture with canvas
  20. Today's chat: 2-4 years to walk out of the resignation dilemma and comfort zone
  21. JS mechanism 3: stack, heap, garbage collection
  22. [grid compression evaluation] meshquan, meshopt, Draco
  23. Deep understanding of Vue modifier sync [Vue sync modifier example]
  24. WebView for front end engineers
  25. React form source code reading notes
  26. Deep thinking about modern package manager -- why do I recommend pnpm instead of NPM / yarn?
  27. On the sequence of event capture and event bubbling
  28. Help you build a systematic understanding of the front end scaffolding
  29. commander.js Principle analysis
  30. Common usage of nginx
  31. H5 jump to wechat app
  32. Front end algorithm interview must brush questions series [14]
  33. Thinking of cross end practice
  34. Vue server rendering principle analysis and introduction
  35. [KT] vscode plug in development example series (2)
  36. Design ideas of react and Vue framework
  37. JavaScript String.prototype.replaceAll 兼容性导致的问题
  38. JavaScript String.prototype.replaceAll Problems caused by compatibility
  39. 爱奇艺体育:体验Serverless极致扩缩容,资源利用率提升40%
  40. Iqiyi Sports: experience the ultimate expansion and contraction of serverless, and increase the utilization rate of resources by 40%
  41. 对前端异常window error捕获的全面总结
  42. A comprehensive summary of front end exception window error capture
  43. 成功解决Problem while trying to mount target]\“. HTTP response code is 400
  44. Problem while trying to mount target] \ ". HTTP response code is 400
  45. 放弃okhttp、httpClient,选择了这个牛逼的神仙工具!贼爽
  46. 前端面试每日 3+1 —— 第679天
  47. How to add elements at the beginning of an array in JS?
  48. Give up okhttp and httpclient and choose this awesome immortal tool! Thief Shuang
  49. Front end interview daily 3 + 1 - day 679
  50. 【2021 第一期】日常开发 26 个常见的 JavaScript 代码优化方案
  51. Daily development of 26 common JavaScript code optimization schemes
  52. 前端的字符串时间如何自动转换为后端Java的Date属性,介绍springMVC中如何解决时间转换问题
  53. How to automatically convert the front-end string time to the back-end Java date attribute, and how to solve the time conversion problem in spring MVC are introduced
  54. 前端面试常考题:JS垃圾回收机制
  55. ReactDOM.render串联渲染链路(一)
  56. 更简洁、更快速!腾讯云 Serverless 云函数创建流程再次升级!
  57. 粗涉Webpack
  58. Frequently asked questions in front end interview: JS garbage collection mechanism
  59. ReactDOM.render Serial rendering link (1)
  60. More concise and faster! Tencent cloud serverless cloud function creation process upgrade again!