Zenn
Closed15

趣味用のWebサイトを作る

AWS
WordPress
Lightsail
momuramomura

概要

趣味で撮っている写真を公開したい。既存のサービスでも良いのだが、痒いところに手が届かないので自分の持っている知識で作れないかまずは考えてみる。

欲しいものと不要なもの

欲しいもの

  • 写真を気軽にアップロード・並べ替え・削除できる管理画面
  • PCでもスマホでもいい感じに見せられる
    • もっというとスマホで見たときにカラム数が1つにならない(ページが縦に長くなりすぎるのを防ぎたい)
  • アルバム機能があると嬉しい
  • 必要最低限のセキュリティ
    • サーバを立てるのであれば踏み台にされるなどの被害は防ぎたい
  • 無料または低価格
  • メンテナンスの容易さ

不要なもの

  • 可用性
    • 個人のサイトなので落ちても特に問題はない

使えそうなもの

  • WordPress
    • コードを書かずにポートフォリオサイト的なものを作るのには良さそう
  • AWS
    • EC2 or ECS or LightSail or Elastic Beanstalk
    • EC2, ECSは馴染み深いがメンテナンスや細かい設定が必要
    • LightSail, Elastic Beanstalkは触ったことがないがサクッとWordPress環境を作るのには良さそう
momuramomura

構成

WordPressで作るとして、構成を考えてみる

  1. EC2 + ALB
    a. DBをEC2内で同居させるかRDSにするかは要検討
  2. ECS + RDS + ALB
    a. これで作るとしたらFargate
  3. LightSail
    a. ALBは用意しなくて良さそう
    b. RDSも不要？
    c. 月$3.5~
  4. Elastic Beanstalk + ALB
    a. インスタンスとDBは作れそう
    b. ざっくり調べた感じだと今回の要件にはオーバースペックかも
momuramomura

ドメインを取得する

なるべくメンテナンスの手間を省きたいのでRoute 53で取得する。

どんなドメインが良いか？

  • 写真用途以外でも使う可能性がゼロではないので、汎用性がある
  • 趣味用途っぽい雰囲気を持ったドメインであること
  • whoisで個人情報が出てきて欲しくないので、プライバシー保護対象であること
    上記の条件で探した結果、.space が良さそうなので取得した。

参考

momuramomura

ドメイン登録後whoisで個人情報が表示されないことを確認。
https://registrar.amazon.com/whois?domain=登録したドメイン
連絡先として登録したメールアドレスに検証メールが届いているのでそちらも完了。

momuramomura

WordPressをLightSailで作成

公式ドキュメントのチュートリアルを参考にWordPress環境を作成してみる。

構築前に気になっている点

  • セキュリティ面
    • EC2やALBのようにIPアドレスによるアクセス制限ができるのか？
      • ドキュメント見た感じできそうではある
    • サイバー攻撃などに対する防御ができるか？WAFがつけられるか？
      • WAFあればより安心なので使えたら良いな

構築

ステップ1~2

  • インスタンス作成完了後にセキュリティ面を確認
    • NetworkingタブでIPv4 FireWallを確認
    • 22番ポートがAny IPv4 addressとなっているのでとりあえず閉じる
  • パブリックIPアドレスにアクセスするとテスト用のWordPressページが表示される

ステップ3

  • Set up your websiteからWebサイトの設定をする
    • サブドメインでレコードを作成
    • 固定IPもここで設定
    • 証明書の作成
      • ここで作成した場合Let's Encryptになるっぽい
      • Create certificateすると下記のエラー

        We encountered an error while configuring the Let's Encrypt SSL/TLS certificate on your instance xxxxxxxxxx in the xxxxxxxxxx Region. Try again later.
        Setup requires ports 22, 80, and 443 be open for protocol TCP. You may change them after completing setup.

        • さっき22番ポートを閉じたのがだめだったっぽい
        • 22番ポートを開けて再度証明書を作成したところ成功
    • 登録したサブドメインでサイトにHTTPSアクセス可能になった
      ここまでできたのでWordPressの中身などはまた今度。Lightsailは止めておく。

所感

  • ドメイン取得からサイトにHTTPSアクセス可能になるまで1時間かからなかった(中身はテスト用だが)。迅速にWordPress環境を立ち上げるのには良さそう。
  • セキュリティ面がやっぱり気になる。今後触りながら調べていく。
    • ドメイン直でIPに向いているのはセキュリティ的に心配。できれば間にロードバランサーか何か入れて直接サーバをさらさないようにしたい。WAFもつけられれば望ましい。
momuramomura

Route 53を見てみたところ、ホストゾーンの設定がまるっとLightsailに移動してしまった模様。
Lightsail以外でもドメインを使うかもしれないのでこれは困る…Lightsail側ではサブドメインで作ればよかった…
インスタンス削除でRoute53戻る？
新しくホストゾーン作れば解決？
また今度確認する。

momuramomura

Lightsailにロードバランサーをつける(WIP)

