前后端分离项目域名配置Https

在之前的文章中，介绍了前后端分离项目nginx配置域名访问，这篇文章将介绍如何通过Certbot获取免费https证书，为网站配置https访问。

1.安装certbot

wget https://dl.eff.org/certbot-auto

image.png

• 赋予权限

chmod a+x certbot-auto

2.获取证书

• 首先停止nginx

systemctl stop nginx

• 运行获取证书命令

./certbot-auto certonly --standalone -d  www.demoProject.com   # www.demoProject.com为你想要配置https的域名

• 如果需要安装，输入y即可

  
  
  

  image.png

• 输入邮箱

  
  
  

  image.png

• 选择同意

  
  
  

  image.png

• 选择yes

  
  
  

  image.png

• 如果成功会提示如下：

  
  
  

  7802645-21703d31487e7e12.png

• 用命令查看已有的https证书

ls /etc/letsencrypt/live/

3.配置前端项目https证书

• 首先配置前端项目的证书
  前端项目原来的nginx配置如下：

server {

    listen       80;
    server_name  www.demoProject.com;    #该域名为阿里云绑定服务器的域名

    location / {
        proxy_set_header Host $host;
        root /root/server/vue/demo;             #项目路径
        index /index.html;                        
        try_files $uri $uri/ /index.html;        #匹配不到任何静态资源，跳到同一个index.html
    }

    #error_page  404              /404.html;

    # redirect server error pages to the static page /50x.html
    #
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }

}

• 现在增加https支持，修改为如下（这样配置，支持http访问，也支持https访问）：

server {

    listen 443 ssl;
 
    ssl on;
    ssl_certificate /etc/letsencrypt/live/www.demoProject.com/fullchain.pem;   #注意域名填写正确
    ssl_certificate_key /etc/letsencrypt/live/www.demoProject.com/privkey.pem; #注意域名填写正确
    ssl_session_timeout 5m;
    ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
    ssl_ciphers ECDH:AESGCM:HIGH:!RC4:!DH:!MD5:!aNULL:!eNULL;
    ssl_prefer_server_ciphers on;


    listen       80;
    server_name  www.demoProject.com;

    location / {
        client_max_body_size 100M;
        proxy_set_header Host $host;
        root /root/server/vue/vbp/;             #项目路径
        index /index.html;                        
        try_files $uri $uri/ /index.html;        #匹配不到任何静态资源，跳到同一个index.html
    }

    #error_page  404              /404.html;

    # redirect server error pages to the static page /50x.html
    #
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }

}

• 如果想强制跳转https，改为

server {

    listen 443 ssl;
    server_name  www.demoProject.com;
 
    ssl on;
    ssl_certificate /etc/letsencrypt/live/www.demoProject.com/fullchain.pem;   #注意域名填写正确
    ssl_certificate_key /etc/letsencrypt/live/www.demoProject.com/privkey.pem; #注意域名填写正确
    ssl_session_timeout 5m;
    ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
    ssl_ciphers ECDH:AESGCM:HIGH:!RC4:!DH:!MD5:!aNULL:!eNULL;
    ssl_prefer_server_ciphers on;


    location / {
        client_max_body_size 100M;
        proxy_set_header Host $host;
        root /root/server/vue/vbp/;             #项目路径
        index /index.html;                        
        try_files $uri $uri/ /index.html;        #匹配不到任何静态资源，跳到同一个index.html
    }

    #error_page  404              /404.html;

    # redirect server error pages to the static page /50x.html
    #
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }

}


server {
    listen       80;
    server_name  www.demoProject.com;
    rewrite ^/(.*) https://$server_name$request_uri? permanent;
}

4.配置后端项目https证书

• 由于我们之前已经安装过certbot，所以后端项目只需要为其申请一个证书即可。
  记得追加域名，首先需要先停止nginx，否则会报无法绑定80端口：

systemctl stop nginx  #停止nginx
./certbot-auto certonly --standalone --email [email protected] --agree-tos -d xxx.xxx.com
#email后面填写邮箱，-d后面填写想要增加的域名

成功后会显示如下：

7802645-21703d31487e7e12.png

查看生成的正式域名：

ls /etc/letsencrypt/live/

• 后端项目原先通过http域名访问的nginx配置如下：

upstream api.demoProject.com{
    server 192.168.1.110:8090 weight=1;    #此处ip为服务器内网IP，端口号为tomcat端口号
}


server {

    listen       80;
    server_name  api.demoProject.com;

    location / {
        client_max_body_size 100M;
        proxy_set_header Host $host;
        proxy_pass http://api.demoProject.com;
    }

    #error_page  404              /404.html;

    # redirect server error pages to the static page /50x.html
    #
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }

}

• 现在为其增加https访问，修改如下（这样配置，支持http访问，也支持https访问）：

upstream api.demoProject.com{
    server 192.168.1.110:8090 weight=1;
}


server {

    listen 443 ssl;
 
    ssl on;
    ssl_certificate /etc/letsencrypt/live/api.demoProject.com/fullchain.pem;   #注意域名填写正确
    ssl_certificate_key /etc/letsencrypt/live/api.demoProject.com/privkey.pem; #注意域名填写正确
    ssl_session_timeout 5m;
    ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
    ssl_ciphers ECDH:AESGCM:HIGH:!RC4:!DH:!MD5:!aNULL:!eNULL;
    ssl_prefer_server_ciphers on;

    listen       80;
    server_name  api.demoProject.com;

    location / {
        client_max_body_size 100M;
        proxy_set_header Host $host;
        proxy_pass api.demoProject.com;
    }

    #error_page  404              /404.html;

    # redirect server error pages to the static page /50x.html
    #
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }

}

• 如果想强制跳转https可以照着前端项目的配置即可。

5.证书自动定时更新

• 免费申请的证书时效只有90天，我们需要设置自动更新的功能，帮我们自动更新证书的时效。
• 以下脚本利用crontab任务，每周一的凌晨2点30分去定时更新证书，并且将日志写入le-renew.log

crontab -e    #编辑crontab

加入以下内容

30 2 * * 1 /root/certbot-auto renew --pre-hook "systemctl stop nginx" --post-hook "systemctl start nginx" >> /var/log/le-renew.log 2>&1 &

• 注意定时任务中的certbot-auto路径，一定要写完整的路径，由于我安装的时候没注意，所以安装在了root下面，路径就是/root/certbot-auto，也可以手动先执行一下命令，看看能否运行。比如执行以下命令，在控制台先打印日志，不写到log

root/certbot-auto renew --pre-hook "systemctl stop nginx" --post-hook "systemctl start nginx"

执行后，出现以下内容，则代表成功执行命令了。

image.png