namecheap ssr_如何将SSL证书和自定义Namecheap域添加到GitLab Pages站点

namecheap ssr

by Erica Pisani

埃里卡·皮萨尼(Erica Pisani)

如何将SSL证书和自定义Namecheap域添加到GitLab Pages站点 (How to add an SSL certificate and custom Namecheap domain to a GitLab Pages site)

Adding an SSL certificate and custom Namecheap domain to a GitLab Pages site can be a bit more challenging than it seems.

将SSL证书和自定义Namecheap域添加到GitLab Pages站点可能比看起来更具挑战性。

Crucial pieces of the setup information live in sometimes dense documentation across different sites. It can be hard to tell if you’ve set things up correctly given that you have to wait hours to confirm your changes have propagated.

设置信息的关键部分有时存在于不同站点的密集文档中。 考虑到您必须等待数小时才能确认更改已传播，因此很难判断您是否已正确设置。

Even when you know something is wrong, you can’t always tell what. This makes debugging the problem frustrating and challenging to fix.

即使您知道出了什么问题，也不能总是说出什么。 这使得调试问题令人沮丧并且难以解决。

This guide aims to make the process a bit more straightforward and less frustrating. It assumes that you’ve:

本指南旨在使该过程更直接，更省力。 它假定您已经：

• Already set up your project on GitLab Pages and are able to access it by entering <your-username>.gitlab.io/<your-project-name> in your browser

  已经在GitLab Pages上设置了项目，并能够通过在浏览器中输入<your-username>.gitlab.io/<your-proj来访问它

• Have purchased a custom domain name along with an SSL certificate through Namecheap
  通过Namecheap购买了自定义域名和SSL证书

步骤1：激活SSL证书 (Step 1: Activate the SSL certificate)

In Namecheap, go to the ‘Product List’ > ‘SSL Certificates’ page. You should see a list of SSL certificates that you have purchased, but have not yet activated. Click ‘Activate’ on the SSL certificate that you wish to activate for your site.

在Namecheap中，转到“产品列表”>“ SSL证书”页面。 您应该看到已购买但尚未激活的SSL证书列表。 在您要为站点激活的SSL证书上单击“激活”。

步骤2：产生SSL凭证要求 (Step 2: Generate the SSL certificate request)

You should have been brought to a page that looks like the following:

您应该被带到一个如下所示的页面：

In order to generate a CSR, you’ll need to run the following command in your terminal: openssl req -new -newkey rsa:2048 -nodes -keyout <your-domain-name>.key -out <your-domain-name>.csr.

为了生成CSR，您需要在终端中运行以下命令： openssl req -new -newkey rsa:2048 -nodes -keyout <your-domain-name>.key -out <your-domain-n ame> .csr。

A private key will be generated as a result of that command. DO NOT LOSE THIS KEY. You will need it later on when you go to install your certificate on GitLab. Should you lose it, you will have to submit another CSR request.

该命令将生成一个私钥。 不要丢掉这个钥匙。 以后在GitLab上安装证书时将需要它。 如果您丢失了它，则必须提交另一个CSR请求。

You can read the nitty-gritty details here about generating a CSR if you wish, but the TL;DR is:

您可以阅读细枝末节这里了解，如果你想生成CSR，但TL; DR是：

• It’s strongly encouraged that you fill out all the required fields. Your CSR could be rejected during activation of you do not. If you are filling this CSR out for a personal or hobby site, you can enter NA for the ‘Organization’ and ‘Organization Unit’ fields.

  强烈建议您填写所有必填字段。 您的CSR可能会在您激活期间被拒绝。 如果您要为个人或爱好网站填写此CSR，则可以在“组织”和“组织单位”字段中输入NA 。

• If the certificate is being issued for a specific subdomain, you need to specify the subdomain in the ‘Common Name’ field. Example: subdomain.ssl-certificate-host.com

  如果证书是针对特定子域颁发的，则需要在“公用名”字段中指定子域。 示例： subdomain.ssl-certificate-host.com

• If the certificate is meant to be a wildcard certificate, the domain should start with an asterisk. Example: *.ssl-certificate-host.com

  如果该证书是通配符证书，则域应以星号开头。 示例： *.ssl-certificate-host.com

For the purposes of this guide, the assumption will be made that you are getting the certificate for something like <example-domain&gt;.com .

就本指南而言，将假定您正在获得类似<example-domain&g t; .com之类的证书。

Once you’ve run the command, you should have a .csr and .key file in your working directory. Open the .csr file, and copy the contents in it. It should have the header ----- BEGIN CERTIFICATE REQUEST -----.

运行命令后，工作目录中应该有一个.csr和.key文件。 打开.csr文件，然后复制其中的内容。 它应该具有标题----- BEGIN CERTIFICATE REQUEST ----- 。

Paste the contents of the file into the Enter CSR field. The page will automatically fill out the domain field on the form based on the information in the CSR.

将文件内容粘贴到“ Enter CSR字段中。 该页面将根据CSR中的信息自动填写表单上的域字段。

