2019.01.30

VuePressのブログをカスタムドメイン+SSL対応させたGitLab Pagesにデプロイする

のびすけ

Node.js Magazine

こんにちは、最近スパにハマっているn0bisukeです。

今日はタイトル通りVuePressで作ったブログをGitLab Pagesに乗せてカスタムドメイン+SSL対応していきます。 2019年1月時点版です。UIなどはガンガン変わっていくと思いますので適宜読み替えましょう。

過去に書いたこの記事とは別のサイトの運用話です。

気持ち的にHugoブログもVuePressに移行したいと思っている感じですね。

GitLab Pagesの基本

GitLab PagesはGitLabで利用できる無料ホスティング環境です。

GitHub PagesのGitLab版って認識で大丈夫です。

GitLab Pagesでサイト公開の仕方

publicフォルダを作成します。

リポジトリのルートにpublicフォルダを作成して、その中にindex.htmlや関連するcssやjsファイルなどを入れていきます。基本的にはpublic/index.htmlがプロジェクトのトップページとして認識されます。

.gitlab-ci.ymlを作成します。

リポジトリのルート（publicフォルダと同じ階層）に.gitlab-ci.ymlを作成します。

pages:
  stage: deploy
  script:
  - echo 'Nothing to do...'
  artifacts:
    paths:
    - public
  only:
  - master

あとはGitLabのリポジトリにプッシュするだけです。この場合masterブランチにプッシュすると更新されます。

ファイル構成はイメージはこんな感じです。

.gitlab-ci.ymlがある状態でGitLabのリポジトリにプッシュするとCIが動いてごにょごにょやってくれます。

https://<ユーザー名>.gitlab.io/<リポジトリ名> にアクセス

https://<ユーザー名>.gitlab.io/<リポジトリ名>が公開URLです。

GitLabのリポジトリのURLがhttps://gitlab.com/<ユーザー名>/<リポジトリ名>となっているので適宜読み替えましょう。

例えば、リポジトリのURLがhttps://gitlab.com/n0bisuke/akihabaraだとしたら、公開用のGitLab PagesのURLはhttps://n0bisuke.gitlab.io/akihabaraになります。

プッシュしてから更新まで数分時間が掛かることがあるので少し経ってからまた確認してみましょう。

うまくいかない場合はhttps://gitlab.com/<ユーザー名>/<リポジトリ名>/-/jobsに行くとジョブの確認が出来るので、エラーなどを確認してみましょう。

VuePressをGitLab Pagesにデプロイ

先ほどの利用したGitLab CIを利用します。

VuePressはVue.jsの作者が作ったVue.js製の静的サイトジェネレータです。

公式のドキュメントに、VuePressをGitLab PagesとGitLab CIにデプロイする方法が載っていますが、個人的には以下の2ステップだけで問題ないと思います。

1. VuePressのconfig.jsの設定

docs/.vuepress/config.jsの中にbaseというキーがあります。ここにリポジトリ名をパスとして設定してあげます。

例えばhttps://gitlab.com/n0bisuke/hogehogeというリポジトリでhttps://n0bisuke.gitlab.io/hogehogeという公開URLになる場合は、baseの箇所を/hogehoge/にしましょう。

後述しますが、もし、この後の手順のカスタムドメインまでを設定するならばここのbaseは/の設定のままで大丈夫です。

2. `.gitlab-ci.yml`の記述

以下のyml記述だけで完了です。プッシュしてhttps://n0bisuke.gitlab.io/hogehoge(自分の環境に読み替え)などにアクセスして確認しましょう。

image: node:current-alpine

pages:
  cache:
    paths:
    - node_modules/
  before_script:
    - node -v
    - npm i
  script:
  - npm run docs:build
  - cp -pr docs/.vuepress/dist public
  artifacts:
    paths:
    - public
  only:
  - master

デフォルトのチュートリアル通りだとビルドのコマンドがnpm run docs:buildになっているはずなので、プッシュするとCI環境側でnpm run docs:buildでビルドして、ビルド後のdistフォルダをpublicフォルダにコピー、その後publicフォルダをGitLab Pagesとしてデプロイします。

公式ドキュメントにはビルド先のフォルダをdistではなくpublicにする設定などがありましたが、この記述でも問題ないです。

カスタムドメインの利用 & SSL対応

現状で、https://n0bisuke.gitlab.io/hogehogeというアドレスが公開URLになっているものをhttps://hogehoge.dotstud.ioでアクセスさせるようにしていきます。

Cloudflareを利用します。

Let’s Encryptを利用する手もあるのですが、更新の手間があるのと既にdotstud.ioでCloudflareを使ってDNSやSSL設定をしていたのでCloudflareを利用してのGitLab Pagesのカスタムドメイン&SSL対応を紹介します。

