GitLab Pagesことはじめ

GitLab Pagesを使ってGatsbyのデモサイトをデプロイしてみようと思います。
なお、このポストはすでにGitHubは利用している前提で書いてあります。

なぜGitLab? - 帯域利用無制限だから

私は普段GitHubを用いて開発を行っています。
個人で開発したWebアプリをデプロイする場合、大抵はNetlifyかVercelにデプロイしています。

NetlifyとVercelはいずれもフリープランで利用していますが、問題なく運用できています。どちらのサービスもDeveloperフレンドリーだし、大きな不満は特にありません。
というか、無料でここまでやれるというのは正直素晴らしすぎると思っています

では、なぜGitLabをわざわざ選ぶのかというと、GitLab PagesにはNetlifyやVercelの無料プランにはあるbandwidthの制限がないからです。

下記のForumにもあるように、GitLab Pagesにはフリープランでさえ、BandWidthの制限がありません(帯域利用無制限)
GitLab Forum - What are the restrictions for GitLab Pages sites?

一応GitLabの中の人のコメントを翻訳して載せておくと、このようなコメントをしています。

ページサイトの最大帯域幅は設定していません。何らかの理由で問題が発生した場合は、その旨をお知らせします。

Netlifyでは有料アカウントでも帯域利用無制限状態にはなりません。
(それでも上限は高いですが)
また、Vercelの場合、有料アカウントになると無制限になるのかは、Pricingからは読み取れませんでした。
Netlify - Pricing
Vercel - Pricing

いずれにせよ、GitLabの帯域利用無制限というのはかなりありがたい内容かと思います。
(帯域利用に制限がかかる事態というのは、それなりに大規模にならなければ遭遇しないこともかもしれませんが、たくさんのユーザを抱えるアプリやWebサイトを作っていきたいと考えている、私含む個人開発者の皆さんにとっては、これはとても大きいことかと思います。おまけに毎月の固定支出もないわけですから)

ちなみにGitLabのアカウントによってできることできないことの一覧はこちら。気になる方は参考までに。
GitLab.com | 機能比較

GitLabのビルド時間の無料枠

GitLabでのビルド時間の無料枠は400分となっています。
以前は2000分あったという記述も他のブログでは見たりしましたが、短縮されたのかもしれません。

Netlifyだと無料枠は 300分、Vercelは特に明記されていないようでした。
(特にそういう項目自体がない？？)

GitLabでアカウントを作成する

アカウント作成はおそらく様々な箇所からできると思いますが、私の場合は下記のPricingページからFreeの項目を選択してスタートしました。

GitLab Pricing

アカウント作成時点でGitHubとは異なる箇所があったので、いくつかメモがてら残しておきます。

GitLab SaaSを利用する

GitLabではアカウント作成時点で、SaaSを利用するか、GitLabを自身で管理しているインフラにインストールするかを選択できます。

今回はSaaSを利用します。

Roleを尋ねられましたが、主に個人開発用途で使うので Software Developer と Just me を選択。

この後グループを作成する画面になりますが、今回の目的(GitLab Pagesを試す)からは関係のない項目であると思いますし、その場でよく分からなかったので適当にやりました。

QiitaにGitLabのグループに関する記事があったので、こちらを変わりに貼らせていただきます。
【GitLab】グループを作成する（リポジトリをグループで管理する）

これで、ひとまずアカウント作成は完了しました。

GitLab Pagesでデモサイトをデプロイしてみる。

ちなみに簡単なデモサイトをデプロイしてみた備忘録をこちらに書こうと思いましたが、GitLab公式、かつ日本語でGitLab PagesのGetting Started的な記事があったので、以降はこちらの記事を参照してみるのが良いかと思います。

GitLab Pagesで静的ウェブサイトを公開する方法

と、ここで書くのをやめようかと思っていましたが、
せっかくなので、上に書かれている手順を参考にデモサイトのデプロイまでを行ってみます。

デプロイする際に利用できるテンプレートが用意されているのは、ちょっと試してみたいときに便利ですね。
(下のキャプチャ参照)

しかもテンプレートの種類も豊富。Previewを押すことでテンプレートの内容も確認することができます。
(下のキャプチャ参照)

今回は Pages/Gatsby を選択してみました。
これでプロジェクトが作成されます。作成したプロジェクトはgit cloneコマンドでローカルに引っ張ってくることも勿論可能です。

余談: GatsbyテンプレートのNode.jsのversion

ちなみに余談ですが、作成したプロジェクトには後述するパイプラインの設定を記述した.gitlab-ci.ymlというファイルがあります。ここにはジョブ実行時に使用するDocker imageなどが記述されていますが、Gatsbyのtemplateではここに記載されたNode.jsのversionが6.10.0でした。
(2020.12.3時点)

