Viteの開発環境をNginxで公開する時の諸注意（特にバックエンド周り）

Dockerで以下のような構成でvite+vueで開発

バックエンドはrails-apiで http://api:3000 でアクセスさせます。
バックエンドは公開しないので、dockerで公開ポートは設定せずdocker内からのアクセスのみとします。

viteからバックエンドへのアクセス

開発環境のviteからバックエンドapiへのアクセスは
vite.config.jsで以下のように設定。
これでjsコード内でaxiosなどで使って/api/*へのアクセスをproxyすることができます。

vite.config.js

~~~~略~~~
export default defineConfig({
  server: {
    proxy: {
      "/api": {
        target: "http://api:3000", // 代理先のサーバー
        changeOrigin: true, // オリジンを変更する
        rewrite: (path) => path.replace(/^\/api/, ''), // プレフィックスを削除
      }
    },
    watch: {
      usePolling: true
    },
  },
~~~~略~~~

rails-api側にもconfig.hosts.clearを設定

configenvironments/development.rb

Rails.application.configure do
    ~~~~略~~~
    config.hosts.clear
end

viteを本番用にbuild

viteは開発環境なのでjsなどをbuild(コンパイル)してデプロイします。
初期設定ではdistフォルダに作成されます。

# npmの場合
npm run build
# yarnでbuildする場合
yarn run build

nginxでdistフォルダを参照

viteでデプロイされたdistフォルダをdocker上でbindマウントさせれば、
viteを意識することなく、nginxでvue.jsのSPAを公開できます。
(この設定はdocker composeになるので割愛）

nginxのproxy設定

viteでproxyしていたバックエンドへのアクセス設定は、buildで勝手にコンパイルされません。
nginxに設定する必要があります。

default.conf

server {
    listen       80;
    listen  [::]:80;
    server_name  localhost;
    ##axiosのバックエンドへのアクセス/api~をapi:3000へproxyする
    location ~ ^/api {
        proxy_pass http://api:3000;
        rewrite /api(.*)$ $1 break;
    }

nginxにSPAの遷移設定

SPAの遷移もnginxに描いておかないと/から遷移すると404になってしまいます。
以下のようにすると404の遷移もindex.htmlになってしまうので、jsでなんとかする。

default.conf

    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
        try_files $uri $uri/ /index.html;
    }

参考

【余談】nginxのrewriteの設定（自分メモ）

ここからは余談となります。
nginxのproxy設定のrewriteの挙動を確かめたいと思い、default.confのrewriteのbreakをpermanentに書き換え、nginxを再起動。

default.conf

    location ~ ^/api {
        proxy_pass http://api:3000;
-        rewrite /api(.*)$ $1 break;
+        rewrite /api(.*)$ $1 permanent;
    }

うぎゃー

エラーメッセージ

TypeError: Cannot read properties of undefined (reading '0')

パラメータを変えただけでバックエンドにproxyできなくなった。

で、問題はこの後で、以下のように元に戻して、nginxを再起動。

default.conf

    location ~ ^/api {
        proxy_pass http://api:3000;
+        rewrite /api(.*)$ $1 break;
    }

しかし、chromeの画面は変わらない…。なんでや。
さんざん別のパラメータを変えるなどしましたが、結論は以下でした。

chromeのキャッシュを削除

nginxの挙動がおかしかったらキャッシュを疑おう。

参考

肝心のnginxのrewriteパラメータは以下を参照