GitLab公式のSetting up GitLab Pages with CloudFlare Certificatesを見ながら試してみました。

DNSのAレコードをGitLab Pagesに向けることも出来るみたいですが、今回はCNAMEでサブドメインをリダイレクトさせる形にします。

1. 証明書の作成

CloudflareのCrypto画面を開きます。

Origin Certificatesの項目にあるCreate Certificate(証明書の作成)の青いボタンを押します。

モーダルウィンドウが開かれますが、List the hostnamesの箇所だけ変更して、利用したいドメイン名を記述して、NEXTボタンで進みましょう。

今回はhttps://hogehoge.dotstud.ioでアクセスしたいので、ここにはhogehoge.dotstud.ioなどのドメイン名だけを入力しておきます。

これで証明書の文字列が生成されます。 Ker formatはデフォルトのPEMのままで大丈夫です。

Origin certificate
Private key

この二種類の文字列をあとで使うのでコピーしておきましょう。

2. GitLab Pagesに設定する

GitLabのリポジトリ設定画面からPagesの設定画面に行きます。

https://gitlab.com/<ユーザー名>/<リポジトリ名>/pagesが設定画面です。

ここからNew Domainボタンを押してカスタムドメインの設定をします。

また、この際にForce domains with SSL certificates to use HTTPSのチェックがありますが、SSL対応させるのでデフォルトのままチェックしておきましょう。

Domainの項目に設定したいカスタムドメイン（今回はhogehoge.dotstud.io）を設定します。

以下の二箇所には先ほどのCloudflareで生成した証明書文字列を指定します。

Certificate (PEM): Origin certificateの文字列
Key (PEM): Private keyの文字列

----BEGIN CERTIFICATE----などの文字を含めて全部コピペしましょう。

ここにさらにCloudflareの証明書の文字列が必要になります。CloudFlare’s Origin CA — RSA Rootというらしいです。

以下の文字列(CloudFlare’s Origin CA)をコピーしましょう。

このCloudFlare's Origin CAをコピーしたら、先ほどCertificate (PEM)のフォームに入れ込んだ文字列の後ろに改行をいれて、CloudFlare's Origin CAを貼り付けます。

この画面のような感じです。

ここまで出来たら、ページ下部のCreate New Domainのボタンを押して進みましょう。

3. DNSの設定

無事に作成出来ると、以下のような確認画面になります。

この画面の指示にしたがってCloudflareのDNS設定画面でCNAMEとTXTレコードを設定してあげる必要があります。

CNAMEレコード設定

まずはCNAMEレコードです。以下のように設定します。

Type: CNAME
Name: 利用したいカスタムドメイン名
Value: <ユーザー名>.gitlab.io

例えばhttps://hogehoge.dotstud.ioにしたい場合はNameをhogehogeにし、元々のGitLabリポジトリがhttps://n0bisuke.gitlab.io/hogehogeなどであれば,Valueをn0bisuke.gitlab.ioにします。

これでhttps://hogehoge.dotstud.ioにアクセスした際にhttps://n0bisuke.gitlab.io側にリダイレクトされるようになります。

TXTレコード設定（所有者確認）

GitLab側から見るとhogehoge.dotstud.ioをそのユーザーが所有しているか分からないため、所有権の確認作業が発生します。

GitLabの設定画面にVerification statusの箇所に_gitlab-pages-verification-code.hogehoge.dotstud.io TXT gitlab-pages-verification-code=xxxxxxxxxxxxxxxxxxなどの文字列が表示されていることが分かります。この情報をCloudflareに登録してあげればOKです。

登録が出来たら、おそらく赤くなっているUnverifiedのボタンを押して確認しましょう。上手くいくとこんな感じでSuccessfully verifiedなどの文字が表示されます。

4. SSLの設定

CloudflareのCrypto画面からSSLの設定が出来ます。FullもしくはFull(strict)にしておきましょう。

あとは、ドメインが浸透したりするのを少し待ちましょう。

https://hogehoge.dotstud.ioにアクセするとhttps://n0bisuke.gitlab.io/hogehogeに内部的にリダイレクトされるようになりました。

5. VuePressの設定を戻す

先ほどの紹介で、VuePressをGitLab Pagesで公開する際にdocs/.vuepress/config.jsのbaseキーを/リポジトリ名/とする紹介がありましたが、カスタムドメインまでやった人はbaseキーを/に戻しておいてください。

ここの設定を間違えるとCSSやJSが上手く読み込まれなくなってしまいます。

まとめ

如何でしょう。GitLab Pagesや周辺ツール/サービスを活用して無料でカスタムドメイン+SSLのVuePressブログを作ることが出来ました。

この辺のことを試す際の参考になれば幸いです。