フロントエンドをバックエンドから分離

ClientApp/.dockerignore

@@ -0,0 +1,57 @@
+# Dependencies
+node_modules/
+.npm
+.yarn
+
+# Production build
+build/
+dist/
+
+# Development
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# IDE
+.vscode/
+.idea/
+*.swp
+*.swo
+
+# OS
+.DS_Store
+Thumbs.db
+
+# Logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Git
+.git/
+.gitignore
+
+# Docker
+Dockerfile*
+docker-compose*
+.dockerignore
+
+# Coverage
+coverage/
+
+# ESLint cache
+.eslintcache
+
+# TypeScript build info
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/

ClientApp/Dockerfile

@@ -0,0 +1,19 @@
+FROM node:18-alpine
+
+WORKDIR /app
+
+# package.json と package-lock.json をコピー
+COPY package*.json ./
+
+# 依存関係をインストール
+RUN npm ci
+
+# ソースコードをコピー
+COPY . .
+
+
+# ポート3000を公開
+EXPOSE 3000
+
+# React開発サーバーを起動
+CMD ["npm", "run", "start"]

aspnetapp/WINGS/ClientApp/package.json → ClientApp/package.json

@@ -16,6 +16,7 @@
     "@rollup/plugin-terser": "^0.4.4",
     "browserslist": "^4.16.6",
     "chart.js": "^4.4.3",
+    "dotenv": "^17.2.1",
     "file-saver": "^2.0.5",
     "font-awesome": "^4.7.0",
     "glob": "^10.4.2",
