常連

プログラムではなくネットワークの話になるのですがもしご存知の方がいらっしゃれば教えて頂ければと思います。

#環境
当方環境ではモデムとWiFiルーターに異なるセグメントが割当られています。

具体的には下記のような設定です。

* モデム（PR-400NE）：192.168.1.1
* WiFiルーター（NTCM1）：192.168.10.1
* PC：192.168.1.250
* Android端末：192.168.10.101～192.168.10.200

上記のような設定になっており、PCはモデムに有線で繋ぎ、Android端末をWiFiルーターに繋いでいます。

WiFiルーターのWAN側にモデムのLANを接続しています。

当方のやりたいこととしては「PCからWiFiルーターの設定画面を表示する・PCからAndroid端末にて動作しているWebサーバーに接続する」の2点になります。

現在、Android端末からWiFiルーターの設定画面を開くことは出来ますが、PCから開くことは出来ません。

WiFiルーターの設定画面からpingテストが行えたのでモデムとPCにそれぞれpingを送りましたが、こちらは正常に返って来ました。

モデム・PCからWiFiルーターにpingを送りましたが、こちらは全て通りませんでした。

#試したこと1
モデムの「静的ルーティング設定」というものがありましたので、下記のような設定を追加しました。

* 指定方法：宛先IPアドレス指定
* 宛先IPアドレス：192.168.10.0
* ネットマスク：255.255.255.0
* インタフェース：LAN側
* ゲートウェイ：192.168.1.1

この状態でpingを送りましたが返って来ませんでした。

念の為tracertを行ってみたのですが、「192.168.1.1」の次の要求でタイムアウトを起こしていました。

ゲートウェイの設定が悪いのかと思い下記の様に設定してみました。

* 指定方法：宛先IPアドレス指定
* 宛先IPアドレス：192.168.10.0
* ネットマスク：255.255.255.0
* インタフェース：LAN側
* ゲートウェイ：192.168.10.1

この状態でもpingは通りませんでした。

tracertすると「192.168.1.1」の次の要求で外部ネットワークに出ていました。

#試したこと2
WiFiルーターの設定に「IPv4LAN 側設定」があったため、同セグメントに設定しました。

具体的には以下のようにしました。

IPアドレス／ネットマスク
* IPアドレス：192.168.1.50
* ネットマスク：24
DHCPサーバ
* DHCPサーバ機能：ON
* リースタイム：24
* DHCP割当アドレス：192.168.1.51 - 192.168.1.150

設定後ルーターを再起動するとセグメントが「0」になっていました。

設定画面を開くとWAN側との競合が発生したと書かれていました。

#やりたいこと
既に書いておりますが、モデム・PC側からWiFiルーター・Android端末への接続を行いたいです。

どこの設定を変えればよいか、具体的にご教授頂けると幸いです。

#追記
WiFiルーターのユーザーズマニュアルを追記します。
http://www.aterm.jp/function/ntcm1/index.html

「ポートマッピング機能」を使用し、指定ポートを特定ポートへ変換することでWAN側アドレスからAndroid端末のサーバーに接続出来ましたが、Javascriptの読み込み等でエラーになり正常な表示は出来ませんでした。

またWAN側アドレスに対してpingを送信してみましたが、こちらは通りませんでした。

別セグメントに設定されているルーターにpingを通したい

## 初期ネットワーク構成

現在以下の構成になっていたRTXだけにFortiGateを導入しました。
![![イメージ説明](933cb5425079e7a1c19a4e1ec40299e1.jpeg)]

RTX1210 LAN1 IPアドレス 192.168.1.250 /24
にてインターネットをしておりました。

### 前提・実現したいこと①　NATモードにて構成

この状態のネットワークに、Fortigate60Dを導入いたしました。
NATモードか、トランスペアレントモードのどちらで導入するか、どうするか悩んだ末にまずはNATモードにて構成をいたしました。

![イメージ説明](b35ab7cd83c0f535381967c503471820.jpeg)

RTX1210 LAN1 IPアドレス 192.168.1.250 /24
FortiGate 60D Internal IPアドレス 192.168.1.251 /24

ところが、FortiGate側のDHCPリレーにし、RTX側にてDHCPサーバにしたのですが、
ネット接続ができません。
試しにスタティックルートを書いてみましたが通信ができませんでした。
このような構成ではデフォルトゲートウェイを必ずFortiGateに向ける必要があるのでしょうか？
PCからFortiGateまでの192.168.1.251にはPingが飛びます。

