nginx + https + node + vue_node + vue ssl-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_43592800/article/details/111479355

本文介绍如何配置Nginx支持HTTPS，并通过Nginx代理访问Node.js服务及Vue应用，解决了前端调用摄像头权限问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

配置nginx + https + node + vue

为什么要配置这些，此时的我在捣鼓写的vue项目的demo玩，简单的调用摄像头并进行拍照，并将照片转换为base64字符串通过node服务存储到云服务器的mysql数据库里（并没有使用将图片上传至服务器的某个目录下，将云服务器的地址存储到数据库的方案。按道理应该要这样做的，这里只是简单的demo，不要被误解了，毕竟直接往数据库里存base64的做法是有风险的），再通过node服务读取数据库里存储的照片。就这么个简单的功能，本地调用摄像头成功，拍照没问题，放到线上后本地访问线上地址发现没有权限调用摄像头，估计就是http访问，地址不安全导致的，没有权限访问摄像头。所以准备搭建一个https环境，配置完https之后启动项目并在本地访问发现可以成功调用摄像头了。但是服务挂了，因为用node写的服务，也放在线上，https是无法访问到http的服务的，怎么办呢，我的初步思路就是把https配置到nginx，然后通过node挂起前端的页面，nginx直接代理到node的地址。一系列操作后发现是可行的，所以记录一下这个过程。

在阿里云服务器搭建nginx，服务器环境为centos7

安装nginx，这里以nginx 1.9.9版本为例

直接下载.tar.gz安装包，下载地址：https://nginx.org/en/download.html（nginx-1.9.9.tar.gz）
通过FileZilla将下载好的压缩包传送到阿里云服务器的目录下，这里我放到了服务器的/usr/local/etc目录下。也可以使用cmd命令进行传送，命令如下：scp /path/filename username@servername:/path/（其中，/path/filename为本地将要上传的文件的路径和文件名，username为云服务器的登陆用户名，servername为云服务器的ip，/path/为要上传到云服务器的文件存放路径，完整命令例：scp /Users/garyli/Desktop/nginx-1.9.9.tar.gz root@192.168.0.1:/usr/local/etc/）
上传至云服务器后，通过ssh命令连接到服务器，进入到服务器的目录，例如：ssh root@192.168.0.1 回车输入密码后即可进入到服务器目录，如果未成功，检查服务器登陆用户名和服务器ip地址，登陆密码三项是否正确，登陆正确后的欢迎界面如下图：
进入到存放nginx-1.9.9.tar.gz的目录下。例：cd /usr/local/etc，通过ls查看etc目录下是否有nginx-1.9.9.tar.gz压缩包，如果有，说明该压缩包已经成功传送到服务器。输入命令tar -zxvf nginx-1.9.9.tar.gz回车解压文件。解压完成后输入命令ls，会发现当前文件夹下多了一个nginx-1.9.9的文件，如下图：
cd nginx-1.9.9进入到文件夹，执行命令./configure，完成以后，执行编译安装命令，先执行make命令，再执行make install命令，完成以后，执行命令whereis nginx查看nginx安装后的安装目录，一般默认的安装目录为/usr/local/nginx，执行命令 cd /usr/local/nginx进入到nginx的安装目录。cd sbin进入到sbin目录下，sbin目录为nginx的启动、重启、停止等一系列操作的目录。常用的nginx命令如下，./nginx为nginx启动命令，./nginx -t为nginx起动状态命令，可以查看nginx是否启动成功，./nginx -s stop为nginx停止命令，./nginx -s reload为nginx重启命令。
在sbin目录下执行./nginx启动nginx，nginx默认监听端口为80端口，如果启动时出现80端口被占用的情况，执行命令：lsof -i tcp:80查看端口占用情况，会展示当前占用80端口进程的pid等信息，如果有进程在占用80端口，执行命令kill -9 pid（pid为进程所对应的pid）杀死进程。再次执行命令lsof -i tcp:80可以看到已经没有80端口占用进程的列表了，在sbin下执行./nginx -s stop命令，再执行./nginx就成功启动nginx了，启动成功的状态如下图：
在本地浏览器输入自己服务器的公网ip地址（如果ip地址已经绑定了域名，也可以通过域名来访问测试），回车会出现nginx的欢迎页面。到此nginx就配置完成了。注意：这里只是安装了nginx，还未配置ssl，只能通过http访问。