@@ -42,6 +43,7 @@
   "devDependencies": {
     "@redux-devtools/app": "^6.1.0",
     "@types/file-saver": "^2.0.1",
+    "@types/node": "^24.1.0",
     "@types/react-dom": "^18.3.0",
     "@types/react-redux": "^7.1.33",
     "@types/react-router": "^5.1.20",
@@ -62,16 +64,20 @@
   "eslintConfig": {
     "extends": [
       "react-app",
-      "plugin:@typescript-eslint/recommended",
-      "plugin:@typescript-eslint/recommended-requiring-type-checking"
+      "plugin:@typescript-eslint/recommended"
     ],
     "parser": "@typescript-eslint/parser",
     "parserOptions": {
       "project": "./tsconfig.eslint.json"
     },
     "plugins": [
       "@typescript-eslint"
-    ]
+    ],
+    "rules": {
+      "@typescript-eslint/no-unsafe-assignment": "warn",
+      "@typescript-eslint/no-unsafe-member-access": "warn",
+      "@typescript-eslint/no-unsafe-call": "warn"
+    }
   },
   "scripts": {
     "start": "rimraf ./build && react-scripts start",

aspnetapp/WINGS/ClientApp/src/App.tsx → ClientApp/src/App.tsx

@@ -9,6 +9,7 @@ import { RootState } from './redux/store/RootState';
 import { updateLatestTelemetriesAction, addTelemetryHistoriesAction } from './redux/telemetries/actions';
 import "./assets/style.css";
 import { TelemetryPacketJson } from './models';
+import { apiFetch } from './lib/fetch';
 
 export function useValueRef<T>(val: T) {
   const ref = React.useRef(val);
@@ -27,7 +28,7 @@ const App = () => {
 
   const fetchTelemetry = async () => {
     if (opid === "") return;
-    const res = await fetch(`/api/operations/${opid}/tlm?refTlmTime=${refTime.current}`, {
+    const res = await apiFetch(`/api/operations/${opid}/tlm?refTlmTime=${refTime.current}`, {
       method: 'GET'
     });
     if (res.status == 200) {

aspnetapp/WINGS/ClientApp/src/components/command/log_display/CmdLogDisplayArea.tsx → ClientApp/src/components/command/log_display/CmdLogDisplayArea.tsx

@@ -7,6 +7,7 @@ import Button from '@mui/material/Button';
 import { getOpid } from '../../../redux/operations/selectors';
 import { updateCommandLogAction } from '../../../redux/commands/actions';
 import { CommandLogsJson } from '../../../models';
+import { apiFetch } from '../../../lib/fetch';
 
 const CmdLogDisplayArea = () => {
   const dispatch = useDispatch();
@@ -16,7 +17,7 @@ const CmdLogDisplayArea = () => {
 
   const handleOk = async () => {
     if (opid === "") return;
-    const res = await fetch(`/api/operations/${opid}/cmd_fileline/log`, {
+    const res = await apiFetch(`/api/operations/${opid}/cmd_fileline/log`, {
       method: 'GET'
     });
     const json = await res.json() as CommandLogsJson;

aspnetapp/WINGS/ClientApp/src/components/compo/ComponentList.tsx → ClientApp/src/components/compo/ComponentList.tsx

@@ -19,6 +19,7 @@ import { openErrorDialogAction } from '../../redux/ui/actions';
 import ConfirmationDialog from '../common/ConfirmationDialog';
 import EditableInputTableCell from '../common/EditableInputTableCell';
 import EditableSelectTableCell from '../common/EditableSelectTableCell';
+import { apiFetch } from '../../lib/fetch';
 
 const initialValues = {
   name: "",
@@ -53,7 +54,7 @@ const ComponentList = (props: ComponentListProps) => {
   const handleOkClick = async () => {
     if (deleteCompo === null) return;
     try {
-      await fetch(`/api/components/${deleteCompo.id}`, {
+      await apiFetch(`/api/components/${deleteCompo.id}`, {
         method: 'DELETE'
       });
       updateState();
@@ -93,7 +94,7 @@ const ComponentList = (props: ComponentListProps) => {
   const updateComponent = async (i: number) => {
     try {
       const compo = compos[i];
-      const res = await fetch(`/api/components/${compo.id}`, {
+      const res = await apiFetch(`/api/components/${compo.id}`, {
         method: 'PUT',
         headers: {
           'Content-Type': 'application/json',
@@ -128,7 +129,7 @@ const ComponentList = (props: ComponentListProps) => {
 
   const createComponent = async () => {
     try {
-      const res = await fetch(`/api/components`, {
+      const res = await apiFetch(`/api/components`, {
         method: 'POST',
         headers: {
           'Content-Type': 'application/json',

aspnetapp/WINGS/ClientApp/src/components/compo/ComponentManage.tsx → ClientApp/src/components/compo/ComponentManage.tsx

@@ -1,13 +1,14 @@
 import React, { useEffect, useState } from 'react';
 import { Component, ComponentJson } from '../../models';
 import ComponentList from './ComponentList';
+import { apiFetch } from '../../lib/fetch';
 
 const ComponentManage = () => {
   const [compos, setCompos] = useState<Component[]>([]);
 
   const fetchData = async () => {
     try {
-      const response_compo = await fetch('/api/components', {
+      const response_compo = await apiFetch('/api/components', {
         method: 'GET'
       });
       if (response_compo.status === 200) {

aspnetapp/WINGS/ClientApp/src/components/history/OperationHistory.tsx → ClientApp/src/components/history/OperationHistory.tsx

@@ -16,6 +16,7 @@ import DeleteIcon from '@mui/icons-material/Delete';
 import SearchIcon from '@mui/icons-material/Search';
 import { Operation, PaginationMeta } from '../../models';
 import ConfirmationDialog from '../common/ConfirmationDialog';
+import { apiFetch } from '../../lib/fetch';
 
 const sizePerPage = 12;
 
@@ -34,7 +35,7 @@ const OperationHistory = () => {
 
   const fetchOperations = async () => {
     try {
-      const response = await fetch(`/api/operations/history?page=${page}&size=${sizePerPage}&search=${search}`, {
+      const response = await apiFetch(`/api/operations/history?page=${page}&size=${sizePerPage}&search=${search}`, {
         method: 'GET'
       });
       if (response.status == 200) {
@@ -80,7 +81,7 @@ const OperationHistory = () => {
   const handleOkClick = async () => {
     if (deleteOperation === null) return;
     try {
-      const response = await fetch(`/api/operations/${deleteOperation.id}/history`, {
+      const response = await apiFetch(`/api/operations/${deleteOperation.id}/history`, {
         method: 'DELETE'
       });
       if (response.ok) {

aspnetapp/WINGS/ClientApp/src/components/home/Home.tsx → ClientApp/src/components/home/Home.tsx

@@ -6,6 +6,7 @@ import { Operation } from '../../models';
 import { RootState } from '../../redux/store/RootState';
 import { getOpid } from '../../redux/operations/selectors';
 import { leaveOperationAction } from '../../redux/operations/actions';
+import { apiFetch } from '../../lib/fetch';
 
 const Home = () => {
   const dispatch = useDispatch();
@@ -16,7 +17,7 @@ const Home = () => {
 
   const fetchOperations = async () => {
     try {
-      const res = await fetch('/api/operations', {
+      const res = await apiFetch('/api/operations', {
         method: 'GET'
       });
       if (res.status === 200) {

aspnetapp/WINGS/ClientApp/src/components/home/OperationList.tsx → ClientApp/src/components/home/OperationList.tsx

@@ -21,6 +21,7 @@ import { cyan } from "@mui/material/colors";
 import ConfirmationDialog from '../common/ConfirmationDialog';
 import { openErrorDialogAction } from '../../redux/ui/actions';
 import { AppDispatch } from '../../redux/store/store';
+import { apiFetch } from '../../lib/fetch';
 
 export interface OperationListProps {
   operations: Operation[],
@@ -48,7 +49,7 @@ const OperationList = (props: OperationListProps) => {
 
   const handleOk = async () => {
     if (stopOperation === null) return;
-    const res = await fetch(`/api/operations/${stopOperation.id}`, {
+    const res = await apiFetch(`/api/operations/${stopOperation.id}`, {
       method: 'DELETE'
     })
     if (res.status === 204) {

aspnetapp/WINGS/ClientApp/src/components/home/StartOperationArea.tsx → ClientApp/src/components/home/StartOperationArea.tsx

@@ -5,6 +5,7 @@ import RadioBox from '../common/RadioBox';
 import { Component, ComponentJson } from '../../models';
 import { useDispatch } from 'react-redux';
 import { openErrorDialogAction, startLoadingAction, endLoadingAction } from '../../redux/ui/actions';
+import { apiFetch } from '../../lib/fetch';
 
 const getDefaultPathNumber = () => {
   const dt = new Date();
@@ -48,7 +49,7 @@ const StartOperationArea = (props: StartOperationAreaProps) => {
 
   const fetchComponents = async () => {
     try {
-      const res = await fetch('/api/components', {
+      const res = await apiFetch('/api/components', {
         method: 'GET'
       });
       if (res.status === 200) {
@@ -72,7 +73,7 @@ const StartOperationArea = (props: StartOperationAreaProps) => {
 
   const startOperation = async () => {
     dispatch(startLoadingAction());
-    const res = await fetch(`/api/operations`, {
+    const res = await apiFetch(`/api/operations`, {
       method: 'POST',
       headers: {
         'Content-Type': 'application/json'

ClientApp/src/lib/fetch.ts

@@ -0,0 +1,23 @@
+// API設定
+export const API_CONFIG = {
+  baseURL: 'http://localhost:5000',
+};
+
+/**
+ * APIのURLを構築する関数
+ * @param path APIのパス
+ * @returns 完全なAPIのURL
+ */
+export const buildApiUrl = (path: string): string => {
+  return `${API_CONFIG.baseURL}${path.startsWith('/') ? path : `/${path}`}`;
+};
+
+/**
+ * fetchのラッパー関数
+ * @param path APIのパス
+ * @param options fetchのオプション
+ * @returns fetchのPromise
+ */
+export const apiFetch = (path: string, options?: RequestInit): Promise<Response> => {
+  return fetch(buildApiUrl(path), options);
+};