Node.js + Nginx 部署 HTTPS 服务

简介:

今天,经过无数次折腾,向往已久的域名备案终于下来了。于是迫不及待地将个人博客网站进行 HTTPS 部署迁移,中间遇到一些坑,在此做个记录。

原因

之所以要将网站从 http 迁移到 https,原因有:

  • https 更安全,相对于 http 可以较为有效防止中间人攻击,每个项目都希望安全托底。博客虽然没有重要数据,但不失为练兵的好地方。
  • 如今 HTTP2 越来越受人关注,它可以提高访问速度,而 HTTP2 的前提就是 HTTPS

步骤

  1. 安装证书
  2. nginx 反向代理
  3. 更改前端连接方式

安装证书

为什么需要证书?这和 HTTPS 协议的设计有关。 HTTPS,指的是 Hypertext Transfer Protocol Secure,另外也也可以称为 HTTP over SSL 或者 HTTP over TLS。通俗一点,HTTPS 通过 Http 协议传输数据,SSL/TLS 加密数据。

它是如何实现加密的呢?

首先,浏览器厂商预先安装了各个 证书颁发机构 的证书,用于对访问网站进行安全验证 然后,个人向 证书颁发机构 申请个人证书,并将证书应用于服务器配置中。 之后浏览器访问服务器,获取公钥,将其与已有的证书列表匹配,决定是否继续。 如果通过,浏览器通过公钥与服务器通信,协商两个非对称私钥,用于各自的数据传输加密,从而建立的加密通道,防止中间人窃听。

如何安装证书? 向证书颁发机构申请证书即可。目前的机构有Symantec、Comodo、GoDaddy 以及 Let's Certbot。这里我们选择免费的 Let's Certbot

在官网上有详细的说明。我的环境是 Linux 16.04 Nginx,其他的环境可以参照官网说明:

#####安装:

$ 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 
复制代码
开始
$ sudo certbot --nginx certonly
复制代码
自动续期

可以参考 这里

根据提示,顺利安装完毕。这里有个前提,就是服务器要有域名,而国内的域名都需要按照工信部要求备案,这也是为什么我需要等待大半个月的原因。

反向代理

证书安装完毕,如果部署在 nginx 中的是静态页面,那么此刻已经顺利部署了 HTTPS 服务。但是更多的应用场景中,我们一方面提供静态服务,如 img、js、css 等等,另一方面我们也需要 REST 服务。 但是此刻,当我们通过 axios 或者 vue-resource 这样的 HTTP client 库来访问 Node.js 服务 API 来获取数据,发现浏览器禁止了该连接。原因是在部署 HTTPS 服务后,整站都要使用 https 来进行数据传递,包括资源的获取,GET/POST 请求等等。

如何解决?我在这走了一些弯路。当时想,因为是访问 Node.js 服务器的 API,我知道 Node.js 是支持 HTTPS 服务的,所以想当然在 Node 中使用 Openssl 来进行自认证。网上有很多类似的教程,但是在浏览器中,对于自认证的证书并不认可。所以这种方法可行但不适用于其他用户访问,更不能应用于生产环境。这里推荐几个工具:

第一个是可以发送模拟浏览器发送各种请求,对于测试 API 来说十分方便 第二个之所以在这里推荐是因为我一开始使用 Chrome,但给出的错误提示很模糊,而 Firefox 在 Network 中对于 Request/Response 错误信息会更直白,在这个问题上帮了我很多忙。

正是 Firefox 给出的提示:xxxx 提供了不支持的自签名证书..,我知道自签名走不通,于是往 Nginx 上考虑了一下,想到 nginx 有反向代理功能,如果说,做一个 api 的反向代理,导航到 node 服务端口,会不会有用呢?于是在网上查找了 Nginx 反向代理的教程,操作如下:

/ete/nginx/site-available/default 中:

location /api {
 proxy_pass http://localhost:8089;
 proxy_buffering on;
}
复制代码

重启 nginx,重启 node 服务。

success!

这样,我们通过反向代理让 REST 服务无需担心证书问题,因为 Nginx 已经做了这一部分工作。

更改前端连接方式

这一部分可选,因为我之前使用的是 vue-resource,连接使用 this.$http 所以无法对 HTTPS 进行连接,解决该问题,可以:

  • 使用 axios,简单优雅处理

最后

整个过程写的比较乱,原因还是自己对 SSL/TLS 的底层协议不熟悉,而且 Nginx 也是新学,反向代理之前只有所耳闻,并没有实际操作过。但不得的说,Nginx 的配置方式比较友好,一看就明白它是什么意思。所以配置起来也不复杂。

