Googleアナリティクス導入

ドメインも取得し、https化も済んだのでこのブログのURLがある程度固まります。
この段階で、今後アクセスを分析するためにGoogleアナリティクスを導入しておきます。
実はGoogleアナリティクスの学習/実験環境を手に入れるのがこのブログの目的の一つでもあります。

アカウント作成手順は非常に簡単で、
Googleアナリティクスで検索して出てきたページにアクセスし、Gmail等で利用しているアカウントでログインします。
あとはアカウント名、サイト名、トップページURLを入力して終わり。
つまずくとしたら、アカウント名に何を入れたらいいかくらいだと思いますが、これは本当になんでもよく、あとで変えられるようです。

ブログ側に設定するため、トラッキング IDという UAと数値で構成されたIDを取得し控えておきます。
これを ALL in One SEO というbitnamiのWordpressに初めから入っているプラグインに設定して完了。

GAのリアルタイム画面で自分のアクセスが検知できればテスト完了です。

httpのアクセスをhttpsにリダイレクトする

せっかくhttps通信を使うように証明書を設定しましたが、そのままではhttpでもアクセスできてしまいます。
対応として、httpでアクセスがあったらhttpsのURLへリダイレクトするようにします。

これも人によって方法の流儀があるようですが、bitnami のドキュメントにそって設定します。

Force HTTPS Redirection With Apache

方法は簡単で、設定ファイルを書き換えてapachを再起動するだけです。

書き換える設定ファイルはこれ。
/opt/bitnami/apache2/conf/bitnami/bitnami.conf
DocumentRoot の設定の下に3行追加します。


<VirtualHost _default_:80>
  DocumentRoot "/opt/bitnami/apache2/htdocs"
  RewriteEngine On
  RewriteCond %{HTTPS} !=on
  RewriteRule ^/(.*) https://analytics-note.xyz/$1 [R,L]
  <Directory "/opt/bitnami/apache2/htdocs">

設定したらapachを再起動。ちなみにコマンドはこちらです。


sudo /opt/bitnami/ctlscript.sh restart apache

あとは、httpのURLでアクセスして、httpsページが表示されたらOKです。
Chromの開発者ツールで通信をみるとリダイレクトされていることも確認できます。

LightsailのWordPressサーバーにLet’s Encryptの証明書を設定してhttps通信できるようにする

httpのままだと通信が安全でないなどの警告が出るため、https化を試みます。
本当は利用サービスをAWSに寄せていくため、AWS Certificate Managerを使いたくて、
色々調べていたのですが、結局ここで発行した証明書はサーバーに配置できないことがわかりました。
ロードバランサーに設定するそうですがロードバランサー自体がいいお値段するので断念し、
Let’s Encryptというのを利用することにしました。

各所で色々な人が手順を書いていくれていて、微妙に異なるので正しい手順がわからず混乱していたのですが、
bitnami の公式ドキュメントに、Let’s Encryptを使う手順がありますしたのでここの手順を採用します。

Generate And Install A Let’s Encrypt SSL Certificate For A Bitnami Application

ただし、ドキュメント場では下記のスクリプトを使えば簡単なように書いてありますが、Lightsailのサーバーにはこのファイルが無かったので、代替手順(Alternative Approach)の方を採用します。
/opt/bitnami/letsencrypt/scripts/generate-certificate.sh

注意点としては、X.Y.Zを最新のバージョン番号に読み替えるとか、DOMAINやEMAIL-ADDRESSを正しいものに読み替えて実行することと、
自分の場合は wwwのサブドメインを使っていないので、コマンドに含めないようにすることでしょうか。

Lego Client のインストール

サーバーにssh接続して下記コマンドを入れます。


cd /tmp
curl -s https://api.github.com/repos/xenolf/lego/releases/latest | grep browser_download_url | grep linux_amd64 | cut -d '"' -f 4 | wget -i -
# ドキュメント場の記載
# tar xf lego_vX.Y.Z_linux_amd64.tar.gz
# 実際は、curlで取得されたファイルに合わせて、バージョン番号を入れる
tar xf lego_v1.2.1_linux_amd64.tar.gz
sudo mv lego /usr/local/bin/lego

自分のドメインの証明書を作成する

Bitnami servicesを全て止める


sudo /opt/bitnami/ctlscript.sh stop

legoを実行。


# ドキュメントの記載
# sudo lego --email="EMAIL-ADDRESS" --domains="DOMAIN" --domains="www.DOMAIN" --path="/etc/lego" run
# 実際に打ったコマンド(ただしメールアドレスは伏せます)
sudo lego --email=メールアドレス --domains=analytics-note.xyz --path="/etc/lego" run

証明書を利用するようにサーバーを設定する

Apache用の手順を使用します。


