配置Https,需要先申请ssl证书,一般情况下,我们只需要申请一个证书就可以了,前端和后端共用一个ssl证书。我们可以申请免费的ssl证书,也可以付费购买ssl证书,下面就演示在阿里云申请免费证书,如下所示:

我们申请好ssl证书后,就可以下载证书了,点击下载后,选择Nginx证书下载,如下所示:

下载证书后,就把ssl证书上传到Nginx里面,我们这里是上传到/etc/nginx目录里面,如下所示:

上传好ssl证书后,我们再根据ssl证书的帮助文档,查看在Nginx里面的具体配置,下面是阿里云ssl证书的配置:

server {
	listen       443;
	server_name  demo.maku.net;
	ssl on;
        ssl_certificate demo.maku.net.pem;  #需要将cert-file-name.pem替换成已上传的证书文件的名称
        ssl_certificate_key demo.maku.net.key; #需要将cert-file-name.key替换成已上传的证书密钥文件的名称
        ssl_session_timeout 5m;
        ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
        #表示使用的加密套件的类型。
        ssl_protocols TLSv1.1 TLSv1.2 TLSv1.3; #表示使用的TLS协议的类型
        ssl_prefer_server_ciphers on;


        # 前端工程的配置	
        location /maku-boot {
	    alias /work/www/maku-boot-admin;
	    index index.html;
	}

        # 后端工程的配置
        location /maku-boot-server/ {
            proxy_pass      http://localhost:8080/;
            client_max_body_size 1024m;
            proxy_set_header  X-Real-IP  $remote_addr;
            proxy_set_header  X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header  Host $host;
            proxy_redirect    off;
        }

}

重启Nginx

service nginx restart

修改前端接口

配置好Nginx后,还需要修改一下前端工程的.env.production文件,把访问地址改成后端Nginx地址,然后通过npm run build打包,把dist里面的文件,上传到/work/www/maku-boot-admin目录。

VITE_API_URL=https://demo.maku.net/maku-boot-server

访问项目

完成上面的步骤,就可以访问项目了,访问地址如下所示:

https://demo.maku.net/maku-boot