Merge pull request #47 from saitamau-maximum/development

Release: v1.0.0

README.md

@@ -28,3 +28,20 @@ MaximumメンバーがWeb研究部の活動として、Twitterのようなマイ
 3. `cp .env.example .env`で.envファイルを作成
 4. `.env`ファイルを自分の好きな名前やパスワードに書き換え
 5. `./scripts/setup.sh` でビルドしてコンテナを起動する
+
+### 停止
+
+`./scripts/stop.sh` でコンテナを停止する
+
+### 再開
+
+`./scripts/start.sh` でコンテナを再開する
+
+### DBデータの削除
+
+`./scripts/reset-db.sh` でDBデータを削除する
+
+### デプロイ
+
+`./scripts/deploy.sh` で本番環境にデプロイする
+（マイグレーションなど特別なオペレーションが必要な場合もある）

backend/main.go

@@ -18,7 +18,8 @@ type Handler struct {
 }
 
 var (
-	SQL_PATH = "./sql"
+	SQL_PATH   = "./sql"
+	IMAGES_DIR = "./public/images"
 )
 
 func getEnv(key, fallback string) string {
@@ -98,7 +99,7 @@ type Post struct {
 
 func (h *Handler) GetPosts(c echo.Context) error {
 	posts := []Post{}
-	err := h.DB.Select(&posts, "SELECT * FROM posts")
+	err := h.DB.Select(&posts, "SELECT * FROM posts ORDER BY created_at DESC LIMIT 20")
 	if err != nil {
 		h.Logger.Error(err)
 		return c.JSON(500, err)

docker-compose.prod.yml

@@ -7,6 +7,7 @@ services:
     volumes:
       - ./etc/nginx/prod/conf.d:/etc/nginx/conf.d
       - ./frontend/dist:/var/www/html
+      - ./backend/public:/var/www/public
     depends_on:
       - backend
 
@@ -36,6 +37,8 @@ services:
       - MYSQL_DATABASE=${MYSQL_DATABASE}
       - MYSQL_USER=${MYSQL_USER}
       - MYSQL_PASSWORD=${MYSQL_PASSWORD}
+    volumes:
+      - ./backend/public:/app/public
     depends_on:
       database:
         condition: service_healthy

docker-compose.yml

@@ -6,6 +6,7 @@ services:
       - 80:80
     volumes:
       - ./etc/nginx/dev/conf.d:/etc/nginx/conf.d
+      - ./backend/public:/var/www/public
     depends_on:
       - backend
       - frontend

etc/nginx/dev/conf.d/maxitter.conf

@@ -10,6 +10,10 @@ server {
         proxy_set_header Host $host;
     }
 
+    location /images {
+        alias /var/www/public/images;
+    }
+
     location /api {
         proxy_pass http://backend:8000;
         proxy_http_version 1.1;

etc/nginx/prod/conf.d/maxitter.conf

@@ -8,6 +8,10 @@ server {
         try_files $uri $uri/ /index.html;
     }
 
+    location /images {
+        alias /var/www/public/images;
+    }
+
     location /api {
         proxy_pass http://backend:8000;
         proxy_http_version 1.1;

frontend/src/App.jsx

@@ -1,8 +1,10 @@
-import { Container } from "@mui/material";
+import { Container, CssBaseline } from "@mui/material";
 import { GlobalStyles } from "@mui/material";
 import { Form } from "./components/Form";
 import { Timeline } from "./components/Timeline";
 import { useEffect, useState } from "react";
+import { ColorModeProvider } from "./components/theme/ColorModeProvider.jsx";
+import { ToggleTheme } from "./components/theme/ToggleTheme.jsx";
 
 function App() {
   const [posts, setPosts] = useState([]);
@@ -29,22 +31,30 @@ function App() {
 
   return (
     <>
-      <GlobalStyles
-        styles={{
-          body: {
-            margin: 0,
-          },
-        }}
-      />
-      <Container
-        maxWidth="md"
-        sx={{
-          py: 3,
-        }}
-      >
-        <Form onSubmitted={onSubmitted} />
-        <Timeline posts={posts} isLoading={isLoading} fetchPosts={fetchPosts} />
-      </Container>
+      <ColorModeProvider>
+        <CssBaseline />
+        <ToggleTheme />
+        <GlobalStyles
+          styles={{
+            body: {
+              margin: 0,
+            },
+          }}
+        />
+        <Container
+          maxWidth="md"
+          sx={{
+            py: 3,
+          }}
+        >
+          <Form onSubmitted={onSubmitted} />
+          <Timeline
+            posts={posts}
+            isLoading={isLoading}
+            fetchPosts={fetchPosts}
+          />
+        </Container>
+      </ColorModeProvider>
     </>
   );
 }

frontend/src/components/theme/ColorModeContext.jsx

@@ -0,0 +1,3 @@
+import { createContext } from "react";
+
+export const ColorModeContext = createContext({ toggleColorMode: () => {} });

frontend/src/components/theme/ColorModeProvider.jsx

@@ -0,0 +1,41 @@
+import { ThemeProvider, createTheme } from "@mui/material/styles";
+import { useMemo, useState, useEffect } from "react";
+import { ColorModeContext } from "./ColorModeContext";
+
+export const ColorModeProvider = ({ children }) => {
+  const [mode, setMode] = useState(() => {
+    const storedMode = localStorage.getItem("colorMode");
+    return storedMode !== null ? storedMode : "light";
+  });
+
+  useEffect(() => {
+    localStorage.setItem("colorMode", mode);
+  }, [mode]);
+
+  const colorMode = useMemo(
+    () => ({
+      toggleColorMode: () => {
+        setMode((prevMode) => (prevMode === "light" ? "dark" : "light"));
+      },
+    }),
+    []
+  );
+
+  const theme = useMemo(
+    () =>
+      createTheme({
+        palette: {
+          mode,
+        },
+      }),
+    [mode]
+  );
+
+  return (
+    <ThemeProvider theme={theme}>
+      <ColorModeContext.Provider value={colorMode}>
+        {children}
+      </ColorModeContext.Provider>
+    </ThemeProvider>
+  );
+};

frontend/src/components/theme/ToggleTheme.jsx

@@ -0,0 +1,20 @@
+import { useContext } from "react";
+import { ColorModeContext } from "./ColorModeContext";
+import { useTheme } from "@emotion/react";
+import { Box } from "@mui/system";
+import { IconButton } from "@mui/material";
+import { Brightness4, Brightness7 } from "@mui/icons-material";
+
+export const ToggleTheme = () => {
+  const theme = useTheme();
+  const colorMode = useContext(ColorModeContext);
+  const icon =
+    theme.palette.mode === "dark" ? <Brightness7 /> : <Brightness4 />;
+  return (
+    <Box sx={{ ml: 1 }}>
+      <IconButton onClick={colorMode.toggleColorMode} color="inherit">
+        {icon}
+      </IconButton>
+    </Box>
+  );
+};

scripts/deploy.sh

@@ -10,4 +10,5 @@ if [ ! -f "${ENV_FILE}" ]; then
     exit 1
 fi
 
+docker compose -f docker-compose.prod.yml down
 docker compose -f docker-compose.prod.yml up -d --build

scripts/reset-db.sh

@@ -0,0 +1,38 @@
+#!/bin/bash
+
+THIS_FILE_DIR="$(cd "$(dirname "$0")" && pwd)"
+PROJECT_DIR="$(cd "${THIS_FILE_DIR}/.." && pwd)"
+FRONT_DIR="${PROJECT_DIR}/frontend"
+BACK_DIR="${PROJECT_DIR}/backend"
+DB_DATA_DIR="${PROJECT_DIR}/etc/mysql/dbdata"
+ENV_FILE="${PROJECT_DIR}/.env"
+
+echo "DBデータを削除してもよろしいですか？"
+echo "削除する場合は y を入力してください。"
+echo "削除しない場合は n を入力してください。"
+
+read -p "y/n: " yn
+
+case "$yn" in [yY]*) ;; *)
+    echo "削除せずに終了します..."
+    exit
+    ;;
+esac
+
+echo "Dockerを停止します..."
+
+docker compose down
+
+echo "Dockerを停止しました！"
+
+echo "DBデータを削除します..."
+
+sudo rm -rf "${DB_DATA_DIR}"
+
+echo "DBデータを削除しました！"
+
+echo "Dockerを立ち上げます..."
+
+docker compose up -d --build
+
+echo "Dockerを立ち上げました！"

scripts/start.sh

@@ -0,0 +1,13 @@
+#!/bin/bash
+
+THIS_FILE_DIR="$(cd "$(dirname "$0")" && pwd)"
+PROJECT_DIR="$(cd "${THIS_FILE_DIR}/.." && pwd)"
+FRONT_DIR="${PROJECT_DIR}/frontend"
+BACK_DIR="${PROJECT_DIR}/backend"
+ENV_FILE="${PROJECT_DIR}/.env"
+
+echo "Dockerを立ち上げます..."
+
+docker compose up -d --build
+
+echo "Dockerを立ち上げました！"

scripts/stop.sh

@@ -0,0 +1,13 @@
+#!/bin/bash
+
+THIS_FILE_DIR="$(cd "$(dirname "$0")" && pwd)"
+PROJECT_DIR="$(cd "${THIS_FILE_DIR}/.." && pwd)"
+FRONT_DIR="${PROJECT_DIR}/frontend"
+BACK_DIR="${PROJECT_DIR}/backend"
+ENV_FILE="${PROJECT_DIR}/.env"
+
+echo "Dockerを終了します..."
+
+docker compose down
+
+echo "Dockerを終了しました！"