Zenn
Open4

aws Amplify Cloud9 React-Vite プレビューlocalhost:5173 設定変更

AWS
React
Cloud 9
Amplify
Vite
marchanmarchan

aws Amplify (React-Vite)をCloud9 で構築するときに
開発サーバのプレビューが見られない現象と対応についてまとめます。

現象

Cloud9
$ npm run dev

amplify-vite-react-template @ 0.0.0 dev
vite
VITE v5.2.11 ready in 457 ms
➜ Local: http: // localhost:5173/
➜ Network: use --host to expose
➜ press h + enter to show help

  • 「Preview Running Application 」や「 http: // localhost:5173/」をクリックしても表示されない。
    -　ポート：5173はCloud9で許可されていない。
marchanmarchan

対応　vite.config.tsを編集

  • 【変更前】 vite.config.ts
vite.config.ts
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
});
  • 【変更後】vite.config.ts
vite.config.ts
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

export default defineConfig({
  // cloud9が許可するポート番号
  server: {
    port: 8080,
  },

  plugins: [react()],
});
marchanmarchan

$ npm run dev

結果

Cloud9
$ npm run dev

gen2-the-demo@0.0.0 dev
vite

VITE v5.2.10 ready in 500 ms

➜ Local: http: // localhost:8080/
➜ Network: use --host to expose
➜ press h + enter to show help