Once you click ‘Next’, you should see the following page:

单击“下一步”后，您将看到以下页面：

Check that the information is correct, and then click ‘Next’ again to go to the ‘Confirm you own the domain’ step.

检查信息是否正确，然后再次单击“下一步”转到“确认您拥有域”步骤。

步骤3：确认您拥有网域 (Step 3: Confirm you own the domain)

There are a few different options that are available to you in order to do this:

为此，您可以使用几种不同的选项：

• Email
  电子邮件
• HTTP-based
  基于HTTP
• DNS-based
  基于DNS

I personally have had issues validating through email, so for the purposes of this guide, select ‘DNS-based’. This requires you to set up a CNAME value in your domain’s DNS settings, which we will cover later on in this guide.

我个人在通过电子邮件进行验证时遇到了问题，因此出于本指南的目的，请选择“基于DNS”。 这要求您在域的DNS设置中设置CNAME值，我们将在本指南的后面部分介绍。

For now, click ‘Next’ after selecting ‘DNS-based’, but if you change your mind about this form of validation later on, it’s possible to change it.

现在，选择“基于DNS”后单击“下一步”，但是如果您以后改变对这种形式的验证的想法，则可以进行更改。

步骤4：指定谁将收到SSL文件 (Step 4: Specify who will receive the SSL file)

Confirm that the email in the field is correct. This is the email that will receive the certificate once it’s been activated.

确认字段中的电子邮件是正确的。 这是一封将在激活证书后接收证书的电子邮件。

步骤5：审查并提交 (Step 5: Review and Submit)

Confirm the information shown is correct, and then click ‘Submit’.

确认显示的信息正确，然后单击“提交”。

第6步：设置CNAME记录以验证域的所有权 (Step 6: Set up the CNAME record for validating ownership of the domain)

Once you submit the form, you will be redirected to a page showing the SSL certificate details with a helpful notification window that looks like the following:

提交表单后，您将被重定向到显示SSL证书详细信息的页面，并带有一个如下所示的有用通知窗口：

Click on the link for the DNS-based DCV method. You’ll be brought to a page that shows information that you entered earlier, such as:

单击基于DNS的DCV方法的链接。 您将被带到一个页面，该页面显示您先前输入的信息，例如：

• The domain name
  域名
• The type of web server that will have the certificate installed (should be Apache, Nginx, cPanel, or other)
  将安装证书的Web服务器的类型(应为Apache，Nginx，cPanel或其他)
• DCV Methods In Use
  DCV使用方法

Access the dropdown options for the ‘Edit Methods’ button to the right of ‘DCV Methods in Use’ in order to access and click the ‘Get Record’ option.

访问“正在使用的DCV方法”右侧的“编辑方法”按钮的下拉选项，以访问并单击“获取记录”选项。

A popover will appear showing the CNAME record you need to set up in order to confirm ownership of the domain. Copy these values to an empty text file as you’ll need to go to the ‘Advanced DNS’ page for your domain. This is accessible through ‘Dashboard’ or ‘Domain List’ > ‘Manage’ (besides your domain in the list) > ‘Advanced DNS’.

将显示一个弹出窗口，显示您需要设置的CNAME记录，以确认域的所有权。 将这些值复制到一个空的文本文件中，因为您需要转到域的“高级DNS”页面。 可通过“仪表板”或“域列表”>“管理”(列表中的域除外)>“高级DNS”进行访问。

Under the ‘Host Records’ section:

在“主机记录”部分下：

• Click ‘Add New Record’
  点击“添加新记录”
• Select ‘CNAME Record’.
  选择“ CNAME记录”。
• Paste the values that you copied earlier from the ‘Get Record’ popover into the corresponding fields.
  将您先前从“获取记录”弹出窗口中复制的值粘贴到相应的字段中。

Before you save those values though, there’s a bit of a ‘gotcha’.

不过，在保存这些值之前，有一些“陷阱”。

As Namecheap points out in their documentation, they “add the domain name automatically to the values submitted during record creation”. This means that the domain name that appears in the ‘host’ value is a duplicated value. Remove <your-custom-domain&gt;.com at the end of the ‘host’ value and you’ll be good to go.

正如Namecheap在其文档中指出的那样，他们“将域名自动添加到创建记录期间提交的值中”。 这意味着出现在“主机”值中的域名是重复的值。 删除“主机”值末尾的<your-custom-domain&g t; .com，您将可以正常使用。

After you save that record, it’ll take a bit of time before the certificate is issued. Once you receive the certificate in your email, proceed to step 8. If you haven’t already though, let’s set up the additional records needed in order to send people to <your-username>.gitlab.io/<your-project> when they enter <your-custom-domain>.com.

保存该记录后，将需要一些时间才能颁发证书。 在您的电子邮件中收到证书后，请继续执行步骤8。如果还没有，请设置所需的其他记录，以便将人员发送到<your-username>.gitlab.io/<your >当they enter <your-cus tom-domain> .com时。

步骤7：在Namecheap中设置主机记录 (Step 7: Set up your host records in Namecheap)

