86621


## やりたいこと

ローカル環境で閲覧している状態を公開環境でも適用できるようにしたい。

## 問題点

ローカル環境では期待通り正常に閲覧できています。  
が、静的サイトジェネレータ（プラグイン）でビルドしたファイルを公開環境に格納してみると、各所にリンク切れやレイアウト崩れが発生しています。

* * *

## 現状

### 設定情報

wordpressの設定にある「WordPress アドレス (URL)」と「サイトアドレス (URL)」が異なる環境で運用しています。  
前者はローカルで作業し、後者はビルドした静的ファイルを格納し、公開するURLです。  
これにより、内部リンクは問題なく運用できています。

### 再現手順

私の環境の話なのでお見せするのが難しいのですが、イメージをより具体的にしていただきやすいよう、再現手順を残します。

  1. ローカル環境でサイトトップを開く： CSSやJSが読み込まれ実行される
  2. ビルドする(WP2HTMLを使用): ※この時点でリンクがローカル環境になっている※
  3. ビルドしたファイルを公開サーバーに格納: リンク切れ

* * *

## 解決アプローチを検討

### テーマファイルを編集する

CSSやJSの読み込みについては、それぞれのテーマに依存して？おり、各所で「サイトアドレス（公開先URL）」ではなく「WordPressアドレス(ローカル)」を適用しているようです。  
ローカルで編集する際には必要なので、これは妥当だと思います。

が、ビルド時にもローカルアドレスになってしまっているため、これが原因で公開時にレイアウト崩れを起こしてしまっています。

テーマファイルを書き換えて編集する方法が一番簡単な気がしていますが、テーマを変えるたびにファイルを書き換える必要がありそうなので、これは避けたいです。

### サイトジェネレータを編集する

本来であれば静的サイトジェネレータ側を編集するのが一番だと思いますが、どこをどういじれば良いか分かりません…。

### 運用対処

静的サイトジェネレータをいじらなくても、生成した後のすべてのファイルのローカル環境のパスを公開環境のパスに書き換えれば良いので、wordpressではなくshellなりで`find
| xargs sedなりawkなり`すればよさそうです。  
が、今回は一度設定すればwordpressで完結できる環境を作れることをゴールにしたいです。

* * *

## 所感

検討には今、思いつく限りを書いていますが、実はwordpressの機能でもっと便利なものがあって、そちらを使えば全部解決とまで言わなくてもある程度作業はしやすくなるんじゃないかと考えています。  
あるいは、運用対処している内容をプラグイン化できればwordpress上で完結することもできそうな気がしていますが、現実として可能かどうかが分かっていません…。

### 参考情報

shifterなどの便利なサービスを使えば解決できると思います。

* * *

## 期待する回答

検討の方法はあくまで、私が今考えている方法に過ぎません。もっと良い方法があると思っています。  
やりたいことは「ローカル環境で閲覧している状態を公開環境でも適用できるようにする」ことなので、まずはこれをゴールにして、
**どのような解決アプローチが考えられるか** お力をお借りしたいです。

### 要望

  * (※必須)公開環境は静的サイトジェネレータ（方法は不問）でビルドしたファイルを使いたいです。 
    * セキュリティ面を考えると、WP RESTAPIやWP-adminを外部公開した状態で使えません。
    * 開発環境は外からつなげられない場所に置きたいです。
  * (※必須)開発環境のGUIで編集したいので、開発環境でGUIが使えなくなるような改修はできません。 
    * 思い当たるのが設定画面の「WordPressアドレス」を公開先URLに変更する方法です。この場合、開発環境の管理画面にアクセスできなくなります。
  * 一度設定する場合にコアファイルを操作したりする事は許容できますが、基本的にはwordpressで完結したいです。 
    * テーマを変更した際に影響がないようにしたいです。

（他、気付いた点があれば追記していきます）


CC BY-SA 4.0
2022-02-26T01:37:39.730
86578
2022-02-28T17:20:32.220
2022-02-26T04:26:56.477
3060
27817
question
wordpress
HTMLファイルのビルド時にJSやCSSの参照先がローカル環境のままになってしまっているので、公開環境に変更したい


ローカルの開発環境がどのような形になっているのかわかりませんが、  
/etc/hosts を書き換えてみてはいかがでしょうか？

例えば  
honban.com 127.0.0.1  
としてしまって、開発の時もサイトアドレスを利用してしまうのです。

逆に言うとその開発環境で本番が参照できないですが、そんな時はコメントアウトしてしまえばいいと思います。

ローカルの環境が仮想のDockerやVBなどを利用している場合は仮想環境の/etc/hostsも書き換える必要があるかもしれません。

/etc/hosts ファイルについては各OSに用意されていますのでご利用になられているOSに合わせて調べて書き換えてみてください。

ちなみに  
WPはCMS管理のプロダクトでHTMLを作る製品ではないです。  
なので実際やろうとしていることはなかなか無理筋のような気もします。

セキュリティ的にWPの管理画面を置けないとありますが、IP制限やVPNによるローカルエリアネットワーク制約や2段階認証など必要な対策を実施していれば十分セキュリティ担保になることもあります。  
またWPやその周りのプラグインは毎年脆弱性が報告されています。管理画面を閉じていればOKというものでもなく、WPそのものにたいする攻撃もこれまでいくつも見受けられました。管理画面すらおけないほどのセキュリティポリシーが厳しいものだとそもそもWP自体NGということもあり得ると思います。  
セキュリティポリシーを見直して、WPをうまく使っていくか  
もしくは従来のポリシー通りにWP代替の製品を探したほうがいいと思います。


CC BY-SA 4.0
2022-02-28T07:06:45.377
86611
2022-02-28T07:06:45.377
22665
86578
answer


自己解決しました。  
他にも静的サイト化してくれるプラグインがあり、いくつか試したところ本件を解決できるプラグインもありました。  
今回は単純にWP2HTMLだけでは対応できなかったようです。  
ハマったポイントとしては「WP2HTMLまたは他のプラグインで生成したディレクトリは都度削除する」という運用が必要なので、デバッグ時には要注意です。  
（静的サイト化のプラグインをいくつか試したところ、うまく動いたり動かなかったりするプラグインがあるので過信は禁物のようです）

また、ご回答にもいただいている`/etc/hosts`を書き換える案も有用だと思います。  
今後WordPressに限らず同様の問題があった時に意識しようと思いました。


CC BY-SA 4.0
2022-02-28T17:20:32.220
86621
2022-02-28T17:20:32.220
27817
86578
answer