React Expressでのapi取得 ECS上

Question

実現したいこと

• ECS+Fargate上でのReactアプリのデプロイ
• Node.js Expressを使用したapi
• React側からapiを呼び出して表示
• albのドメイン名からアクセスして表示

前提

• localhostで動くことの確認

node index.jsで3100ポートのapiを動かし、axios.get("http://localhost:3100/api");でapiを受け取り表示する簡単なプログラムです。
実際にlocalhost:3000にアクセスすると値の取得ができました。

const express = require("express");
const cors = require("cors");
const app = express();

app.get("/api", (req, res) => {
  const list = [
    {
      id: "1",
      name: "yamada",
    },
    {
      id: "2",
      name: "takahashi",
    },
  ];
  res.json(list);
});

app.listen(3100, () => {
  console.log("Server port 3100 started!");
});

import { useEffect, useState } from "react";
import axios from "axios";
interface Item {
  id: string;
  name: string;
}

function App() {
  const [list, setList] = useState<Item[]>([]);
  useEffect(() => {
    const fetchData = async () => {
      const response = await axios.get("http://localhost:3100/api");
      // const data = await response.json();
      setList(response.data);
    };
    fetchData();

  }, []);
     return (
      <div className="app">
         {list.map((item) => (
        <li key={item.id}>{item.name}</li>
      ))}
  );
}

export default App;

• コンテナ化してデプロイ

ECSの構成は以下のようになっています。ECSの1つのタスク定義でフロントエンドのコンテナとバックエンドのコンテナを設定しています。
それぞれのポートはフロントが80でバックが3100です。

ここで、バックエンド、apiを外部に公開しないのであれば、コンテナ間の通信をしてapiの取得ができるのでしょうか？
（ローカルで動かしたときと同様にコンテナ間の通信であればlocalhost:3100/apiを指定すれば問題ないのでしょうか？）

      const response = await axios.get("http://localhost:3100/api");

コンテナ同士の通信がもしこの構成でできないのであれば、フロントエンドからapiを取得する方法を教えていただきたいです。
apiは公開する必要のないものなので内部的に使えれば十分です。よろしくお願いします。

追記
実際にやってみたのですが、GET http://localhost:3100/api net::ERR_CONNECTION_REFUSEDとエラーが出力されてできませんでした

Comments

[hoshi-takanori]

axios.get はたぶんブラウザ上で動くので、api はブラウザが動いてるユーザーのパソコンやスマホからアクセスできる必要があるような…。

[yuma.inaura]

公開のフロントからリクエストするには公開のバックエンドにするしかないような
少なくとも自分はそう思ってました

[huntas]

お二方ご回答ありがとうございます。
公開しないapiを取得する方法はないのでしょうか？
私はこのページを見て、apiに要求はできると思ったのですが、ムリなのでしょうか・・・
https://aws.amazon.com/jp/blogs/compute/task-networking-in-aws-fargate/

[yuma.inaura]

ちなみに公開したくない理由ってあるんでしょうか？
結局のところは取得したデータってフロントで何らかの形で使われることになりますよね

[huntas]

認証機能をつけないのでできれば公開しないほうがいいのではと考えています

[hoshi-takanori]

「React側からapiを呼び出して表示」とのことですが、React がどこで動くかは把握してますか？ (一般的にはブラウザ上で動きますが、サーバー側で動かすこともできなくはないので…。)