GitLab Pages で独自ドメインの静的 Web サイトを HTTPS で公開する

当社のホームページはもともと WordPress で作成されたものを利用していましたが、静的サイトとして提供しても十分な内容であるため、脱・WordPressしました。 その際、これまで VPS 上の Web コンテンツを公開する方法から、「GitLab Pages」を利用する方法に変更しました。独自ドメインHTTPS を使った Web サイトが簡単に公開できたので、その方法をご紹介します。

GitLab Pages とは

※公式の説明はこちら → GitLab Pages | GitLab

ある Git リポジトリの master ブランチのビルド成果物を Web サイトとして公開する仕組みです。GitLab の CI/CD の機能を用いて静的 Web サイトを構築し、公開します。

GitLab 12.1 から、Web UI のみでカスタムドメイン用の Let's Encrypt の証明書発行ができるようになったため、HTTPS での Web サイトの公開が簡単になりました。

公開手順

準備:現行ページを html ファイルに書き出し

WinHTTrack を利用して、WordPress で作成したページを HTML に変換しました。 その後、WordPress 由来の CSSJavaScript、HTML ファイル内の記述で不要なものを削除したり、プラグインで実装していた申し込みフォームを置き換えるなどして静的 Web サイトとして完結させました。

GitLab に Web サイト用のリポジトリを用意し、必要なファイルを配置する

リポジトリのルートディレクトリに index.html と下記の内容の .gitlab-ci.yml を置いてコミットします。

pages:
stage: deploy
script:
- mkdir .public
- cp -r * .public
- mv .public public
artifacts:
  paths:
  - public
only:
 - master

CI が走り終わるのを待つ

Gitlab で CI が走るので、終わるまで待ちます。CI の状況は、GitLab のメニュー「CI/CD」から確認可能です。

f:id:linkode-okazaki:20191128192303p:plain

上のように「passed」となっていれば完了しています。

メニュー「Settings」の「Pages」に公開先 URL が記載されているので、Web サイトが無事に構築されていることを確認します。

CI/CD が走る都合上、コミット、プッシュをすれば即変更内容が反映されるわけではなく、多少の時間差があることを気をつけてください。

独自ドメインの設定と証明書の取得

今回は、HTTP でアクセスされた場合でも HTTPS の方へ飛ばしたいため、Pages のページにある「Force HTTPS (requires valid certificates) 」にチェックを入れておきます。

f:id:linkode-okazaki:20191128192315p:plain

独自ドメインを追加するため、同じページの「New Domain」よりドメインを追加します。

このとき、「Automatic certificate management using」にチェックを入れておくだけで、自動的に Let's Encrypt からサーバー証明書を取得してくれるようになります。もし、自力で取得したサーバー証明書を利用する場合は、このチェックを外し、証明証の pem ファイルの中身を登録します。 終わったら、「Create New Domain」を押して次に進みます。

f:id:linkode-okazaki:20191128192310p:plain

登録が終わると、ドメインの情報が表示されます。ここで表示されている CNAME レコードと TXT レコードを利用している DNS サーバに登録します。

f:id:linkode-okazaki:20191128192325p:plain

f:id:linkode-okazaki:20191128192358p:plain

登録を終えてしばらくしてから、「↺」を押して下記のようになれば、認証が完了し、独自ドメインでの Web サイトの公開が完了します。

f:id:linkode-okazaki:20191128192318p:plain

プライベートなリポジトリを作成した場合、Pages の公開範囲の設定がデフォルトでは「Only Project Member」となっていますので、Settings メニューの「Visibility, project features, permissions」で「Pages」を「Everyone」に変更します。

f:id:linkode-okazaki:20191128192322p:plain

しばらく後、Let's Encrypt からサーバー証明書を取得していることも確認できます。

静的 Web ページを公開するだけなのであれば、この方法で十分だと思います。3ヶ月に1回取得する必要がある Let's Encrypt の証明書も自動で取得してきてくれるのもありがたいですね。

参考資料