接下去会把这部分在深入一点,写一个系列吧。


作者:allenWang
链接:https://juejin.im/post/5b1945b26fb9a01e554c042e
来源:掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
相关文章
|
5月前
|
应用服务中间件 网络安全 nginx
手把手教你使用 Docker 部署 Nginx 教程
本文详解Nginx核心功能与Docker部署优势,涵盖镜像拉取、容器化部署(快速、挂载、Compose)、HTTPS配置及常见问题处理,助力高效搭建稳定Web服务。
2202 4
|
10月前
|
应用服务中间件 Linux 网络安全
Centos 8.0中Nginx配置文件和https正书添加配置
这是一份Nginx配置文件,包含HTTP与HTTPS服务设置。主要功能如下:1) 将HTTP(80端口)请求重定向至HTTPS(443端口),增强安全性;2) 配置SSL证书,支持TLSv1.1至TLSv1.3协议;3) 使用uWSGI与后端应用通信(如Django);4) 静态文件托管路径设为`/root/code/static/`;5) 定制错误页面(404、50x)。适用于Web应用部署场景。
934 87
|
JSON JavaScript Linux
【MCP教程系列】Node.js+TypeScript搭建NPX MCP服务并自定义部署至阿里云百炼
本文介绍如何将阿里云百炼的工作流封装成MCP服务并部署,随后引入到智能体中使用。主要步骤包括:1) 封装MCP服务;2) 发布到npm官方平台;3) 在阿里云百炼平台创建自定义MCP服务;4) 在智能体中添加自定义MCP服务。通过这些步骤,用户可以轻松将工作流转化为MCP服务,并在智能体中调用。
3763 0
|
5月前
|
应用服务中间件 Linux nginx
在虚拟机Docker环境下部署Nginx的步骤。
以上就是在Docker环境下部署Nginx的步骤。需要注意,Docker和Nginix都有很多高级用法和细节需要掌握,以上只是一个基础入门级别的教程。如果你想要更深入地学习和使用它们,请参考官方文档或者其他专业书籍。
256 5
|
应用服务中间件 PHP nginx
今日小结通过aliyun的本地容器镜像部署我的nginx和php环境
简介: 本教程介绍如何基于 Dragonwell 的 Ubuntu 镜像创建一个运行 Nginx 的 Docker 容器。首先从阿里云容器镜像服务拉取基础镜像,然后编写 Dockerfile 确保 Nginx 作为主进程运行,并暴露 80 端口。最后,在包含 Dockerfile 的目录下构建自定义镜像并启动容器,确保 Nginx 在前台运行,避免容器启动后立即退出。通过 `docker build` 和 `docker run` 命令完成整个流程。
486 25
今日小结通过aliyun的本地容器镜像部署我的nginx和php环境
|
弹性计算 运维 监控
快速部署 Nginx 社区版
Nginx是一个高性能的HTTP和反向代理服务器。Nginx在计算巢上提供了社区版服务,您无需自行配置云主机,即可在计算巢上快速部署Nginx服务、实现运维监控,从而方便地基于Nginx搭建您自己的应用。本文介绍使用如何通过计算巢快速部署Nginx社区版。
快速部署 Nginx 社区版
|
10月前
|
应用服务中间件 Linux 网络安全
技术指南:如何把docsify项目部署到基于CentOS系统的Nginx中。
总结 与其他部署方法相比,将docsify项目部署到基于CentOS系统的Nginx中比较简单。以上步骤应当帮助你在不花费太多时间的情况下,将你的项目顺利部署到Nginx中。迈出第一步,开始部署你的docsify项目吧!
408 14
|
JavaScript 前端开发 Docker
如何通过pm2以cluster模式多进程部署next.js(包括docker下的部署)
通过这些步骤,可以确保您的Next.js应用在多核服务器上高效运行,并且在Docker环境中实现高效的容器化管理。
1304 44
|
资源调度 前端开发 JavaScript
vite3+vue3 实现前端部署加密混淆 javascript-obfuscator
【11月更文挑战第10天】本文介绍了在 Vite 3 + Vue 3 项目中使用 `javascript-obfuscator` 实现前端代码加密混淆的详细步骤,包括安装依赖、创建混淆脚本、修改 `package.json` 脚本命令、构建项目并执行混淆,以及在 HTML 文件中引用混淆后的文件。通过这些步骤,可以有效提高代码的安全性。
1602 2