### 以下構成でネット接続はできる事は確認。

FortiGateへDHCPサーバーを設けて、RTXをDHCPリレーにしたところ、問題なくネット接続を
できる事を確認しました。

![イメージ説明](4897466d776ab7188f820dd17eb625b4.jpeg)

RTX1210 LAN1 IPアドレス 192.168.1.250 /24
FortiGate 60D Internal IPアドレス 192.168.1.251 /24

### 前提・実現したいこと②　トランスペアレントモードにて構成

トランスペアレントモードにて現状の構成を崩さず以下を構成も考えておりますが、
トランスペアレントモードはL2レベルでのトラフィック制御ということになると思いますが、
RTX 配下へ設置する事になると思い、考えられるのは既存のネットワーク構成を変更することなく、挟むだけで導入可能にし
DMZのセグメントを分けたくない場合も有効になるメリット面はありますが、デメリットや出来なくなることはないのでしょうか？

![イメージ説明](81808b3c4880cbb674d476649dbab418.jpeg)

RTX1210 LAN1 IPアドレス 192.168.1.250 /24
FortiGate 60D Internal IPアドレス 192.168.1.251 /24

###疑問点まとめ

1.RTXとFortigate（NATモード）を併用で使用する場合は、デフォルトゲートウェイを必ずFortiGateに向ける必要があるのでしょうか？
　RTXにDHCPサーバをさせる事をさせる事はできないものなのでしょうか？

2.トランスペアレントモードにすると、NATモードに比べるとできなくなることやデメリット面はあるのでしょうか？

3.RTXのL2TP/IPsecVPNではなく、FortiVPN Clientを優先的に使用したいと思うと、NATモードでないと機能しないでしょうか？

当方、初歩的な事も書かれていると思いますが、特にVLANを切っている構成ではございません。
前提・実現したいこと①　NATモードにて構成
前提・実現したいこと②　トランスペアレントモードにて構成　にて同様にも扱えるようにご教授頂けますと幸いです。

よろしくお願いいたします。

FortiGateとRTX環境のネットワーク配置について

この画像にあるように、ルーターの「Fa0/0」と「S0/0」の違いが分かりません。それぞれどんな役割なのでしょうか？また、「S0/0」のところを「Fa0/0」で繋いではいけないのでしょうか？

よろしくお願い致します。

![イメージ説明](a35cc8816a18a081e9f3f79d979aae62.jpeg)

![イメージ説明](0c56d5613177c0b787a4b2ddfc174ffd.png)

ルーターのインターフェースについて

### 実現したいこと
Fortigate で異なるAS間でのBGPルーティングを行いたい


### 現状
現在は、検証中で同一AS内でのピアは確立できることを確認しました。
でも、異なるAS間でのピアが確立できません。

AS間(異なるAS間)でBGPでルーティングする場合、ピア確立時にBGP Openメッセージで自分のAS番号を通知しますが、ピア同士が異なるAS番号の場合、自動的にEBGPでピア確立されるのが普通、という理解でよろしいのでしょうか？
下記のようなメッセージが表示され、TCPセッションが終了し、ピアが確立できませんでした。
AS100と200間でのピア確立時にAS100側のFortigateに表示されたエラーメッセージ
メッセージ：
BGP: 10.1.0.2-Outgoing[DECODE] Open: Bad RemoteAS(200), expected 100

ちなみに、ルータ同士は直結です。(したがってTTLの変更の必要はないと思います。)
Fortigateの設定上でEBGP/IBGPを明示的に設定する必要があるのでしょうか？

よろしくお願いいたします。



Fortgate ルータでのEBGPのピア確立に関して

### 前提
React-Routerでページ遷移を実装している

### 実現したいこと
戻るボタンで前のページに戻った時に検知してイベント発火→ページを再読み込みしたい

### 発生している問題・エラーメッセージ
addEventListenerを使った方法は見つけたがレンダリングが多くなってしまう
せっかくReactを使用しているのでReact-Routerを使用した方法はないのか

### 該当のソースコード

```
  window.addEventListener('popstate',e=>{
 　　console.log('レンダリング')
       window.location.reload();
    })
});
```

### 試したこと
addEventListenerを使用した方法しか記事がなかった




React ブラウザの戻るボタンを検知したい

### 前提
ボタンをクリックした時にonClickで関数を呼び出しreact-router-domを使ってページ遷移させたいです。

### 発生している問題・エラーメッセージ
クリックしてもなにも起こりません。
コンソールにもエラーはありません。

### 該当のソースコード