在nginx上配置ssl使它可以通过https访问

阿里云官网上有在nginx上如何配置ssl的详细教程，但是由于使用的nginx版本不尽相同，所以配置也会有些许差异，这里介绍一下nginx-1.9.9的配置过程。

首先你要准备什么东西：

一台云服务器。
已申请并已完成备案、解析后的域名。
已在云服务器上成功安装nginx，并能通过http://do.main.com访问到nginx。
申请ssl证书，下载证书，并上传至云服务。

首先，需要购买ssl证书，证书就购买免费的证书就可以。而且证书审核一般在2分钟左右就会签发成功，在云服务找到ssl模块，点击购买证书并按照如图右侧的配置就可以购买到免费的ssl证书了，根据提示绑定好自己的域名。
购买成功以后等待两分钟审核完成，刷新页面，申请成功的状态如下图，点击下载nginx对应的证书。
下载的文件里面包含两项：domain.cn.pem文件和domain.cn.key文件。进入到服务器上nginx的安装目录：cd /usr/local/nginx/conf，在conf目录下执行命令mkdir cert创建文件夹cert，此文件夹用来放置我们下载的nginx的ssl证书（即domain.cn.pem文件和domain.cn.key文件），接下来将下载的.pem和.key文件上传至云服务器刚刚创建好的cert目录下。
此时先不要着急配置nginx的.conf文件，我们还需要给nginx安装ssl模块，使nginx支持https访问，首先执行命令cd /usr/local/nginx/sbin进入到nginx安装目录的sbin目录，执行命令./nginx -V查看nginx的模块，如下图（这是成功安装ssl模块后应该有的样子），如果在configure arguments:后面显示的参数如下：–prefix=/usr/local/nginx --with-http_stub_status_module ，或者configure arguments:后面什么都没显示（我的是什么都没有），则代表未安装SSL模块，那么我们就要安装ssl模块儿。
安装ssl模块儿，先执行命令cd /usr/local/nginx/sbin，再执行./nginx -s stop将nginx停掉。

执行命令cd /usr/local/etc/nginx-1.9.9进入到之前解压后的nginx目录。

执行命令./configure --prefix=/usr/local/nginx --with-http_stub_status_module --with-http_ssl_module。完成以后执行命令make进行安装。

完成以后执行命令cp /usr/local/nginx/sbin/nginx /usr/local/nginx/sbin/nginx.bak对之前安装的nginx进行备份。

执行命令cp ./objs/nginx /usr/local/nginx/sbin/，将刚刚编译好的nginx覆盖掉原本安装的nginx。

然后执行命令/usr/local/nginx/sbin/nginx -V，再次查看nginx的模块儿，如果configure arguments: 后面的参数和上图的一样，为configure arguments: --prefix=/usr/local/nginx --with-http_stub_status_module --with-http_ss l_module，则证明ssl模块儿安装成功。

这里有个小插曲，就是按照上面的流程安装了无数次ssl模块儿，configure arguments: 后面的参数依然为空。再执行./configure --prefix=/usr/local/nginx --with-http_stub_status_module --with-http_ssl_module命令后，网上的教程都说只执行make命令就可以，不要执行make install，否则就是覆盖安装，由于怕出问题，每次安装都没有进行make install重新安装，只是make重新编译后复制旧版本再替换掉的过程。一直不OK的情况下，我在make编译完成以后执行了make install重新安装了一下，惊喜的发现ssl安装成功了，如果你存在同样的问题，或许你可以试一下这种方案。
ssl模块儿安装完成了，接下来就是对nginx配置ssl了，首先，进入到nginx的安装目录下的conf目录执行命令vim nginx.conf命令进行nginx的配置，键盘按下i键来修改nginx.conf文件，找到文件的如下注释内容:
将上面的注释内容打开修改或者直接替换为以下内容：

#server {

listen 443 ssl;

server_name localhost;

ssl_certificate cert.pem;

ssl_certificate_key cert.key;

ssl_session_cache shared:SSL:1m;

ssl_session_timeout 5m;

