ファイティングEXレイヤーの攻略サイトをHugoとAWS S3 + CloudFrontで作りました
作ったんですけど、Googleとかで検索してもヒットしないので、自分のブログからリンクしてランクを上げたかっただけなんです。
でも本当にそれだけだと申し訳ないので、技術的な話も書いておきますね。
WikiもCMSも使わずにサイトを立てたい
最近のゲームの攻略サイトっていうと、だいたいWikiです。Wikiを立ててみんなでそれを更新する感じになります。ただ、僕がゲームをやってた時代には、まだWiki文化はなく、各自で攻略サイトを作って、掲示板とチャットで議論する感じでした。キリ番を踏んだ人はカキコお願いしますの時代です。
そんなわけで今回の攻略サイトも、Wikiではなく、かと言ってブログでもなく、いわゆるドキュメントサイトの形式で提供しようと思いました。ITエンジニアっぽくSpeaker DeckとかGoogle Sidesに攻略のプレゼンを上げても良いんですけど、網羅的な情報は、やっぱりドキュメントの形式ですよね。
あと、たかだか攻略サイトのためにEC2のインスタンスを立ててWebサーバやCMSを立てるのもお金がもったいないので、S3にHTMLを置いてアクセスさせれば十分かなと思いました。ただHTMLを置くとは言え、HTMLのタグ打ちは面倒だからMarkdownで書きたいです。
そんなことを考えながらググってたら、「静的サイトジェネレーター」という分野に行き当たりました。
静的サイトジェネレーターの中からHugoを選んだ理由
静的サイトジェネレーターとは、Markdown形式のテキストに、テンプレートやら何やらを適用して、HTMLやCSS、JavaScriptなんかを生成するツールです。企業や製品のサイト構築、ブログ、ドキュメントなどを作るために使えます。有名どころは、jekyll、hugo、hexo、gatsbyあたりで、中でもjekyllはGitHub Pagesが使ってるとか。
難点は動的コンテンツを入れられないことで、たとえばコメントをもらったりしづらいわけですが、それも、外部サービスと連携してコメントを受け付けられるようにできたりもします。時代は進んでる。俺たちは進んでいるのか？（問いかけ）
そんな静的サイトジェネレーターの中で、今回選んだのはHugoでした。選んだ理由は名前がスト3に出てくるキャラと同じだし、セットアップが一番簡単だったからです。Hugoはgoで実装されていて、セットアップなしでシングルバイナリを実行するだけで使えます。pythonとかnpmとかのセットアップをしなくて良いのは僕も楽ですし、今回はエンジニアでないゲーマーにも記事を書いてもらいたかったので、なおさらセットアップが簡単なことは重要でした。そういう用途のツールはGoで作られてると良いですね。
ほとんどの静的サイトジェネレーターはテーマ（日本だとテンプレートって呼んだほうが伝わりやすい？）がたくさん用意されていて、Hugoも例に漏れずたくさんあります（https://themes.gohugo.io/）
この中で一番ドキュメントっぽい雰囲気のdocdock（https://themes.gohugo.io/docdock/）を選びました。
Hugoの使い方を簡単に説明すると、markdownをワーッと書いておいて、プレビューするときは、
hugo server
これでPC上にサーバが立ち上がり、ブラウザからアクセスできるようになります。ちなみにdocdockは左側にメニューができるタイプのテーマで、そのメニューも自動で生成されます。えらい。
そして、公開するためにHTMLを生成するときは、
hugo
するだけで、publicというフォルダが作られてHTMLやら関連するリソースやらが置かれます。フォントファイルなどもできるので、Hello World程度でも8MBぐらいになります。スーパーマリオ200本分のサイズです。
AWS S3に置いて静的Webサイトホスティング
そうやってHugoで作った静的Webサイトを、クラウドに置きましょう。はい、↑の見出しにAWS S3って書いてるにも関わらず、Azureのサービスを登録しましたー。
https://twitter.com/cero_t/status/1062481542876868608
まずHugoで生成したファイル群をAzure Storageに置いて、Storageの静的Webサイトホスティングの機能を使うだけで、世の中に公開できました。やり方は、ググってください。
次に、独自ドメインを取ります。fexl.tokyoというドメインにしたかったので、お名前ドットコムで取得しました。やり方は、ググってください。
さらに、Azure DNSでfexl.tokyoを使うよう設定して、お名前ドットコム側ではAzureのDNSを使うよう設定します。やり方は、ググってください。
そしてここで気づいたんですが、「www.fexl.tokyo」のようなドメインであれば問題なくホスティングできるのですが「fexl.tokyo」といういわゆるZone ApexなドメインはAzure DNS + Azure Storageの静的Webサイトホスティング機能では使えないんです。AネームのエイリアスにAzure Storageを指定できないとかそういう類の理由で、そういえばAWSのRoute 53 + S3のホスティングも昔はそうだったよなと思い出しました。なのでAzureもいずれバージョンアップで対応すると思います。
ということでここでAzureに別れを告げ、AWSにホスティングすることにします。Route 53 + S3による静的Webサイトホスティングであれば、Zone Apexを使えるからです。
ということで、Hugoで生成したファイル群をS3に置いて、S3の静的Webサイトホスティング機能を有効にして、Route 53でfexl.tokyoを使うようにして、お名前ドットコムからRoute 53を見に行くようにして、そのやり方はもちろんググってください。
そんなわけで、fexl.tokyoのサイトをAWS上で運用できるようになりました。
HTTPが許されるのは平成までだよねー
ここまでの方法では、まだHTTPのアクセスになります。やっぱりこれからの時代はHTTPSが標準ですよね。攻略サイト程度でHTTPSが要るかどうかというと甚だ疑問ですが、HTTPSであらずんばWebにあらずぐらいの勢いでGoogleさんが煽ってくるので、HTTPS対応することにします。
SSL証明書は、AWS上で（たぶん無料で）取れます。ググるとすぐ分かります。
これをS3に適用・・・あれ、できない。そうなんです、S3による静的WebホスティングはHTTPS化できないんです。とは言えEC2を立ててWebサーバを立てるのもシャクなので、他の方法を探してみたところ、CloudFrontであればSSL化できることが分かりました。ググるとすぐ分かります。
CloudFrontは、何の設定をするにも15分ずつ掛かるあたりがちょっとストレスフルなのと、サイトをすぐに更新したい時には invalidation しなくてはいけなかったり、サブディレクトリの index.html を /sub/index.html ではなく /sub/ でアクセスできるようにしたいならOriginをS3のバケットにするんじゃなくて「(bucket名).s3-website-ap-northeast-1.amazonaws.com」みたいなpublicアクセスするほうのURLをOriginにしなくてはいけないあたりでハマりましたが、それらが分かるとなかなか可愛げのあるサービスです。
すみません、この辺は自分のためのメモなので、何を説明してるか分からなくても大丈夫です。そもそも半年後の自分ですら理解できるか危ういです。
ということで、fexl.tokyoのサイトをSSL化してAWSで運用し始めました。CloudFrontを使ってるので海外からのアクセスも早いと思います。コンテンツはぜんぶ日本語ですけどね、ガハハハハ。
Googleさんが振り向いてくれない
これでサイトの運用を始めたんですけどね、期待しているほどのアクセスがありません。なぜかって・・・ググっても見つからないから！
僕がこのサイトを立ち上げるために、どれだけGoogleさんにアクセスしたかはこのエントリーをここまで読んだ皆様ご承知のことと思いますが、それでもGoolgeさんは僕のことを見つけてくれないのです・・・（支離滅裂な発言）
Googleにインデックスされない件について調べてみると、Google Search Console（https://search.google.com/search-console/about）を使うと良いみたいな情報を見つけまして、確かにそれに登録してから36時間ほどで確かにインデックスされた感じになりました。でも全然、検索ではヒットしませんね。
ということで、単に自分のブログからfexl.tokyoへのリンクを張りたいがためにつらつらと書いた駄文に、最後までお付き合いいただきありがとうございます。ぜひ、その勢いで攻略サイトにアクセスし、あまつさえゲームまで買ってしまい、ツイッターで #FEXL のハッシュタグとともに「せろさんの影響で購入した」とツイートしていただければ、僕の株価もアゲアゲになること間違いなしかなと思いますので、どうぞよろしくお願いいたします。
