低コストかつ簡単な方法でWebページを作成・更新をできるようにしてみた

低コストかつ簡単な方法でWebページを作成・更新をできるようにしてみた:

自分の成果物は大体QiitaかGithubに登録しているのですが、一覧性が悪かったり、デモを作成した際にQiitaからのリンクしか辿る道がないので、なんとか簡単にまとめられるサイトって作れないかな、と思ってました。

モチベーション

1. 今までの成果物を一覧で観れるページが作りたい
2. できるだけ簡単に作りたい
3. 更新も簡単に行いたい
4. 更新の環境はどのPC（端末）からでもできるようにしたい
5. これらをできるだけ格安に（ここ重要）

別に商用のページを作りたいわけではないので、静的なページでとりあえずリンク集みたいなものにできればいいわけです。

結果、こんなページができてます。

https://kojiisd.tk

構築までの流れ

色々と見てみると、ざっくりと以下のような流れで構築できそうです

1. 無料ドメインを取得する
2. AWS側でDNSの設定などをする
3. DNS設定したアドレスに対してS3の静的ホスティングを利用してコンテンツを結びつける
4. WordPressで作成したページを静的ページに変換する

やっぱりページの作成自体はWordPressが一番早そうですね。

無料ドメインの取得とAWS側のDNS設定

クラメソさんが出してくれている記事を参考にします。

無料ドメイン(.tk)とRoute53を利用して0円でHTTPS環境を設定してみた

特に問題なく、無料ドメインの取得と設定ができました。（HTTPS環境）実はこれで流れのNo.3まで完了しています。

WordPressで作成したページを静的ページに変換する

編集はWordPressでできれば一番簡単なのですが、WordPressのためにサーバを立てるとそれだけで（大したアクセス数もないのに）コストがかかってしまいます。ここはやはり

1. 作成・編集はWordPressでできるようにする
2. 静的ページとしてAmazon S3にアップロードして公開する

という手順が踏みたいものです。

プラグインで編集を可能にする（StaticPress）

StaticPressを利用すれば、WordPressで作成したページを静的ページに変換してくれるようなので、これを利用します。（インストール手順などは省きます）

ちなみに今回ドメインを取得して（無料ドメイン「.tk」）、Amazon Route53でドメイン設定をするようにしています。こちらのページを参考しました。

無料ドメイン(.tk)とRoute53を利用して0円でHTTPS環境を設定してみた

EC2でWordPress付きのEC2インスタンスを立てる

「WordPress Certified by Bitnami」なんていうWordPressをすでにインストール済みのEC2インスタンスがインスタンス料金以外無料で利用できるので、これを使います。

Webページを作成する

こんな感じのをさくっとWordPress@EC2インスタンスで作成します。

作成したページをStaticPressで静的ページに変換し、S3にアップロードする

今回はコメント機能や問い合わせなど、動的な動きはページに作り込まないので、StaticPressプラグインとStaticPress S3プラグインをインストールして設定を済ませます。

これでアップロードができるようになりました。StaticPressを実行後、実際にアップロードされているかS3を確認に行くと、

うまくアップロードされたようです。

サイト更新時の注意点

1点注意しないといけないことは、メディアファイルなどをアップロードした場合、そのアップロード先にIPアドレスが含まれてしまうことがあります。これはそのままアップロードすると、マシンを止めた途端にアクセス不可になってしまうので対処が必要です。

大きく2点、インスタンスを停止、起動した場合にはMySQLに格納されているデータの一部を変更する必要Ga出てきます。（これを忘れるとメディアファイルなどが見えなくなる）

1. wp_optionsに含まれるテーマカスタマイズ後のHTMLコード
2. wp_postsテーブルの固定ページtype='page'のコンテンツにIPアドレスが含まれている

そのため、停止／起動した際には、MySQLで以下のようなSQLを発行し、IPアドレスを変更してあげる必要があります。（やることは単純なので、起動スクリプトとしてしゅっと組んでおいて設定するのはありかもしれません）

update wp_posts set guid=REPLACE(guid, 'http://＜旧IPアドレス＞/', 'http://＜新IPアドレス＞/') where post_type='page'; 
 
update wp_options set option_value=REPLACE(option_value, 'http://＜旧IPアドレス＞', 'http://＜新IPアドレス＞') where option_value like ('%＜旧IPアドレス＞%'); 

まとめ

必要な時にEC2インスタンスを起動して編集後S3にアップロードをするだけなので、これでほぼ無料でサイトの更新ができるようになりました。少し手順が多いですが、自動化できるところが多いので、もう少し頑張れば、たまのかからない、かつ簡単にどこからでも更新ができるWebサイト更新の仕組みができそうです。

おまけ

低コストを狙うならElastic IPの利用は避けたいものですが、EC2インスタンスを起動するたびにいちいちAWSコンソールに入るのも面倒なので、こんな感じで手抜きをしています。

起動／停止コマンド

$ aws ec2 start-instances --instance-ids <InstanceID> 
$ aws ec2 stop-instances --instance-ids <InstanceID> 

IDを記録しておけばいつでも起動と停止はできます。

IPアドレス取得

$ aws ec2 describe-instances --instance-ids <InstanceID>| jq '.Reservations[].Instances[].PublicIpAddress' 

起動後に上記でPublic IPを表示できます。