Merge pull request #4 from miutaku/develop

frontendを用意した。
miutaku · Jan 26, 2025 · c061cfe · c061cfe
2 parents d372657 + 277295c
commit c061cfe
Show file tree

Hide file tree

Showing 82 changed files with 10,430 additions and 21 deletions.
diff --git a/.env_sample b/.env_sample
@@ -12,3 +12,5 @@ DB_PASSWORD=$POSTGRES_PASSWORD
 DB_NAME=$POSTGRES_DB
 DB_TABLE_NAME=speakers
 TZ=Asia/Tokyo
+
+NEXT_PUBLIC_API_BASE="http://your-backend-server-ip-or-fqdn:8888" # frontendからもアクセス元のクライアントマシンからも同じ値でのアクセスとなる
diff --git a/.github/workflows/manage-frontend-docker-build.yml b/.github/workflows/manage-frontend-docker-build.yml
@@ -0,0 +1,34 @@
+---
+name: manage-twitcasting frontend docker build
+on:
+  push:
+    branches:
+      - develop
+    paths:
+      - 'manage-frontend/**'
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check out code
+        uses: actions/checkout@v4
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+
+      - name: create meta
+        id: meta
+        uses: docker/metadata-action@v5
+        with:
+          images: ghcr.io/${{ github.actor }}/manage-frontend-rec-twitcasting
+          tags: |
+            type=raw,value=latest
+            type=sha,prefix=,suffix=,format=short
+
+      - name: Build container image
+        uses: docker/build-push-action@v5
+        with:
+          file: ./manage-backend/Dockerfile
+          push: false
+          platforms: linux/amd64,linux/arm64
diff --git a/.github/workflows/manage-frontend-docker-push.yml b/.github/workflows/manage-frontend-docker-push.yml
@@ -0,0 +1,44 @@
+---
+name: manage-twitcasting frontend docker push
+on:
+  push:
+    branches:
+      - main
+    paths:
+      - 'manage-frontend/**'
+
+jobs:
+  push:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check out code
+        uses: actions/checkout@v4
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+
+      - name: Log in to ghcr.io
+        uses: docker/login-action@v3
+        with:
+          registry: ghcr.io
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: create image meta
+        id: meta
+        uses: docker/metadata-action@v5
+        with:
+          images: ghcr.io/${{ github.actor }}/manage-frontend-rec-twitcasting
+          tags: |
+            type=raw,value=latest
+            type=sha,prefix=,suffix=,format=short
+
+      - name: push container image
+        uses: docker/build-push-action@v5
+        with:
+          file: ./manage-frontend/Dockerfile
+          push: true
+          tags: ${{ steps.meta.outputs.tags }}
+          platforms: linux/amd64,linux/arm64
+          cache-from: type=gha
+          cache-to: type=gha,mode=max
diff --git a/README.md b/README.md
@@ -13,16 +13,18 @@ This application is for recording live streams being broadcasted on twitcasting.
 docker compose up -d
 ```
 
+access to `http://<your-server>:3000`
+
 # API key
 
 You can get the API key from the official page [here](https://twitcasting.tv/developerapp.php).
 
-# Setting env
+# Diagram
 
-If you do not want to run it with Docker, set the environment variables.
+![Docker Compose Diagram](docker-compose.drawio.png)
 
-```shell
-export TWITCASTING_CLIENT_ID=<YOUR_ID>
-export TWITCASTING_CLIENT_SECRET=<YOUR_SECRET>
-export OUTPUT_DIR=<YOUR_RECORDING_DIR_PATH> # if not set, default parameter (./recorded)
-```
+`k8s.drawio` is a conceptual diagram for Kubernetes support that we plan to add in the future.
+
+# License
+
+This project is licensed under the MIT License. See the [LICENSE](LICENSE) file for details.
diff --git a/docker-compose.drawio b/docker-compose.drawio
@@ -0,0 +1,140 @@
+<mxfile host="app.diagrams.net" agent="Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36" version="26.0.8">
+  <diagram name="ページ1" id="Ap2iEM6SN3KxYLHmplYN">
+    <mxGraphModel dx="2878" dy="1086" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="827" pageHeight="1169" math="0" shadow="0">
+      <root>
+        <mxCell id="0" />
+        <mxCell id="1" parent="0" />
+        <mxCell id="17p_4jpaIdI8gEVZot0U-15" value="" style="group" parent="1" vertex="1" connectable="0">
+          <mxGeometry x="840" y="47.84313725490199" width="539" height="740" as="geometry" />
+        </mxCell>
+        <mxCell id="17p_4jpaIdI8gEVZot0U-13" value="" style="group" parent="17p_4jpaIdI8gEVZot0U-15" vertex="1" connectable="0">
+          <mxGeometry width="539" height="740" as="geometry" />
+        </mxCell>
+        <mxCell id="17p_4jpaIdI8gEVZot0U-25" value="rec-api container" style="text;html=1;align=center;verticalAlign=middle;resizable=0;points=[];autosize=1;strokeColor=none;fillColor=none;" parent="17p_4jpaIdI8gEVZot0U-13" vertex="1">
+          <mxGeometry x="85" y="225.0901960784314" width="110" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="17p_4jpaIdI8gEVZot0U-49" value="" style="rounded=1;whiteSpace=wrap;html=1;" parent="17p_4jpaIdI8gEVZot0U-13" vertex="1">
+          <mxGeometry x="40" y="490" width="210" height="178.23" as="geometry" />
+        </mxCell>
+        <mxCell id="17p_4jpaIdI8gEVZot0U-53" value="manage containers" style="text;html=1;align=center;verticalAlign=middle;resizable=0;points=[];autosize=1;strokeColor=none;fillColor=none;" parent="17p_4jpaIdI8gEVZot0U-13" vertex="1">
+          <mxGeometry x="72.75" y="666.9268627450981" width="130" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="17p_4jpaIdI8gEVZot0U-114" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;dashed=1;" parent="17p_4jpaIdI8gEVZot0U-13" source="17p_4jpaIdI8gEVZot0U-56" target="17p_4jpaIdI8gEVZot0U-71" edge="1">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="17p_4jpaIdI8gEVZot0U-56" value="" style="shape=image;html=1;verticalAlign=top;verticalLabelPosition=bottom;labelBackgroundColor=#ffffff;imageAspect=0;aspect=fixed;image=https://cdn0.iconfinder.com/data/icons/social-media-2104/24/social_media_social_media_logo_docker-128.png" parent="17p_4jpaIdI8gEVZot0U-13" vertex="1">
+          <mxGeometry x="81" y="569.8590196078432" width="48" height="48" as="geometry" />
+        </mxCell>
+        <mxCell id="17p_4jpaIdI8gEVZot0U-70" value="frontend" style="text;html=1;align=center;verticalAlign=middle;resizable=0;points=[];autosize=1;strokeColor=none;fillColor=none;" parent="17p_4jpaIdI8gEVZot0U-13" vertex="1">
+          <mxGeometry x="70" y="606.926862745098" width="70" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="17p_4jpaIdI8gEVZot0U-71" value="" style="shape=image;html=1;verticalAlign=top;verticalLabelPosition=bottom;labelBackgroundColor=#ffffff;imageAspect=0;aspect=fixed;image=https://cdn0.iconfinder.com/data/icons/social-media-2104/24/social_media_social_media_logo_docker-128.png" parent="17p_4jpaIdI8gEVZot0U-13" vertex="1">
+          <mxGeometry x="171" y="569.8590196078432" width="48" height="48" as="geometry" />
+        </mxCell>
+        <mxCell id="17p_4jpaIdI8gEVZot0U-72" value="backend" style="text;html=1;align=center;verticalAlign=middle;resizable=0;points=[];autosize=1;strokeColor=none;fillColor=none;" parent="17p_4jpaIdI8gEVZot0U-13" vertex="1">
+          <mxGeometry x="160" y="606.926862745098" width="70" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="17p_4jpaIdI8gEVZot0U-84" value="" style="group" parent="17p_4jpaIdI8gEVZot0U-13" vertex="1" connectable="0">
+          <mxGeometry x="40" y="285.1" width="304.0954545454546" height="183.14" as="geometry" />
+        </mxCell>
+        <mxCell id="17p_4jpaIdI8gEVZot0U-86" value="" style="rounded=1;whiteSpace=wrap;html=1;" parent="17p_4jpaIdI8gEVZot0U-84" vertex="1">
+          <mxGeometry width="209.0909090909091" height="153.14102598419043" as="geometry" />
+        </mxCell>
+        <mxCell id="17p_4jpaIdI8gEVZot0U-97" value="batch container" style="text;html=1;align=center;verticalAlign=middle;resizable=0;points=[];autosize=1;strokeColor=none;fillColor=none;" parent="17p_4jpaIdI8gEVZot0U-84" vertex="1">
+          <mxGeometry x="47.72727272727273" y="153.1392612348513" width="110" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="17p_4jpaIdI8gEVZot0U-104" value="&lt;font style=&quot;font-size: 9px;&quot;&gt;SELECT name&amp;nbsp;&lt;/font&gt;&lt;div&gt;&lt;font style=&quot;font-size: 9px;&quot;&gt;&lt;font style=&quot;background-color: transparent; color: light-dark(rgb(0, 0, 0), rgb(255, 255, 255));&quot;&gt;FROM twitcasting.&lt;/font&gt;&lt;font style=&quot;background-color: transparent; color: light-dark(rgb(0, 0, 0), rgb(255, 255, 255));&quot;&gt;speakers&amp;nbsp;&lt;/font&gt;&lt;/font&gt;&lt;/div&gt;&lt;div&gt;&lt;font style=&quot;background-color: transparent; color: light-dark(rgb(0, 0, 0), rgb(255, 255, 255)); font-size: 9px;&quot;&gt;WHERE recording_state=false&lt;/font&gt;&lt;/div&gt;" style="text;html=1;align=left;verticalAlign=middle;resizable=0;points=[];autosize=1;strokeColor=none;fillColor=none;" parent="17p_4jpaIdI8gEVZot0U-84" vertex="1">
+          <mxGeometry x="126.72545454545454" y="17.05700627736236" width="150" height="60" as="geometry" />
+        </mxCell>
+        <mxCell id="3h0nLJYQ_S2lUMBBd0ub-7" value="" style="shape=image;html=1;verticalAlign=top;verticalLabelPosition=bottom;labelBackgroundColor=#ffffff;imageAspect=0;aspect=fixed;image=https://cdn0.iconfinder.com/data/icons/social-media-2104/24/social_media_social_media_logo_docker-128.png" parent="17p_4jpaIdI8gEVZot0U-84" vertex="1">
+          <mxGeometry x="70" y="48.2" width="56.73" height="56.73" as="geometry" />
+        </mxCell>
+        <mxCell id="3h0nLJYQ_S2lUMBBd0ub-8" value="&lt;span class=&quot;AppHeader-context-item-label&quot; style=&quot;box-sizing: border-box; display: inline-block; overflow: hidden; text-overflow: ellipsis; text-wrap-mode: nowrap;&quot;&gt;&lt;font style=&quot;color: rgb(0, 0, 0); font-size: 11px;&quot;&gt;batch-rec-twitcasting&lt;/font&gt;&lt;/span&gt;" style="text;html=1;align=center;verticalAlign=middle;resizable=0;points=[];autosize=1;strokeColor=none;fillColor=none;" parent="17p_4jpaIdI8gEVZot0U-84" vertex="1">
+          <mxGeometry x="42.72999999999999" y="97.05686274509799" width="120" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="17p_4jpaIdI8gEVZot0U-119" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0.25;entryY=0;entryDx=0;entryDy=0;exitX=1;exitY=0.5;exitDx=0;exitDy=0;dashed=1;" parent="17p_4jpaIdI8gEVZot0U-13" source="17p_4jpaIdI8gEVZot0U-19" target="17p_4jpaIdI8gEVZot0U-71" edge="1">
+          <mxGeometry relative="1" as="geometry">
+            <Array as="points">
+              <mxPoint x="-60" y="138" />
+              <mxPoint x="-60" y="542" />
+              <mxPoint x="183" y="542" />
+            </Array>
+          </mxGeometry>
+        </mxCell>
+        <mxCell id="17p_4jpaIdI8gEVZot0U-17" value="" style="rounded=1;whiteSpace=wrap;html=1;" parent="17p_4jpaIdI8gEVZot0U-13" vertex="1">
+          <mxGeometry x="40" y="72.16137254901963" width="200" height="153.13725490196077" as="geometry" />
+        </mxCell>
+        <mxCell id="17p_4jpaIdI8gEVZot0U-19" value="" style="shape=image;html=1;verticalAlign=top;verticalLabelPosition=bottom;labelBackgroundColor=#ffffff;imageAspect=0;aspect=fixed;image=https://cdn0.iconfinder.com/data/icons/social-media-2104/24/social_media_social_media_logo_docker-128.png" parent="17p_4jpaIdI8gEVZot0U-13" vertex="1">
+          <mxGeometry x="71" y="113.78901960784316" width="48" height="48" as="geometry" />
+        </mxCell>
+        <mxCell id="17p_4jpaIdI8gEVZot0U-69" value="&lt;span class=&quot;AppHeader-context-item-label&quot; style=&quot;box-sizing: border-box; display: inline-block; overflow: hidden; text-overflow: ellipsis; text-wrap-mode: nowrap;&quot;&gt;&lt;font style=&quot;color: rgb(0, 0, 0); font-size: 11px;&quot;&gt;api-rec-twitcasting&lt;/font&gt;&lt;/span&gt;" style="text;html=1;align=center;verticalAlign=middle;resizable=0;points=[];autosize=1;strokeColor=none;fillColor=none;" parent="17p_4jpaIdI8gEVZot0U-13" vertex="1">
+          <mxGeometry x="40" y="153.666862745098" width="110" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="17p_4jpaIdI8gEVZot0U-92" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;dashed=1;entryX=0;entryY=0.75;entryDx=0;entryDy=0;exitX=0;exitY=0.5;exitDx=0;exitDy=0;" parent="17p_4jpaIdI8gEVZot0U-13" source="3h0nLJYQ_S2lUMBBd0ub-7" target="17p_4jpaIdI8gEVZot0U-17" edge="1">
+          <mxGeometry relative="1" as="geometry">
+            <mxPoint x="40" y="132.156862745098" as="targetPoint" />
+            <Array as="points">
+              <mxPoint x="-30" y="362" />
+              <mxPoint x="-30" y="187" />
+            </Array>
+            <mxPoint x="113.27590909090895" y="351.99019607843127" as="sourcePoint" />
+          </mxGeometry>
+        </mxCell>
+        <mxCell id="17p_4jpaIdI8gEVZot0U-94" value="&lt;font style=&quot;font-size: 10px;&quot;&gt;・addCastingUser&lt;/font&gt;&lt;div&gt;&lt;span style=&quot;font-size: 10px;&quot;&gt;・delCastingUser&lt;br&gt;&lt;/span&gt;&lt;div&gt;&lt;font style=&quot;font-size: 10px;&quot;&gt;・checkRecordingState&lt;/font&gt;&lt;/div&gt;&lt;div&gt;&lt;font style=&quot;font-size: 10px;&quot;&gt;・updateRecordingState&lt;/font&gt;&lt;/div&gt;&lt;/div&gt;" style="text;html=1;align=left;verticalAlign=middle;resizable=0;points=[];autosize=1;strokeColor=none;fillColor=none;rotation=0;" parent="17p_4jpaIdI8gEVZot0U-13" vertex="1">
+          <mxGeometry x="300" y="522.156862745098" width="130" height="70" as="geometry" />
+        </mxCell>
+        <mxCell id="17p_4jpaIdI8gEVZot0U-103" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;dashed=1;entryX=0;entryY=0.5;entryDx=0;entryDy=0;" parent="17p_4jpaIdI8gEVZot0U-13" source="3h0nLJYQ_S2lUMBBd0ub-7" target="3h0nLJYQ_S2lUMBBd0ub-2" edge="1">
+          <mxGeometry relative="1" as="geometry">
+            <mxPoint x="172.80822506815048" y="369.13296930334434" as="sourcePoint" />
+            <mxPoint x="355" y="370.0901960784314" as="targetPoint" />
+          </mxGeometry>
+        </mxCell>
+        <mxCell id="17p_4jpaIdI8gEVZot0U-81" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;dashed=1;dashPattern=8 8;exitX=1;exitY=0.5;exitDx=0;exitDy=0;" parent="17p_4jpaIdI8gEVZot0U-13" source="17p_4jpaIdI8gEVZot0U-71" target="3h0nLJYQ_S2lUMBBd0ub-1" edge="1">
+          <mxGeometry relative="1" as="geometry">
+            <Array as="points">
+              <mxPoint x="270" y="594" />
+              <mxPoint x="430" y="594" />
+            </Array>
+            <mxPoint x="447" y="411.77686274509813" as="targetPoint" />
+          </mxGeometry>
+        </mxCell>
+        <mxCell id="17p_4jpaIdI8gEVZot0U-120" value="&lt;font style=&quot;font-size: 10px;&quot;&gt;/update-recording-state?username=user&amp;amp;recording_state=&amp;lt;true/false&amp;gt;&lt;/font&gt;" style="text;html=1;align=center;verticalAlign=middle;resizable=0;points=[];autosize=1;strokeColor=none;fillColor=none;rotation=-90;" parent="17p_4jpaIdI8gEVZot0U-13" vertex="1">
+          <mxGeometry x="-245" y="324.696862745098" width="340" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="3h0nLJYQ_S2lUMBBd0ub-1" value="db container" style="text;html=1;align=center;verticalAlign=middle;resizable=0;points=[];autosize=1;strokeColor=none;fillColor=none;" parent="17p_4jpaIdI8gEVZot0U-13" vertex="1">
+          <mxGeometry x="385" y="438.2401960784314" width="90" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="3h0nLJYQ_S2lUMBBd0ub-2" value="" style="rounded=1;whiteSpace=wrap;html=1;" parent="17p_4jpaIdI8gEVZot0U-13" vertex="1">
+          <mxGeometry x="330" y="285.10137254901963" width="200" height="153.13725490196077" as="geometry" />
+        </mxCell>
+        <mxCell id="3h0nLJYQ_S2lUMBBd0ub-3" value="" style="shape=image;html=1;verticalAlign=top;verticalLabelPosition=bottom;labelBackgroundColor=#ffffff;imageAspect=0;aspect=fixed;image=https://cdn0.iconfinder.com/data/icons/social-media-2104/24/social_media_social_media_logo_docker-128.png" parent="17p_4jpaIdI8gEVZot0U-13" vertex="1">
+          <mxGeometry x="406" y="331.05901960784314" width="48" height="48" as="geometry" />
+        </mxCell>
+        <mxCell id="3h0nLJYQ_S2lUMBBd0ub-4" value="&lt;span class=&quot;AppHeader-context-item-label&quot; style=&quot;box-sizing: border-box; display: inline-block; overflow: hidden; text-overflow: ellipsis; text-wrap-mode: nowrap;&quot;&gt;&lt;font style=&quot;color: rgb(0, 0, 0); font-size: 11px;&quot;&gt;postgresql&lt;/font&gt;&lt;/span&gt;" style="text;html=1;align=center;verticalAlign=middle;resizable=0;points=[];autosize=1;strokeColor=none;fillColor=none;" parent="17p_4jpaIdI8gEVZot0U-13" vertex="1">
+          <mxGeometry x="395" y="370.936862745098" width="70" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="3h0nLJYQ_S2lUMBBd0ub-5" value="local storage" style="whiteSpace=wrap;html=1;verticalAlign=top;labelBackgroundColor=#ffffff;" parent="17p_4jpaIdI8gEVZot0U-13" vertex="1">
+          <mxGeometry x="150" y="116.68" width="60" height="42.21" as="geometry" />
+        </mxCell>
+        <mxCell id="3h0nLJYQ_S2lUMBBd0ub-6" value="" style="edgeStyle=none;curved=1;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;fontSize=12;startSize=8;endSize=8;" parent="17p_4jpaIdI8gEVZot0U-13" source="17p_4jpaIdI8gEVZot0U-19" target="3h0nLJYQ_S2lUMBBd0ub-5" edge="1">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="17p_4jpaIdI8gEVZot0U-79" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;strokeWidth=3;" parent="1" source="17p_4jpaIdI8gEVZot0U-78" target="17p_4jpaIdI8gEVZot0U-56" edge="1">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="17p_4jpaIdI8gEVZot0U-78" value="" style="shape=actor;whiteSpace=wrap;html=1;" parent="1" vertex="1">
+          <mxGeometry x="687" y="611.7" width="40" height="60" as="geometry" />
+        </mxCell>
+        <mxCell id="17p_4jpaIdI8gEVZot0U-80" value="User" style="text;html=1;align=center;verticalAlign=middle;resizable=0;points=[];autosize=1;strokeColor=none;fillColor=none;" parent="1" vertex="1">
+          <mxGeometry x="682" y="668" width="50" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="17p_4jpaIdI8gEVZot0U-111" value="access" style="text;html=1;align=center;verticalAlign=middle;resizable=0;points=[];autosize=1;strokeColor=none;fillColor=none;" parent="1" vertex="1">
+          <mxGeometry x="767" y="606.7" width="60" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="17p_4jpaIdI8gEVZot0U-95" value="&lt;font style=&quot;font-size: 10px;&quot;&gt;/check-live?username=user&lt;/font&gt;" style="text;html=1;align=center;verticalAlign=middle;resizable=0;points=[];autosize=1;strokeColor=none;fillColor=none;rotation=-90;" parent="1" vertex="1">
+          <mxGeometry x="720.0045454545455" y="302.9388011959892" width="150" height="30" as="geometry" />
+        </mxCell>
+      </root>
+    </mxGraphModel>
+  </diagram>
+</mxfile>
diff --git a/docker-compose.drawio.png b/docker-compose.drawio.png
diff --git a/docker-compose.yml b/docker-compose.yml
@@ -11,8 +11,6 @@ services:
     volumes:
       - ./recorded:/root/recorded
 #      - /your/path/to/dir:./recorded
-    ports:
-      - 18080:8080
     env_file:
       - .env
 
@@ -48,15 +46,17 @@ services:
       - .env
 
 # manage
-#  manage-frontend-rec-twitcasting:
-#    #image: ghcr.io/miutaku/manage-frontend-rec-twitcasting:latest
-#    build:
-#      context: .
-#      dockerfile: manage-frontend/Dockerfile
-#    container_name: manage-frontend-rec-twitcasting
-#    restart: unless-stopped
-#    ports:
-#      - 8888:8888
+  manage-frontend-rec-twitcasting:
+    image: ghcr.io/miutaku/manage-frontend-rec-twitcasting:latest
+    #build:
+    #  context: manage-frontend
+    #  dockerfile: Dockerfile
+    container_name: manage-frontend-rec-twitcasting
+    restart: unless-stopped
+    ports:
+      - 3000:3000
+    env_file:
+      - .env
 
   manage-backend-rec-twitcasting:
     image: ghcr.io/miutaku/manage-backend-rec-twitcasting:latest
@@ -66,6 +66,6 @@ services:
     container_name: manage-backend-rec-twitcasting
     restart: unless-stopped
     ports:
-      - 18888:8888
+      - 8888:8888
     env_file:
       - .env