sudo mv /opt/bitnami/apache2/conf/server.crt /opt/bitnami/apache2/conf/server.crt.old
sudo mv /opt/bitnami/apache2/conf/server.key /opt/bitnami/apache2/conf/server.key.old
sudo mv /opt/bitnami/apache2/conf/server.csr /opt/bitnami/apache2/conf/server.csr.old
# sudo ln -s /etc/lego/certificates/DOMAIN.key /opt/bitnami/apache2/conf/server.key
sudo ln -s /etc/lego/certificates/analytics-note.xyz.key /opt/bitnami/apache2/conf/server.key
# sudo ln -s /etc/lego/certificates/DOMAIN.crt /opt/bitnami/apache2/conf/server.crt
sudo ln -s /etc/lego/certificates/analytics-note.xyz.crt /opt/bitnami/apache2/conf/server.crt
sudo chown root:root /opt/bitnami/apache2/conf/server*
sudo chmod 600 /opt/bitnami/apache2/conf/server*

お恥ずかしながら、DOMAIN.key や DOMAIN.crtのDOMAIN を見落とし、置き換えないまま実行してしばらくここで詰まりました。

Bitnami servicesを再開


sudo /opt/bitnami/ctlscript.sh start

アクセステスト

https://analytics-note.xyz/
にアクセスします。
正常につながったのでOKです。

一旦設定は完了ですが、このままでは、
httpでも普通にアクセスできてしまうのと、
数ヶ月おきに証明書の有効期限が切れる問題があるのでそれぞれ対応します。

Lightsailにドメインを設定する

Route53で取得したドメインをこのサーバーに紐付けます。

ちなみにドメインの登録については最大3日かかると書いてありましたが、
メールアドレスの認証が済んだら数分後には完了し、
Route53のResistered domains に表示されていました。

ドメインは登録しただけだと使えないので作業を進めます。
公式ドキュメントはこちら
Amazon Lightsail の DNS ゾーンを作成する

DNSゾーン作成手順

  1. Lightsailのホーム画面で、[ネットワーク]を選択。(ドキュメントにはDNS ゾーンと書いてあるが)
  2. DNSゾーンの作成をクリック
  3. ドメイン名を入力
  4. [DNSゾーンの作成]をクリック

この段階では、Wordpressのサーバーと、DNSゾーンがそれぞれ独立して存在するだけで、
このドメインでブログにアクセスすることはできないようです。
続けてレコードの追加という作業が必要になります。

DNS ゾーンにレコードを追加する手順

  1. +レコードの追加をクリック
  2. Aレコードを作成。解決先にblogの固定IPアドレスを入れる(プルダウンから選べる)

Aレコードを作成するとき、サブドメイン無しのURLを使いたい場合は、
サブドメインに@を入れるといいようです。(ポップアップの吹き出しで指定されました)

他のサイトをみてみると、 www.ドメイン名 を サブドメインを含まないドメイン名のみのアドレスに
紐づける設定(CNAMEレコード)を設定していることが多いようですが、
必要性がなさそうなのでそれは設定しませんでした。

この後、画面に表示されている通り
ドメインプロバイダにネームサーバーを設定してあげる必要があります。
Lightsail側に4個表示されているので、これをコピーしてRoute53に持っていきます。

Route53のドメインにネームサーバーを設定

  1. Route53の管理画面にアクセスし、ドメインを選択
  2. Add or edit name serversをクリック
  3. 設定済みのものを消して書き換える
  4. [update]をクリック

Your request for update nameserver was successfully submitted. You will receive an email when it is done.
と表示されたので、メールを待ちます。

少し長めに待ち時間がかかって、ドメイン名でアクセスできるようになりました。

wordpressの管理画面にも自サイトのURLを指定するところがあるので設定変更が必要、
と思っていたのですが勝手に反映されていました。
Lightsailの機能でしょうかね。

Amazon Route 53 を利用して新規ドメインを取得する

このブログで使用するドメインを取得します。
現状、ブログ構築ブログみたいになっていますが、
早々にデータ分析に関する話をメインにしたいのでそれっぽいドメインを取ります。

色々な管理をAWSに集約したいので、お名前.com等ではなく、
Amazon Route 53で取得します。
公式ドキュメントはこちら。
新しいドメインの登録

手順

  1. AWS マネジメントコンソール にサインイン
  2. Route 53 コンソールを開く
  3. [Domain Registration] の [Get Started Now] を選択
  4. [Register Domain] をクリック
  5. Choose a domain name で登録したいドメインを入力
  6. checkをおして、登録できること(StatusがAvailable)を確認
  7. [Add to Cart]をクリック
  8. 登録する年数を選択
  9. [Continue] をクリック
  10. Registrant Contactに自分の情報を登録
  11. [Continue]をクリック
  12. I have read and agree to the AWS Domain Name Registration Agreement にチェック
  13. [Complete Purchase]をクリック

ドメイン登録が完了するまでに最大3日かかるそうです。
(Domain registration might take up to three days to complete.)

ドメインの一覧画面に行くと、Statusが
Domain registration in progress になっていました。

数分後に入力したメールアドレスの確認メールが届きましたので、
中のリンクをクリックして待ちます。

Macbook に Homebrewをインストールする

タイトルにはMacbook と書きましたが、デスクトップでも手順は同じはず。
ちなみに、普段の分析ではMac book Proを使用しています。

手順は簡単で、公式サイトにあるコマンドをターミナルで実行するだけ。
ここにもコマンドを転記しておきますが、公式サイトからコピーしたほうが確実です。


