React アプリを code-server でローカル起動するときにハマった件

こんにちは、広野です。

IDE を AWS Cloud9 から code-server に切り替えている最中に長時間ハマったことがありまして。同じ事象でハマった人のために備忘録を残しておこうと思います。

環境

• React 19.1.1
• Vite 7.1.6
• IDE は code-server
• アプリで使用するポートは 8080 とする

事象

何を言おうとしているかと言うと。スクリーンショットで示します。

 

まずは、npm run dev します。

これで、code-server の OS 上 (localhost) で、8080 番ポートでアプリが起動しました。しかし、code-server への直接アクセスはこの環境では 443 ポートでしかアクセスできません。※環境によります。

この状況を回避するために、code-server はポートフォワードする機能を持っています。npm run dev をすると、自動で自身の公開用 FQDN に /proxy/ローカル起動アプリのポート番号/ のパスを付けて公開してくれます。

例えば、code-server の URL が

https://codeserver.example.com

だったとすると、ローカル起動アプリ (8080) の URL は以下になります。

https://codeserver.example.com/proxy/8080/　→　http://localhost:8080 に転送！

これ自体は大変ありがたい機能なのですが、実際にこの URL にアクセスすると大量に 404 not found エラーが発生します。

おそらくですが、ビルドしたアプリが認識しているパスと、自動付加された /proxy/8080/ との間で整合性が取れていないものと思われます。この問題が無かったとしても、この機能を使用する前提としてアプリコードの中で使用するパスは相対パスである必要があります。相対パスにしていたとしてもこのエラーは発生します。

 

解決策

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  server: {
    port: 8080,
    allowedHosts: true
  }
});

変更後は、base を追加します。

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  base: '/absproxy/8080/',
  plugins: [react()],
  server: {
    port: 8080,
    allowedHosts: true
  }
});

この状態で npm run dev を実行すると。

http://localhost:8080 の後に /absproxy/8080/ のパスが追加され、ポートフォワードされるようになりました！発生していたエラーも無くなりました。

ただし。

アクセス先のパスは以下のようになります。

https://codeserver.example.com/proxy/8080/absproxy/8080/

/proxy/8080/ と /absproxy/8080/ が二重になりますが、これで正しいようです。気持ち悪いですが。

base を環境変数にする場合、一例ですが以下のように vite.config.js を書くことができます。code-server 上のローカル起動でなければ base は “/” にしておき、code-server のときは “/absproxy/8080/” を入れておけばよいです。

import { defineConfig, loadEnv } from 'vite';
import react from '@vitejs/plugin-react';

const env = loadEnv('development', process.cwd(), 'VITE_');

export default defineConfig({
  base: env.VITE_BASE,
  plugins: [react()],
  server: {
    port: 8080,
    allowedHosts: true
  }
});

今回のケースですと .env ファイルには以下のように書いておきます。

VITE_BASE=/absproxy/8080/

 

終わってみると大したことないのですが、本当にハマってました。

 

まとめ

いかがでしたでしょうか？

他にもスマートなやり方はあったのかもしれませんが。さんざん苦労した挙句、見つけた方法でした。

本記事が皆様のお役に立てれば幸いです。

雑談

CORS ってほんと迷惑ですね・・・。本記事のテーマとは異なりますが。

セキュリティのために必要なのは理解するんですけど、もう少し設定の柔軟さは用意しといて欲しかったです。ワイルドカード設定の柔軟性を。全体 * でいいや！って開き直りたいんですけど、そこまで強心臓になりきれず。* だと会社のセキュリティ監査で必ず引っ掛かるし・・・。