Nginx

リバースプロキシによって、サイトURLはそのままで違うURLのサイトを表示できる。 Nginx：proxy_passを使ってURLはそのままで違うサイトを表示する | Shiro’s secret base

nginx.confに各サイトごとの設定ファイルを読み込む記述を追加する。

FROM nginx:1.22

RUN rm /etc/nginx/conf.d/default.conf # localhostを使う場合は競合するので消す
COPY nginx.conf /etc/nginx/ # sites-enabled以下を読み込む設定を追加したnginx.conf
COPY sample.conf /etc/nginx/sites-enabled/ # サイトごとの設定

include /etc/nginx/sites-enabled/*.conf;

たとえばjsをビルドしたものを配信する場合、必要なこと。

パスが何であれ常にindex.htmlを読むこむ ため、自前でサーバを用意する場合、サーバ側で設定が必要になる。GitHub Pagesなどホスティングサービスを利用した場合、自動で設定してくれるため気づきにくい。

• リンクしたリソースへのパスが絶対パスであること
• Webサーバがどのパスであれ、最終的にindex.htmlを読むこむこと

これらはyarn start(内部的にexpressを使っていたりする)で準備されてる場合など、開発環境では動作が異なるためチェックする。実際にbuildしたhtmlと、yarn startで描画したhtmlを比較するとわかりやすい。

server {
    listen 80;
    server_name localhost; # localhostはデフォルトの設定ファイルと競合するので予め消しておくこと

    location / {
      root /var/www/html; # 配信対象の静的ファイルが入ったディレクトリ
      try_files $uri /index.html; # すべてのURLを/index.htmlへ
      index index.html;
    }
}

説明。

Nginxでリバースプロキシするときの設定。