はじまる

適当な事を適当に書く

Amazon Lightsail と Wordpress を利用したデモ用Webサイト構築

前書き

一般的なWebサーバ/Webアプリケーションのホスティングサービスである、Amazon Lightsail を利用してデモ用Webサイトを構築する手順を紹介します。今回は、Wordpress インスタンス(Bitnami)を利用します。※月間のあいだインスタンスをずっと稼働させているとだいたい月1,000円〜の費用が発生するので、注意してください。

Wordpress インスタンスの構築手順

Lightsail インスタンス

https://lightsail.aws.amazon.com/ls/webapp/home/instances にて、Amazon Lightsail のインスタンスを作成します。「Create Instance」ボタンから、新規インスタンスを作成してください。

Lightsail ダッシュボード
今回は、Platform は Linux/Unix、Select a blueprint では Wordpress を選択します。
Creating a new instance

「Create Instance」ボタンをクリックして、インスタンスが作成されたら、インスタンスの管理画面で、以下を確認してください。

Lightsail Instance

固定IPアドレス

Amazon Lightsail インスタンスは EC2 インスタンス同様、インスタンスを再起動するたびに、公開IPアドレスが変更されます。再起動の都度、公開IPアドレスが変更されてる状態では、公開IPアドレスに安定してドメイン名を設定することができない為、Lightsail インスタンス固定IPアドレスを付与します。LIghtsailインスタンス用の固定IPアドレスは、Lightsailインスタンス管理画面の「Networking」タブから作成できるので、画面操作に従って設定をしてください。

ドメイン

Lightsailインスタンスに固定の公開IPアドレスが付与できたら、そのIPアドレスに紐づける為の任意のドメイン名を取得します。Amazon Route53で購入するとAWSの各種サービスとの連携がやりやすいです。

DNS

ドメイン名が取得できたら、取得したドメイン名とLightsailインスタンスの公開IPアドレスを紐づけられるように、Route53 の設定画面にて、Aレコードを設定します。Route53で購入したドメイン名とLightsailインスタンスの間のAレコード設定は1分程度で伝播されます。

伝播が完了したかの状態はRoute53の画面上に表示されます。完了の表示がでたら、レコードに設定したサブドメインで、Wordpressにアクセスできることを確認してください。

SSL対応

https://aws.amazon.com/jp/premiumsupport/knowledge-center/linux-lightsail-ssl-bitnami/

Lightsail の Bitnami Wordpress インスタンスでは、Bitnami HTTPS Configuration Tool を利用して、Let’s Encryptサーバー証明書を用いたSSL対応が可能です。「Connect using SSH」ボタンからブラウザSSHクライアントを起動、$sudo /opt/bitnami/bncert-tool を実行し、表示される手順にしたがって設定を完了してください。設定が完了したら、HTTPSWordpressにアクセスできることを確認してください。

Wordpress の初期設定

Wordpress 管理画面ログイン

SSL対応が完了したら、Wordpressの管理画面にログインしてみましょう。

https://<ドメイン名>/wp-login.php

デフォルトの管理ユーザーは、ユーザー名 user 、パスワードは、インスタンスのサーバーにSSH接続して、cat bitnami_application_passwordを実行して表示される文字列になります。

ログインに成功すると、Wordpress の管理画面にアクセスできます。ここから、サイトコンテンツの変更やプラグインの追加などをおこなっていきましょう。

カスタムJavaScriptの配置

Wordpress の管理画面では、基本的にWebサイトに JavaScriptCSSを追加することはできません。つまり、下記のようなツールをWebサイトに導入する場合、標準機能以外の手段を利用する必要があります。

プラグインを利用する

Wordpress の各種プラグインで、Webサイトに JavaScriptCSSを追加することが可能です。ここでは「GTM4WPプラグインを追加し、Webサイトの配置するJavaScriptタグの管理をGoogle Tag Manager 経由で行えるようにします。PluginメニューからGTM4WPを検索・インストールし、Settings より下記の手順を実施すれば、以降は Google Tag Manager を通常通り利用できるようになります。

  • Google Tag Manager ID にコンテナIDを入力
  • Container code capability mode を On に設定
  • Save Changes ボタンで保存
直接PHPファイルを編集する

SSHで Lightsails インスタンスのサーバーにログインし、テーマのPHPファイルを編集することでもJavaScriptCSSの更新が可能です。bitnami では /home/bitnami/stack/wordpress/wp-content/themes/<テーマ名>/ にテーマごとのPHPファイルが格納されている為、そのPHPファイルを編集することで、JavaScriptの変更が可能です。