/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

Macではmecabもpyenvもhomebrewで導入すると簡単です。

トップページ右下に出てくるbitnamiのバナーを消す

ブログの右下がペロッとめくれた見た目になり、bitnamiのバナーが見えているのでこれを消します。

公式マニュアルの方法はこちら。
Remove The Bitnami Banner

サーバーにSSHでログインして、以下のコマンドを実行して設定変更とサーバー再起動を行います。
公式キュメントで、 APPNAME と書かれてる部分は wordpressですね。


sudo /opt/bitnami/apps/wordpress/bnconfig --disable_banner 1
sudo /opt/bitnami/ctlscript.sh restart apache

syntax highlighter の Prismjsを導入

今後プログラムを含む記事が増える予定なのでsyntax highlighter を導入しました。
色々方法があるようですが、とりあえず検索した中で比較的評判の良かったprismjsを採用します。

公式サイト

Prismjsの導入

WordPress用に Prism For WP というプラグインがあるようなのでこれをインストールして有効化。
設定画面で、利用予定の言語(Pythonなど)にチェックを入れました。
MarkupというのがHTMLらしいです。

行番号表示機能も使いそうなので、Select Pluginsの Line Numbers にもチェック。
また、Normalize Whitespace を有効化しておくと先頭行の不要な空白を消してくれるそうです。

Prismjsの使い方

ソースコードをpreタグとcodeタグで囲み、preタグのclassにline-numbers、codeタグのクラスにlanguage-x(xは言語名)を設定します。

HTMLで使用した例


<pre class="line-numbers"><code class="language-markup">
    ここにHTMLのソースコードを書く
</code></pre>

Pythonで使う場合は language-python。使ってみた例。

記事に書いたコード


<pre class="line-numbers"><code class="language-python">
a, b = 0, 1
for _ in range(10):
    a, b = b, a + b
    print(b)
</code></pre>

表示結果


a, b = 0, 1
print(b)
for _ in range(10):
    a, b = b, a + b
    print(b)

ちなみにサンプルのプログラムはフィボナッチ数列を出力します。

Amazon Lightsail で WordPressサイトを作成する手順

要するにこのブログのサーバーを立てたときのメモです。
ある程度記事が貯まるまでは集客もSEOも考えてないので数日はドメイン無しで運用中。

公式ドキュメント

元々の手順が簡単なうえ、上記の各ドキュメントがわかりやすいのでほぼ迷わず作業完了しました。

サーバー作成手順

  1. AWSコンソールにログイン
  2. 全てのサービスのコンピューティングにある Lightsail を選択
  3. インスタンスタブの[インスタンスの作成]ボタンをクリック
  4. インスタンスロケーションを確認(東京)
  5. インスタンスイメージの選択画面で、下記の通り選択
    • Linux/Unix
    • アプリ+OS
    • wordpress
  6. インスタンスプランの選択 (今回は一番安いのを選択)
  7. インスタンスに名前を付ける
  8. [インスタンスの作成]ボタンをクリック

静的IP作成手順

  1. Lightsailの管理画面で、ネットワークタブを選択
  2. 静的IPの作成ボタンをクリック
  3. 静的 IP をアタッチする Lightsail リソースを選択
  4. 静的 IP に名前を付け、[作成] をクリック

アクセスとログイン

Lightsailのホーム画面から作成したインスタンスを選ぶと、作成したIPアドレスを確認できます。
ブラウザのURLにIPアドレスを入力すると、 自分のwordpress画面にアクセスできる。

また、Lightsailのホーム画面からサーバーにブラウザ上でSSH接続可能。
Lightsail の右上のアカウントから、SSHキーをダウンロードし、接続することもできる。

SSH接続するとホームディレクトリに
bitnami_application_password
というファイルがあり、この中にログインパスワードがある。
ちなみにユーザー名は user

関係ないですが、以前 RedmineをLightsail で立てたときに
初期生成されているユーザー名がわからず苦戦したことがあります。

blogを開設しました

はじめまして。ゆうたろうと申します。
この度、新しいBlogを立ち上げました。

ブログのメインの目的は日頃業務や興味のため調べた内容をまとめる場所を作ることです。
日々の業務や趣味で調べたことが各所に散らばっているので、ここに統一したいと考えています。
(自宅のPC2台、個人のサーバー、職場のPCとサーバー、紙のノートなど)
その他、Wordpressを使ってみたかったとか、Googleアナリティクスを個人で試す環境が欲しかったとか、細かな理由があります。

しばらくは過去にどこかに書いたメモのコピーとか、このブログ開設時にやった作業とかがメインのコンテンツになると思いますが、
徐々にきちんと有益なコンテンツを載せれるようにしたいと思っていますのでよろしくお願いします。

略歴

地方の国立大学/大学院修士課程で、数学を専攻し修了したのち、下記の3社で3職種経験。
1社目 電機メーカー本体の金融機関向けフロントSE
2社目 医療機関向けのWeb制作会社のエンジニア。(中国の開発子会社のマネジメントを担当)
3社目(現職) とあるWebサービス会社のデータサイエンティスト