インスタンスが直接パブリックに公開されている状態のため、ロードバランサーをつける。

  • LightsailのNetworkingタブでCreate Loadbalancerがあるのでそこから作成。
    • 月額18USDかかる。
  • 作った後にインスタンスをアタッチしようとすると失敗
    • "Health Check: Failed"とあるのでヘルスチェックのパスを設定する
    • サーバに入ってドキュメントルート等確認したが200が返ってくるパスがなかなか見つからない…
    • 「Lightsail Wordpress ヘルスチェック」で検索、下記記事を参考に進めるが解消せず
momuramomura

Lightsailにロードバランサーをつける(WIP)

  • ALBアタッチより先にインスタンスをSSL化したのがまずかったかも？と思いインスタンスを作成し直し。
  • インスタンス作成後静的IPをアタッチ
  • ロードバランサー作成、アタッチ
    • デフォルト設定でヘルスチェック成功
  • ロードバランサー使うなら静的IPいらないので削除

ロードバランサーでSSL設定

  • カスタムドメインタブでドメインと証明書を設定
    • ワイルドカード証明書は作れなさそう
    • 証明書の検証がなかなか終わらない -> 数分後完了
    • 作成後アタッチする
  • ネットワークタブで80 -> 443へのリダイレクトを有効化
  • ドメインでHTTPS通信が可能になった

課題

  • Lightsailのファイアウォールでロードバランサーからの通信のみ許可したい
    • インスタンスのパブリックIPでアクセスできてしまう
    • Lightsailのファイアウォールではこの制御ができない
    • パスによるリダイレクト設定もロードバランサー側でできない
      • apache側でできるがめんどくさいのでやりたくない
  • ↑のようにセキュリティで心配な面があるのでFargateも検討
    • あまり料金が変わらなければそっちでもよいかなと思ったがFargateは最小スペックでも本日時点のレートで1,600円〜になってしまう(+ALBなのでもっとかかる)
    • 最小スペックのEC2だと900円くらい？ + ロードバランサー
      • これだとEC2のメンテがめんどくさい
  • 嫌なのはwp-admin.phpなど公開していないページへのアクセスをされたりすること
    • プラグインでBasic認証かけるのでもよいかも
momuramomura

Wordpressのセキュリティ設定

取り急ぎwp-adminへのログインユーザの変更とBasic認証の設定をする。

ログインユーザの変更

  • 一旦デフォルトで作られたユーザでwp-adminにログイン
  • 管理者権限で新しいユーザを作成
  • デフォルトで作られたユーザは削除
    • ユーザ名取得時に22番ポートを全開放してCloudshellからコマンド実行で取得しているため

ログイン時のBasic認証設定

方法がいくつかある

  1. Wordpressのプラグインを使う
  • パスワード忘れてしまった時が少し厄介
  1. htaccessや.htpasswdを使う
  • パスワード直書きなのでやりたくない
  1. apache側で設定する

取り急ぎWordpressのプラグインで設定する。

メモ

  • Wordpressの画面を日本語にしたい
  • デフォルトユーザ削除したので作ったユーザのパスワード忘れたら詰むかも
  • DBもあるはずなのでパスワードを変更する
momuramomura
  • CloudFrontの無料利用枠が使えそう
  • ディストリビューションを作成
  • WAFをアタッチできるか検証
    • Web ACL作成画面で作成したLightsailディストリビューションが表示されない
    • 通常のCloudFrontとは違うらしい
  • WAFつけるつもりでいたけどやっぱり料金が高そう…
    • なのでディストリビューションは削除してALBを使った構成に戻す
  • データベースのセキュリティ
    • wp-config.phpに接続情報が記載されているので確認
      • デフォルトで複雑なパスワードになっている
      • 試しにDBに接続してみようとするが接続できない
        • WordPressとは接続できているので問題はないがDBに接続できない状態なのは不安なので接続方法を調べる
          やること
  • データベースの接続情報を確認する
  • WAF以外でなるべく安くセキュリティ対策ができないか確認する
    • メトリクスが一定を超えるとサーバを落とすとか？
momuramomura

サイト構築

サーバ側ばかりやってるのも飽きてきたのでWordPressの中身を作っていく。
まず管理画面を日本語化する。SettingsのGeneralから設定完了。
続いて中身だが、自分でHTMLを書いたりはしたくないのでWordPressのテーマを探す。
「Wordpress 写真 ポートフォリオ」で検索
こちらのサイトで紹介されている"RESI"を設定してみる。
https://takaprex.com/2022/05/30/wordpress_theme_portfolio/
ドキュメントを見ながら設定
https://modernthemes.net/resi-documentation/resi-home-page-setup/
なんやしようで別のテーマを使用

momuramomura

メモ

5月分の請求書が出たので確認。
思ったよりもLightSailのコストがかかっている。
ロードバランサーつけると結構料金が高くなるので外すことも検討する。

momuramomura

結局インスタで良いかもしれないとなったので本環境はクローズ。

このスクラップは2ヶ月前にクローズされました