ssl_ciphers HIGH:!aNULL:!MD5;

ssl_prefer_server_ciphers on;

location / {

root html;

index index.html index.htm;

}

#}
将上面注释的内容打开修改或者直接替换为以下内容，注意阅读里面的注释，将示例域名和证书、密钥文件换成自己cert下的文件：

server {
        listen 443 ssl; #配置HTTPS的默认访问端口号为443。此处如果未配置HTTPS的默认访问端口，可能会造成Nginx无法启动。Nginx 1.15.0以上版本请使用listen 443 ssl代替listen 443和ssl on。
        server_name www.certificatestests.com; #将www.certificatestests.com修改为您证书绑定的域名，例如：www.example.com。如果您购买的是通配符域名证书，要修改为通配符域名，例如：*.aliyun.com。
        root html;
        index index.html index.htm;
        ssl_certificate cert/domain name.pem;  #将domain name.pem替换成您证书的文件名称。
        ssl_certificate_key cert/domain name.key; #将domain 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 TLSv1.1 TLSv1.2; #使用该协议进行配置。
        ssl_prefer_server_ciphers on;
        location / {
            root   html;
            index  index.html index.htm;
        }
    }

修改完成以后按下键盘esc键退出编辑，并键入:wq后按下回车键退出编辑模式。
输入命令cd /usr/local/nginx/sbin，输入命令./nginx -s reload重启nginx服务器，如果之前没启动，输入./nginx启动nginx服务器。查看nginx启动状态：./nginx -t，如果启动没问题，回到本地浏览器通过https://do.main.cn访问查看是否可以访问了。成功访问后会出现nginx的欢迎页面，并且地址栏左边会出现小锁的标志。如下图：
如果出现页面无法访问的情况，请注意以下可能存在的情况：
1. 云服务器的安全组是否配置，查看是否配置了443端口的安全组规则，如果没有配置先配置安全组规则，这里展示一个例子，端口开放1-30000这个范围，如下图：（虽然不建议这么做，但是自己测试起来是很方便的，如果不想这么做，那么也可以开放自己用到的端口号），配置完安全组以后刷新页面重新尝试一下。
2. 如果配置了安全组规则，还是拒绝访问，可以查看云服务器的防火墙状态，如果防火墙开启，是否开放了443端口。或者先关闭防火墙。输入命令systemctl status firewalld.service查看防火墙状态，输入命令firewall-cmd --zone=public --add-port=443/tcp --permanent开放443端口，或者输入命令systemctl stop firewalld.service关闭防火墙。开放了443端口应该就可以了。回到本地浏览器访问https://+域名访问，如果访问成功说明ssl已经配置完成了。

此时，通过http和https去访问你的域名，应该都可以访问到nginx的欢迎页面了，如果还有问题，可以自行定位一下问题解决一下。

接下来配置nginx代理，到你项目的启动地址，使它访问443端口的时候，可以去访问到你启动的项目
很简单，就是将我们上面配置的nginx.conf文件再做稍微的调整，将最下面的location / {}修改如下：

server {
        listen 443 ssl; #配置HTTPS的默认访问端口号为443。此处如果未配置HTTPS的默认访问端口，可能会造成Nginx无法启动。Nginx 1.15.0以上版本请使用listen 443 ssl代替listen 443和ssl on。
        server_name www.certificatestests.com; #将www.certificatestests.com修改为您证书绑定的域名，例如：www.example.com。如果您购买的是通配符域名证书，要修改为通配符域名，例如：*.aliyun.com。
        root html;
        index index.html index.htm;
        ssl_certificate cert/domain name.pem;  #将domain name.pem替换成您证书的文件名称。
        ssl_certificate_key cert/domain name.key; #将domain 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 TLSv1.1 TLSv1.2; #使用该协议进行配置。
        ssl_prefer_server_ciphers on;
        location / {
            proxy_pass http://localhost:3000;#http://localhost:3000为你项目的启动地址
        }
    }

我这里http://localhost:3000为node的启动地址，如果你和我一样有一个vue项目，那么你可以将vue项目打包，然后将打包好的dist文件夹下的内容，放在node的public文件夹下，重新启动一下node项目，再次回到本地浏览器访问https://+域名就可以访问到你的项目了