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

# Dockerで以下のような構成でvite+vueで開発
バックエンドはrails-apiで http://api:3000 でアクセスさせます。
バックエンドは公開しないので、dockerで公開ポートは設定せずdocker内からのアクセスのみとします。

![vue-rails2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82975/85b3d786-8585-9d93-e051-8874767abfa1.jpeg)

### viteからバックエンドへのアクセス
開発環境のviteからバックエンドapiへのアクセスは
vite.config.jsで以下のように設定。
これでjsコード内でaxiosなどで使って/api/*へのアクセスをproxyすることができます。
```js: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を設定
```rb:configenvironments/development.rb
Rails.application.configure do
    ~~~~略~~~
    config.hosts.clear
end
```
# viteを本番用にbuild
viteは開発環境なのでjsなどをbuild(コンパイル)してデプロイします。
初期設定ではdistフォルダに作成されます。
```sh:
# npmの場合
npm run build
# yarnでbuildする場合
yarn run build
```
![nginx-vue.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82975/35e76520-d077-e6b4-43ed-8059d45c0424.jpeg)

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

### nginxのproxy設定
viteでproxyしていたバックエンドへのアクセス設定は、buildで勝手にコンパイルされません。
nginxに設定する必要があります。
```conf: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でなんとかする。
```conf:default.conf
    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
        try_files $uri $uri/ /index.html;
    }
```
### 参考
https://qiita.com/pillyshi/items/a3d1e939821d0d194f6a

### 【余談】nginxのrewriteの設定（自分メモ）
ここからは余談となります。
nginxのproxy設定のrewriteの挙動を確かめたいと思い、default.confのrewriteのbreakをpermanentに書き換え、nginxを再起動。
```diff_conf:default.conf
    location ~ ^/api {
        proxy_pass http://api:3000;
-        rewrite /api(.*)$ $1 break;
+        rewrite /api(.*)$ $1 permanent;
    }
```


#### うぎゃー
![スクリーンショット 2024-11-17 18.48.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82975/a8e95cae-c8e6-9b16-13e1-eb54d16818ad.png)
##### エラーメッセージ
TypeError: Cannot read properties of undefined (reading '0')

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

で、問題はこの後で、以下のように元に戻して、nginxを再起動。
```diff_conf:default.conf
    location ~ ^/api {
        proxy_pass http://api:3000;
+        rewrite /api(.*)$ $1 break;
    }
```

しかし、chromeの画面は変わらない…。なんでや。
さんざん別のパラメータを変えるなどしましたが、結論は以下でした。
### chromeのキャッシュを削除
nginxの挙動がおかしかったらキャッシュを疑おう。

### 参考

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

https://www.skyarch.net/blog/nginx%E3%81%AErewrite%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%9F%E3%83%AA%E3%83%80%E3%82%A4%E3%83%AC%E3%82%AF%E3%83%88/

https://zenn.dev/sey323/scraps/eee29d8b822d34

https://kuroeveryday.blogspot.com/2019/03/effect-of-trailing-slash-on-nginx-reverse-proxy.html

https://qiita.com/ryuichi1208/items/50594810be613d838948