返回

免费http，10分钟轻松搞定https

前端

备案也终于下来了，折腾了一年总算把备案给办了下来，刚开始，啥都不会，当看到gitlab网站已经支持https的时候，第一时间开始折腾，大佬们都懂得，不折腾就浑身痒痒，这不，两三天折腾了下来，也算是初窥门径，为了防止以后忘了，写个博文记录下来。

https 是什么

https 即超文本传输安全协议，它是一种安全传输协议，用于在计算机网络上安全地传输数据。https 被广泛用于万维网，包括 web 应用程序、电子邮件、网络银行等。https 通过使用数字证书来验证网站的身份，并加密传输的数据，从而保证数据的安全和完整性。

https 的好处

使用 https 可以为网站带来许多好处，包括：

  • 提高安全性： https 可以保护网站的数据免受窃听和篡改。
  • 增强信任感： https 可以让用户更信任网站，因为他们知道他们的数据是安全的。
  • 提高网站的排名： Google 和其他搜索引擎会将使用 https 的网站排名更高。
  • 增加网站的访问量： 使用 https 的网站可以吸引更多的访问者，因为用户更愿意访问安全可靠的网站。

如何开启 https

开启 https 的步骤如下：

  1. 购买 SSL 证书： SSL 证书是网站的身份证明，它是由受信任的证书颁发机构颁发的。
  2. 安装 SSL 证书： 将 SSL 证书安装到您的服务器上。
  3. 配置服务器： 配置服务器以支持 https。
  4. 更新网站链接： 将网站的所有链接从 http 改为 https。
  5. 测试网站： 使用 https 访问网站，确保网站正常工作。

开启 https 的注意事项

在开启 https 时，需要注意以下几点：

  • 选择合适的 SSL 证书： SSL 证书有多种类型，您需要根据您的网站的需求选择合适的 SSL 证书。
  • 正确安装 SSL 证书： SSL 证书必须正确安装到您的服务器上，否则网站无法使用 https。
  • 正确配置服务器： 您需要正确配置服务器以支持 https。
  • 更新网站链接： 您需要将网站的所有链接从 http 改为 https。
  • 测试网站： 您需要使用 https 访问网站，确保网站正常工作。

好了，就是这些，当然并不是说教大家去学习https的原理啊，网上大把，我们必须得学习如何落地实践，才符合实际需求。

其实http或者https 对前端开发者来说并不困难，所有的代码都从服务器拉取，并按实际需求在本地展现， 我们把重点放到如何配置服务器上。

首先我们得准备两个东西：

  1. 域名，这很好理解，比如www.baidu.com里的www.baidu就是我们的域名。
  2. 服务器，服务器就是我们存放项目的虚拟空间。

如果是个人使用，显然没必要买服务器，免费的服务器当然是最好的选择，比如github pages等，但是不巧github pages只提供https，不提供http，故不符合我们需求。

最终我选择使用gitLab，国内有镜像，但实际上和国外的没有区别，这里也是使用国外的镜像。注意gitLab需要先注册，然后会有免费的空间供你使用。

注册之后，我们可以直接建立项目，但注意一定要创建empty project，千万不要创建一般性的项目，不然后续配置会非常麻烦。

创建完项目之后，我们进入到项目目录，在菜单栏找到Settings -> CI / CD。我们直接选中Enable Shared Runners。

当然如果你想自己跑，可以选择下面的Use specific Runners。

我们再点击菜单栏的CI / CD，然后找到Edit，在弹出的文本框中输入下面的内容：

image: node:latest

stages:
  - build
  - deploy

build:
  stage: build
  script:
    - echo "Building the project..."

deploy:
  stage: deploy
  script:
    - echo "Deploying the project to https://..."
  only:
    - master

点击最下面的Save Changes，这时候我们的CI就搭建完成了。

最后就是我们重点关心的东西了，如何让我们的项目跑在https上。

我们还是在gitLab项目中找到Settings -> Pages，找到HTTPs。

HTTPS://[YOUR_CUSTOM_DOMAIN]

注意这里前面一定要有HTTPS://，然后是你的域名，比如我的是https://10m.cn。

我们继续往下拉，找到Certificate，选中我们之前申请好的证书，我的是Let's encrypt，所以这里我选择Let's encrypt。然后点击Save changes。

下一步我们就要配置域名了，这时候我们找到Settings -> Domains，然后在Add domain文本框中填入你的域名。

点击Save changes，我们就可以看到Verify这个链接了，点击这个链接，会弹出一个窗口，然后我们按上面的操作流程做就行，直到出现一个绿色的对勾和Domain successfully verified字样。

下一步我们再回到Settings -> Pages -> SSL enforcement。

这里选择HTTPs forced，然后点击Save changes，大功告成，恭喜你，你已经成功将项目跑在https上。