ジャバ・ザ・ハットリ

ベルリンのITスタートアップで働くソフトウェアエンジニア

Gatsbyブログを無料で帯域無制限のGitLab Pagesに移したらいいことしかなかった

2020-03-05ブログ

GitLab Pagesは無料でしかも帯域利用枠が無制限という太っ腹の仕様。このブログは以前まではNetlifyで運営していた。Netlifyは素晴らしいサービスだったんだけど、帯域利用枠とビルド時間がやけに食うGatsbyにはGitLab Pagesの方があっている。

ブログをGitLab Pagesに移したらいいことしかなかった。

image

NetlifyとGatsbyの相性は悪い?

Netlifyの素晴らしさに触れてからなんでもプロジェクトをNetlifyに入れていた。今でもNetlifyは大のお気に入りだ。でもある時にふと「Gatsbyにはあんまり相性がよくないのでは?」と思うようになった。なぜならGatsbyはその特性上、コンテンツの内容を変更してデプロイするとビルドがいる。Netlifyの無料プランにはこのビルド時間が月に300分でそれを超えたら、有料で買う必要がある。

ずっとお世話になってるNetlifyだしまーいいかと思ってたけど、他のプロジェクトに比べてGatsbyのビルド時間の食い方は桁違いだ。

例えばこのブログは300記事ぐらいあって、1回のビルドが13分ぐらいかかっている。以前、ビルドの設定にバグがあって「あれ?おかしいぞ」となっていろいろ修正しながらstagingで何回か修正を確認してたらカンタンにビルド時間の上限に達した。単純計算で1ヶ月に無料枠内でかけられる変更回数は20回ちょっとになる。

stagingで確かめてから本番を更新、ってやると倍かかるし月の更新数は10回ぐらい。「あっ誤字があった」ってなって変更かけるごとにドンドン減っていく。

しかも13分というのは平均ビルド時間で、タイミングによってはそれ以上の時もあった。Netlifyのビルド時間は最大で15分までになっていて15分を超えたらタイムアウトで強制終了されてしまう。これでなんどかデプロイが失敗していた。

他のCIツールを使ってそこでビルドしておいて結果だけをNetlifyに投げるって方法もあるらしいけど、「ただのデプロイでユーザーにとっては大してメリット無いのにそこまでやるか?」というのが感想だった。

image

ビルド以外にも帯域の無料枠は100G/月になっている。プロジェクトを何個も入れると100Gってわりとすぐに埋まってしまう。

そこであるGitLab Pagesの投稿をみて「これだ!」と思った。

無料で帯域利用無制限のGitLab Pages

What are the restrictions for GitLab Pages sites?

意訳

[質問] 無料のGitLab Pages に帯域利用制限はあるの?

[回答] Greg - GitLabのスタッフ

GitLab Pagesに帯域利用の制限はありません。すごい巨大なトラフィックを消費してよほどの問題になったら個別にお話させてもらいます。

Greg氏の発言を信じてGitLab Pagesに賭けてみることにした。

だいたいネット上のうまい話には必ずなにか欠点があるのが常なので少しづつ作業を進めてどこかで良くないことがあるだろうなー、と思いながら進めた。でもそのイヤなことは無かった。つまり今、見ていただいているこのブログは帯域無料で運営されてます。なんぼバズってもどんだけトラフィックか来ても無料です。そして爆速。静的サイトだから落ちない。

ビルド時間(=パイプライン時間)は2000分/月。ほとんどビルド時間を気にすることもなくなった。

GitLab PagesにGatsbyを入れる際に気をつけること

基本はこのページに書いてる通りなんだけど、それだけじゃあちょっと不親切なので気をつけるところだけ書く。

Deploying to GitLab Pages

nodeのバージョン

.gitlab-ci.ymlのnodeは場合によってはバージョン指定した方がいい

このブログで使ってるGatsbyスターターキットはNodeのバージョンが10か8でないと動かない。なので.gitlab-ci.ymlが

image: node:latest

では動かないのでバージョンを指定した。 これが厄介なのが失敗した際にエラーメッセージにNodeのバージョンがおかしいですよ、って出てこないからいろいろと「あれ?なんでだ?」って調べないといけなかったし無駄にハマった。

Pages のアクセス権をEveryoneに

最初は試験的にGitLab Pagesを使ってみる予定だったのでアクセス権をOnly Projecy Membersにしていた。するとSSLの設定やらがまったくうまくいかなかった。たぶんこれが原因だったんだと思う。

アクセス権をEveryoneにしてからSSL設定をした方がいいです。

設定場所は Setting > General > Visibility, project features, permissions

image

SSLが有効化されない場合は削除して再設定

SSLは無料のLet’s Encryptを使っている。これはNetlifyも同じで、NetlifyでもSSLの設定が最初は効かなかったりする。証明書が発行されてもワイルドカードがついていなかったり、とかがある。これはLet’s Encryptにリクエストして返ってくるタイミングや状況によってシステム側では制御できない要素があるからだろう。

Netlifyの公式ドキュメントに書いてある解決の方法は「うまくいくまでRenewalボタンを押し続けてください」ということだった。

なんじゃそのローテクな解決の仕方は?と思ったが、実際にやってみると5,6回で正しい証明書が発行される。

ところがGitLab PagesにはこのRenewalボタンが無い。もしSSLが発行されなければ、一旦ドメインを削除してもう一度入れ直してみてください、ということだった。

面倒だがこれしかない。それで10回ぐらいやったらできた。

image

Cloudflare(無料)は必須

Netlifyにあったようなイメージの圧縮などの機能はGitLab Pagesには無い。なのでそこはCloudflare(無料)は必須になる。とはいってもそんなに難しくないんだけど、とにかくCloudflare入れたら Google PageSpeed Insights のランクもこれぐらいになる。

image

まとめ

それなりの設定は必要だけど、帯域利用無制限とビルド時間2000分のためならまーまー見合っているはず。やっぱり爆速ブログが無料で運営できるっていい。

人気ブログをWordpressで運営してAWSにすごい料金を払いながらサーバーが落ちる心配をしている方に、サーバー落ちない無料の爆速Gatsbyへの乗り換えをオススメしたい。まーそのためにはそもそもこのブログがもっと人気グログにならないとなーと思っているところ。

関連記事


海外移住のQ&Aサイト シティーズ


海外移住向けのQ&Aサイトを運営しています。現在、海外にお住まいの方、これから海外移住や留学、転職をお考えの方はぜひご参加ください。 登録はもちろん無料です。

シティーズ https://www.cityz.jp/


cityz



  • © copyright jabba.cloud 2020