App5.jsx
```
import { Link } from "react-router-dom";

function App5() {

// ここの関数でページ遷移を実行したい
const aaa=()=>{
<Link to={`/register/`}>こちら</Link>
}

    return(
        <>
        <h1>ホーム</h1>
<button onClick={aaa}>クリック</button>
        </>    
    )
}
```
register.jsx
```
import { Link } from "react-router-dom";

const Register = () => {
  return (
    <>
      <h1>新規登録ページ</h1>
      <div>
        <Link to={`/`}>ホームに戻る</Link>
      </div>
    </>
  );
};

export default Register;
```
main.jsx
```
import React from 'react'
import ReactDOM from 'react-dom'

import App5 from './router/App5'
import Register from './router/register'
import { BrowserRouter, Routes, Route } from "react-router-dom";

ReactDOM.render(

    <BrowserRouter>
    <Routes>
      <Route path={`/`} element={<App5 />} />
      <Route path={`/register/`} element={<Register />} />
    </Routes>
  </BrowserRouter>,
  document.getElementById('root')
)
```

### 試したこと

関数の中で戻るボタンの実装方法はありましたが特定のページへ遷移させる方法が見つかりませんでした。

### 補足情報（FW/ツールのバージョンなど）

react ver.18


Reactでボタンをクリックしたときにページ遷移させたい

## 事象

- TLS Handshake で失敗する場合、しない場合があり、Webページが表示されない。
- 携帯が２台あり、どちらもSIMの回線を使用し、Webページにアクセスすると、片方は成功、片方は失敗
- 成功している場合は１回の応答でServer Hello, Change Cipher Spec, Encrypted Handshake Messgeをまとめて送信しています。対するACKも１回のみです。
- 完全に見れないのであればFirewall設定を疑いましたが、片方は見れている状態です。
- tcpdump(& wireshark) で見た限り、以下に挙げる状態のときはTCP retransmission が発生して結果的にブラウザではタイムアウトとなるようです。(wireshark から抜粋)
- TCP Out-Of-Order 時にWireshark では (reassembly error, protocol TCP: New fragment overlaps old data) が出ています。

|No.|Src|Dest|Proto|Info|
|:--|:--:|--:|
|1|Internet|HAProxy|TCP|xxx -> 443 SYN|
|2|HAProxy|Internet|TCP|443 -> xxx SYN,ACK|
|3|Internet|HAProxy|TCP|ACK|
|4|HAProxy|HOST[123]|TCP|yyy -> 30397 SYN|
|5|HOST[123]|HAProxy|TCP|30397 -> yyy SYN,ACK|
|6|HAProxy|HOST[123]|TCP|yyy -> 30397 ACK|
|7|Internet|HAProxy|TLS1.2|Client Hello|
|8|HAProxy|Internet|TCP|443 -> xxx ACK|
|9|HAProxy|HOST[123]|TLS1.2|Client Hello|
|10|HOST[123]|HAProxy|TCP|30397 -> yyy ACK|
|11|HOST[123]|HAProxy|TLS1.2|Server Hello|
|12|HOST[123]|HAProxy|TLS1.2|Certificate(TCP segment of a reassembled PDU)|
|13|HOST[123]|HAProxy|TLS1.2|Server Key Exchange, Server Hello Done|
|14|HAProxy|HOST[123]|TCP|yyy -> 30397 ACK|
|15|HAProxy|HOST[123]|TCP|yyy -> 30397 ACK|
|16|HAProxy|HOST[123]|TCP|yyy -> 30397 ACK|
|17|HAProxy|Internet|TLS1.2|Server Hello|
|18|HAProxy|Internet|TLS1.2|Certificate(TCP segment of a reassembled PDU)|
|19|HAProxy|Internet|TLS1.2|Server Key Exchange, Server Hello Done|
|20|HAProxy|Internet|TCP|[TCP Out-Of-Order] 443 -> xxx ACK|
|21|HAProxy|Internet|TCP|[TCP Out-Of-Order] 443 -> xxx ACK|
|22|HAProxy|Internet|TCP|[TCP Retransmission] 443 -> xxx ACK|

... 以下Retransmissionが続く


## 質問

- 原因となっている場所はどこでしょうか
- 何を他に試せばよいでしょうか
- 何を直せば良いでしょうか 

## 前提

現在、自宅にてサーバをたてて検証環境を作っています。

### Kubernetes

