Today, after countless toss and toss, yearning for a long time domain name put on record finally came down. So can’t wait to personal blog site HTTPS deployment migration, encountered some pits in the middle, here to make a record.

why

There are several reasons to migrate a web site from HTTP to HTTPS:

  • HTTPS is more secure and can prevent man-in-the-middle attacks more effectively than HTTP, and every project wants a security backstop. Blogs don’t have important data, but they’re a good place to practice.
  • Now HTTP2 is gaining traction as a way to speed up access, and the premise of HTTP2 is HTTPS

steps

  1. Install the certificate
  2. Nginx reverse proxy
  3. Change the front-end connection mode

Install the certificate

Why do I need a certificate? This has to do with the design of the HTTPS protocol. HTTPS stands for Hypertext Transfer Protocol Secure, also known as HTTP over SSL or HTTP over TLS. More generally, HTTPS transmits data over Http, and SSL/TLS encrypts data.

How does it do that?

First, the browser vendor pre-installs the certificates of each certificate authority for security verification of visiting web sites. Then, the individual applies a personal certificate to the certificate authority and applies the certificate to the server configuration. The browser then visits the server, obtains the public key, matches it to the list of existing certificates, and decides whether to continue. If so, the browser communicates with the server through the public key to negotiate two asymmetric private keys for encrypting their respective data transfers, thus establishing an encrypted channel to prevent eavesdropping by middlemen.

How do I install a certificate? Apply for a certificate from a certificate authority. Current organizations include Symantec, Comodo, GoDaddy, and Let’s Certbot. Here we choose the free Let’s Certbot.

There are detailed instructions on the official website. My environment is Linux 16.04 Nginx, other environments can refer to the official website instructions:

# # # # # installation:

$ sudo apt-get update
$ sudo apt-get install software-properties-common
$ sudo add-apt-repository ppa:certbot/certbot
$ sudo apt-get update
$ sudo apt-get install python-certbot-nginx 
Copy the code
start
$ sudo certbot --nginx certonly
Copy the code
Automatic renewal

You can refer to it here

The installation was successfully completed as prompted. There is a premise that the server must have a domain name, and all domestic domain names need to be put on record according to the requirements of the Ministry of Industry and Information Technology, which is why I have to wait for more than half a month.

The reverse proxy

Once the certificate is installed, if you are deploying static pages in Nginx, the HTTPS service has been successfully deployed at this point. But in more application scenarios, we provide static services such as IMG, JS, CSS, etc., on the one hand, and we also need REST services on the other. But at the moment, when we access the Node.js service API via an HTTP client library such as AXIos or Vue-Resource to retrieve data, we find that the browser disables the connection. After the HTTPS service is deployed, the entire site uses HTTPS for data transfer, including resource acquisition and GET/POST requests.

How to solve it? I took a few detours here. Since it is the API to access node.js server, I know that Node.js supports HTTPS service, so IT is natural to use Openssl for self-authentication in Node. There are many tutorials on the web, but self-certifying certificates are not recognized in browsers. Therefore, this method is feasible but not suitable for other users to access, let alone production environment. Here are a few recommended tools:

  • Postman
  • Firefox

The first one is that you can send all kinds of requests through a mock browser, which is really handy for testing the API and the second one is recommended here because I started using Chrome and it gave me a very vague error message, Firefox is more straightforward with Request/Response error messages in Network and has helped me a lot on this issue.

XXXX provides unsupported self-signed certificates.. Nginx has a reverse proxy function. If you want to make an API reverse proxy and navigate to the Node service port, will it be useful? Nginx reverse proxy tutorial:

In the/ete/nginx/site – the available/in the default:

location /api {
    proxy_pass      http://localhost:8089;
    proxy_buffering on;
}
Copy the code

Restart nginx and restart the Node service.

Success!

In this way, we have a reverse proxy that lets REST services not worry about certificates, because Nginx already does that.

Change the front-end connection mode

This section is optional because I used vue-resource to connect to this.$HTTP, so I can’t connect to HTTPS.

  • Use Axios for simple and elegant processing

The last

The whole process is quite messy, because I am not familiar with the underlying protocol of SSL/TLS, and Nginx is new, the reverse proxy only heard before, but did not actually operate. Admittedly, Nginx is configured in a friendly way, so it’s easy to see what it means. So it’s not complicated to configure.

I’m going to take this part a little further and write a series.