wordpressのインストール画面で発生するレイアウト崩れを直したい

Question

AWS上に下記の構成でWordpressをインストールしようとしたのですが、
インストール画面でレイアウト崩れが発生してしまいます。

• パブリックサブネットのec2（http://XXX.XXX.XXX.XXX:80）
  nginxをインストール
• プライベートサブネットのec2（http://YYY.YYY.YYY.YYY:8080）
  apache、wordpressをインストール

nginxとapacheの連携を確認する為に、プライベートサブネット側の/var/www/htmlディレクトリにhtmlファイルとcssファイルを設置して、http://XXX.XXX.XXX.XXXでプライベートサブネット側のリソースを問題なく表示できることを確認しました。

この時のnginx.confには次の設定を追加しています。

location / {
    proxy_pass http://YYY.YYY.YYY.YYY:8080/;
}

次にwordpressをプライベートサブネットのec2にインストールしようとしたのですが、http://XXX.XXX.XXX.XXX/wordpressでアクセスしようとすると、インストール画面でhtmlは読み込めて、cssやjavascriptが読み込めない状態になります。

chromeでhttp://XXX.XXX.XXX.XXX/wordpressのインストール画面のソースコードを見ると次のようになっていました。
src="http://YYY.YYY.YYY.YYY:8080/wordpress/wp-includes/js/jquery/jquery.min.js?ver=3.5.1"
無理矢理インストール作業を進めることはでき、DBの構成は完了できるので、wordpress側のcssやjsのURLの問題だと思われます。

この状態からレイアウト崩れを修正するにはどのように対処したら良いのでしょうか。
あるいは、wordpressの仕様上、プライベートサブネット側にインストールするのは厳しいのでしょうか。

Comments

[CHERRY]

> chromeでソースコードを見ると次のようになっていました。

というのは，パブリック、プライベートのどっちのURL にアクセスした場合ですか？

[退会済みユーザー]

パブリックのURL（http://XXX.XXX.XXX.XXX/wordpress）になります。

[yu_1985]

なぜALBを使わずにわざわざnginxを経由させているんでしょうか？
リバースプロキシとしてロードバランシング以外の何かをさせたいということですか？

[退会済みユーザー]

すみません。説明不足ですが、今回はVPC、EC2、RDSのみを使った想定をしています。
ALBはまだ使用したことが無く、初歩的な機能のみでの構築をしています。

[yu_1985]

Wordpressの前段にnginxをかませるほうがALB使うより複雑だと思いますよ。
「初歩的な機能のみで」というならnginxを経由させる必要はないでしょう。

Answer 1

私が勘違いしている可能性がありますが・・・。
YYY.YYY.YYY.YYYがプライベートサブネットのIPだと思いますが、グローバルからのYYYへのアクセスはできません。
なので、
＞http://XXX.XXX.XXX.XXX/wordpress
にアクセスした時に、
＞http://YYY.YYY.YYY.YYY:8080/wordpress
の部分の読み込みはできなくてJSファイルのロードに失敗するのは当然だと思います。

どんなテンプレートを使っているのかわかりませんが、Header部分にかかれているYYY.YYY.YYY.YYY:8080 を、XXX.XXX.XXX.XXX に修正すれば問題は解決しませんか？

Comments

[退会済みユーザー]

https://server-recipe.com/1582/
こちらを参照したところ、wordpressの仕様によって、追加でnginxの設定も必要になってくるのではと思います。
変更はこれからですが、一旦ここでクローズしようと思います。
ありがとうございました。