- Host 1-3 で動作
- Port 30397（仮） でHTTPSリクエストを受けています。
- Port 30402（仮） でHTTPリクエストを受けています。
- NGINX ingress Controller & cert-manager でワイルドカード証明書を発行しています (www, *)
- L7 バランシング

### Haproxy

- TCP Mode
- 80, 443 Listen
- 80 -> 30402(仮） Forward
- 443 -> 30397(仮） Forward
- Docker-composeでRaspberry-pi上で動作
- HOST 1-3にL4 バランシング

### Router

- ルーターに仮想サーバ機能があるので80, 443 Open
- 80 -> HAProxy(80) Forward
- 443 -> HAProxy(443) Forward

## 構成
```
      (Internet)
          ↕
       [Router]
          ↕
    [Raspberry Pi] 
    ↕     ↕     ↕
[Host1] [Host2] [Host3]
```

### MW

1. Raspberry Pi: HAProxy(TCP Mode)
2. Host[1-3]: Kubernetes Worker(Master がいますがHaproxyから飛ばしていないので略します）

## 補足

L３レベルの話やNetworkに疎く、TCPやTLSの仕組みに詳しくないので素人構成ですが、なにかヒントをいただけると幸いです。

TLS 接続が成功する場合としない場合があります。(ERR: TCP retransmission?)

React-Router V6に更新したのですが、useNavigateはRouterを使わないとダメだと言われたので、
利用箇所をRouterで囲ったのですが、下記エラーが取れず困っております。
タイトルの通り不明点はRouterをどこに設定するかになります。

**Uncaught Error: useNavigate() may be used only in the context of a <Router> component.
**

ヘッダーのメニュー部分で認証画面に飛ばしたいので、ヘッダー関連のindex.tsx内でuseNavigateを使う
HeaderMenuをRouterで囲みましたがダメで、menu.tsxも囲ってみましたが変化ありませんでした。

```ここに言語を入力
index.tsx

const Header: FC<Props> = ({ openDialog }) => {
  const [open, setOpen] = useState(false);

  return (
    <header css={wrapperStyle}>
      <a css={anchorStyle} href="/lp.html">
        <img css={imageStyle} src="/images/logo_white.png" />
      </a>
      <div css={menuStyle}>
        <button
          css={menuButtonStyle}
          onClick={() => {
            setOpen(true);
          }}
        >
          <i className="material-icons" css={menuIconStyle}>
            menu
          </i>
        </button>
        <BrowserRouter>
          {open ? (
            <HeaderMenu onClick={setOpen} openDialog={openDialog} />
          ) : null}
        </BrowserRouter>
      </div>
    </header>
  );
};
```


```ここに言語を入力
menu.tsx

import { useNavigate, BrowserRouter as Router, Routes } from "react-router-dom";
　　・
　　・
　　・
  const navigate = useNavigate();
  const handleOnClickMoveLogin = () => {
    navigate("auth/home");
  };

  return (
    <Router>
      <Routes>
        <ul css={menuStlye}>
          <li css={menuListStyle}>
            <button css={menuButtonStyle} onClick={handleOnClickCreateRoom}>
              フライト作成
            </button>
            <button css={menuButtonStyle} onClick={handleOnClickMoveLogin}>
              ログイン/サインイン
            </button>
            <button css={menuButtonStyle}>フライト検索</button>
            <button css={menuButtonStyle}>マイページ</button>
            <button css={menuButtonStyle}>プレミアム</button>
          </li>
        </ul>
      </Routes>
    </Router>
  );
};
```

そもそもソースコード全体に影響するのかと思い、上記箇所のRouterも含め削除しmain.tsxのみBrowserRouterで囲ったのですが、
今度は以下のエラーになります。

Uncaught Error: [undefined] is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment>

```ここに言語を入力
main.tsx

(async () => {
  log(`${name} v${version}`);
  document.title += ` v${version}`;

  render(
    <React.StrictMode>
      <Global styles={globalStyle} />
      <BrowserRouter>
        <App />
      </BrowserRouter>
    </React.StrictMode>,
    document.getElementById("contents")
  );
})().catch((err) => console.error(err));
```

React-Router関連のディレクトリ構造は以下になるのですが、
この場合、どこをRouterで囲えば良いのでしょうか？？

```ここに言語を入力
srcーauthーHome
　　　　　　　　　　　　　　　ーSigninなど
　　　　　ーlpーheaderーindex
　　　　　　　　　　　　　　　　　　　　　　　　ーmenu
　　　　　　　　　　　ーmain
　　　　　　　　　　　ーapp
　　　　　ーrouterーrouterなど

```