As outlined in GitLab’s docs, you’ll also need to prove on GitLab’s end of things that you own the custom domain that you want to serve your GitLab Pages site on.

正如GitLab的文档中概述的那样，您还需要在GitLab的最后证明您拥有要在其上提供GitLab Pages网站的自定义域。

As mentioned earlier, this guide assumes that you are just looking to use example.com (or www.example.com), so you’ll want to add the following host records:

如前所述，本指南假定您只是在使用example.com (或www.example.com )，因此您需要添加以下主机记录：

• Type A Record, Host @, Value 35.185.44.232 (this is the current GitLab Pages IP at the time of writing)

  键入A Record ，Host @ ，值35.185.44.232 (这是35.185.44.232本文时的当前GitLab页面IP)

• Type CNAME Record, Host www , Value example.com (this ensures that people who enter the 'www’ subdomain (i.e: www.example.com) still reach your site)

  输入CNAME Record ，Host www ，value example.com (这可以确保进入“ www”子域(即www.example.com )的人仍然可以访问您的网站)

• Note: You won’t be able to enter this one until you’ve added the domain through the ‘New Pages Domain’ flow outlined in Step 8. Type TXT Record, Host @ , Value gitlab-pages-verification-code=11112222aaaabbbb

  注意：在通过步骤8中概述的“新建页面域”流程添加域之前，您将无法输入该域。键入TXT Record ，Host @ ，值gitlab-pages-verification-code=11112222aaaabbbb

步骤8：在GitLab中安装证书 (Step 8: Install the certificate in GitLab)

Head on over to the ‘Pages’ page of your GitLab project that you’re trying to set up (under ‘Settings’ > ‘Pages’ in the sidebar).

转到您要设置的GitLab项目的“页面”页面(在侧栏中的“设置”>“页面”下)。

To add your custom domain that GitLab serves your Pages site on, click on the ‘New Domain’ button on the top right. You should see something like the following:

要添加供GitLab服务于您的Pages网站的自定义域，请单击右上角的“新域”按钮。 您应该看到类似以下内容：

Enter your custom domain (example.com) in the domain field, and then the next part is where it gets interesting.

在domain字段中输入您的自定义域( example.com )，然后下一部分将变得有趣。

If you try just to enter your certificate (example_com.crt) and your private key (generated when you initially sent the certificate request) in the fields, you’ll likely get a ‘Certificate is missing intermediates’ error.

如果您仅尝试在字段中输入证书( example_com.crt )和私钥(最初发送证书请求时生成)，则可能会收到“证书缺少中间件”错误。

This is because GitLab is using something like NGINX to receive requests on it’s Pages IP before routing the request to the correct site. Namecheap, in their documentation, calls out that “it is required to combine your certificate with CA certificates in a single file”.

这是因为GitLab在将请求路由到正确的站点之前使用了类似NGINX的页面IP来接收请求。 Namecheap在其文档中指出：“需要将证书和CA证书合并到一个文件中”。

What this means for you is that you need to combine the text found in your example_com.crt and example_com.ca-bundle files in the ‘certificate field’. In the end you should have something like:

这对您来说意味着您需要将“证书字段”中的example_com.crt和example_com.ca-bundle文件中找到的文本进行合并。 最后，您应该具有以下内容：

Add the private key to the last field, and you’re done. It will take time for the changes to propagate. If you check back in a few hours, you should see an indication beside your address in the URL bar showing that your connection to your site is now secure.

将私钥添加到最后一个字段，即可完成。 更改要花费一些时间。 如果您在几个小时后再检查一次，您应该在URL栏中的地址旁边看到一个指示，表明您与站点的连接现在已安全。

资源/参考 (Resources/References)

• https://about.gitlab.com/features/pages/

  https://about.gitlab.com/features/pages/

• https://docs.gitlab.com/ee/user/project/pages/getting_started_part_three.html#dns-txt-record

  https://docs.gitlab.com/ee/user/project/pages/getting_started_pa​​rt_three.html#dns-txt-record

• https://www.namecheap.com/support/knowledgebase/article.aspx/9474/69/how-do-i-create-a-pem-file-from-the-certificates-i-received-from-you

  https://www.namecheap.com/support/knowledgebase/article.aspx/9474/69/how-do-i-create-a-pem-file-from-the-certificates-i-received-from-you

• https://www.namecheap.com/support/knowledgebase/article.aspx/9637/68/how-can-i-complete-the-domain-control-validation-dcv-for-my-SSL-certificate#dns

  https://www.namecheap.com/support/knowledgebase/article.aspx/9637/68/how-can-i-complete-the-domain-control-validation-dcv-for-my-SSL-certificate#dns

• https://stackoverflow.com/a/49124195/2719852

  https://stackoverflow.com/a/49124195/2719852

翻译自: https://www.freecodecamp.org/news/how-to-add-an-ssl-certificate-and-custom-namecheap-domain-to-a-gitlab-pages-site-323f8f3ce642/

namecheap ssr