GatsbyはスターターによってはNode.jsのversionが新しすぎると動かなかったりしますが、6.10.0というのはなかなかオールドですね。
ローカルで一度デフォルトで試して見る際は、nvmなどを使ってversionを合わせることお忘れなく。
(Node.jsのv12で動かそうとしたらエラーになったので、今回は試しということもあり、素直に同じバージョンをnvm経由でインストールして動かしてみることにしました。)

下記が実際に作成される .gitlab-ci.yml。

image: node:6.10.0

pages:
  script:
  - npm install
  - npm install gatsby-cli
  - node_modules/.bin/gatsby build --prefix-paths
  artifacts:
    paths:
    - public
  cache:
    paths:
      - node_modules
  only:
  - master

• image - ジョブ実行時に利用されるDocker Image
• pages - ジョブの名前。GitLab Pagesで公開する場合は、ジョブの名前がpagesでないといけない。
• script - ジョブで実行するスクリプトを指定。今回の場合、gatsbyでのデプロイに必要なbuildコマンドなどが記述されている。
• artifacts.paths - ジョブの成果物を指定。GitLab Pagesで公開する場合は、ここの名称が publicでないとならない。
• cache - キャッシュしたいファイル、またはパスなど。
• only - ジョブを実行するブランチを指定している。この場合、masterブランチにプッシュされた場合のみ、ジョブが実行される。

なお、.gitlab-ci.ymlの内容については、上に貼った公式ポストを参照している他、下記の公式リファレンスも参考にしています。

GitLab CI/CD pipeline configuration reference

GitLab Pagesへのデプロイ

さて、GitLab Pagesにデプロイを行うには、GitLabでのCI/CDの別名であるパイプラインという機能を動かす必要がありますが、プロジェクトを作成しただけでは動かないため、手動で実行を行う必要があります。

パイプラインを手動で動かす場合は、プロジェクトの右メニューからCI/CD ⇛ Pipelinesを選択し、

遷移先の画面からRun Pipelineという緑色のボタンを押します。
なお、自身のブラウザのセッティングが英語であるため、人によって文言は異なります。
また、GitLabの今後の更新内容によってはUIなどは変わってくると思われます。
Run Pipelineを押すと、実行対象のブランチなどを選択する画面が表示されます。
このタイミングでデプロイ時の変数なども設定できるようです。
Run Pipelineを押すとデプロイが行われます。

デプロイしようと思ったら、Failedになった。。。

これでデプロイも完了かと思いきや、エラーになりました。

> gatsby-cli@2.15.0 postinstall /builds/<username>/<repo name>/node_modules/gatsby-cli
> node scripts/postinstall.js
/builds/<username>/<repo name>/node_modules/gatsby-cli/node_modules/chalk/source/index.js:106
	...styles,
	^^^
SyntaxError: Unexpected token ...
    at Object.exports.runInThisContext (vm.js:76:16)
    at Module._compile (module.js:542:28)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.require (module.js:497:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (/builds/<username>/<repo name>/node_modules/gatsby-cli/scripts/postinstall.js:1:77)
    at Module._compile (module.js:570:32)

どうやら初めから記述されている .gitlab-ci.yml の内容ではエラーになるようで、
実際に.ymlファイルに書かれている記述でビルドを試みるとローカルでも同様のエラーがでました。

yarnを使ったやり方の場合、エラーは出なかったので、下記のように.gitlab-ci.ymlを書き換えました。
(本当はnodeのversionをもう少し新しくするなど修正箇所はあるかもしれませんが、今回は動作確認のみの用途なので、このような対応としています)

diff --git a/.gitlab-ci.yml b/.gitlab-ci.yml
index 6e3bb40..0cf6ec1 100644
--- a/.gitlab-ci.yml
+++ b/.gitlab-ci.yml
@@ -2,8 +2,8 @@ image: node:6.10.0

 pages:
   script:
-  - npm install -g yarn
-  - yarn install
+  - npm install yarn
+  - node_modules/.bin/yarn install
   - node_modules/.bin/gatsby build --prefix-paths
   artifacts:
     paths:

Pipelineのjobが無事に終わると、GitLabの設定メニュー内にあるPagesからデプロイされたページのリンクを確認できるので、そちらにアクセスすればページ内容が確認できます。

最後に

GitLab Pages、かなり使えそうな感触があるので、機会を見つけて使っていこうと思います。

また、独自ドメインの設定なども書ければと思っていますが、それはまた実際に設定する機会が来たときにでも追記していこうと考えています。