記事の概要
先日、GCPで構築したWordPressのサイトが、モバイル(スマホ)からアクセスすると、レイアウトが崩れていることに気づきました。
今回は、AWSやGCPで提供されているBitnamiのイメージの中でNginxを選んだ場合の対処方法について説明します。
対象のイメージ
bitnami-wordpresspro-5-x-x-x-linux-debian-9-x86-64
何が起こったのか
記事を投稿した後のチェック、しっかりやっていたつもりでした。しかしGoogle検索から出てきた自分のサイトを見た瞬間絶望しました。
何この見にくい整ってないサイトは…
おかしいと思い、色々な方法でサイトのレイアウトを確認しました。そしてTwitterで共有したサイトへアクセスすると…
404 Not Found！！！
完全に確認不足です。Topページからのレイアウト確認しかしておらず状況は思った以上にひどかったのです。
レイアウトが崩れた原因
原因は単純にAMP対応の設定が甘かったようです。
GCPで提供されているBitnamiのイメージでは、プラグインが初期インストールされていましたが、あまり気にせず放置していたのが悪かったようです。
対処方法
ここから、実際に対処した方法を記載します。
AMPをしっかり設定する方法も考えましたが、すぐにでも対応したかったため、AMPを無効化する方向としました。
多くのネットの記事と同じ要領でできますが、ApacheとNginxで対処法が違いますので、AWSやGCPなどでNginxを選んでインストールされた方はご参考にしてください。
AMPを無効にする
とりあえずWordPressからAMPを無効化します。
WordPressメニューの「プラグイン」からAMPを停止します。停止後、不要であれば削除します。
リダイレクトの設定を行う
次に、ampアクセスに対するリダイレクト設定を行います。
ampへのアクセスがなくなれば不要ですが、しばらくはアクセスが発生しうるため対応します。
ネットの記事の多くは、.htaccessを編集するものが多いのですが、本環境はNginxを利用していますので、別の方法で対応する必要があります。
Bitnamiのイメージからサーバを構築した場合は、bitnami.confを変更します。
まずは、サーバへログインします。(今回はGCPを例に記載します。)
ログイン後、念のため設定ファイルのバックアップを行います。
sudo cp -p /opt/bitnami/nginx/conf/bitnami/bitnami.conf /opt/bitnami/nginx/conf/bitnami/bitnami.conf.org次に、設定ファイルを編集します。
sudo vi /opt/bitnami/nginx/conf/bitnami/bitnami.conf以下のコードを、httpsのserverブロックへ追加します。
rewrite ^(.*)/amp/?$ $1 permanent;設定ファイル保存後、Nginxを再起動します。
sudo /opt/bitnami/ctlscript.sh restart nginx上記の設定が終わったら、サイトへアクセスして確認しましょう。
以下の例は、スマホのTwitterアプリからアクセスした場合です。
ampへのアクセスもうまくリダイレクトされて想定通りのレイアウトで表示されていると思います。
まとめ
Nginxの場合は、Apacheとの対応方法が異なります。
今回は、AMPを無効化することでサイトレイアウトを整える方向で対応しましたが、対応しないよりは対応したほうがサイトの価値は向上すると思いますので、次はAMP対応する際の記事をまとめたいと思います。