Merge pull request #116 from sharehouse-sanhaimu/develop

CDテスト　＆　コンソールの削除　＆　prettierの設定
sharehouse-sanhaimu · Mar 30, 2024 · 3a1a082 · 3a1a082
2 parents bd0e5e0 + a33dd9a
commit 3a1a082
Show file tree

Hide file tree

Showing 41 changed files with 1,333 additions and 577 deletions.
diff --git a/.github/workflows/auto_deploy.yml b/.github/workflows/auto_deploy.yml
@@ -0,0 +1,30 @@
+name: Auto Deploy
+run-name: ChatGP is deploying
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Tailscale
+        uses: tailscale/github-action@v2
+        with:
+          oauth-client-id: ${{ secrets.TS_OAUTH_CLIENT_ID }}
+          oauth-secret: ${{ secrets.TS_OAUTH_SECRET }}
+          tags: tag:ci
+      - name: Deploy
+        uses: appleboy/ssh-action@master
+        with:
+          host: ${{ secrets.SSH_HOST_HACKASON}}
+          username: ${{ secrets.SSH_USERNAME_HACKASON}}
+          key: ${{ secrets.SSH_PRIVATE_KEY_HACKASON}}
+          port: ${{ secrets.SSH_PORT_HACKASON}}
+          script: |
+            cd ~/ChatGP
+            git pull origin main
+            git checkout main
+            bash script/down.sh
+            bash script/up.sh
diff --git a/.github/workflows/build_test.yml b/.github/workflows/build_test.yml
@@ -0,0 +1,39 @@
+name: Build Test
+run-name: build-test
+on: [pull_request]
+
+jobs:
+  test:
+    name: Build Test
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Create envfile for view
+        uses: SpicyPizza/[email protected]
+        with:
+          envkey_NEXT_PUBLIC_API_ACCESS_ID: ${{ secrets.NEXT_PUBLIC_API_ACCESS_ID }}
+          envkey_NEXT_PUBLIC_API_ACCESS_KEY: ${{ secrets.NEXT_PUBLIC_API_ACCESS_KEY }}
+          envkey_NEXT_PUBLIC_API_URL: ${{ secrets.NEXT_PUBLIC_API_URL }}
+          file_name: view.env
+
+      - name: Create envfile for api
+        uses: SpicyPizza/[email protected]
+        with:
+          envkey_OPENAI_API_KEY: ${{ secrets.OPENAI_API_KEY }}
+          envkey_DEEPL_AUTH_KEY: ${{ secrets.DEEPL_AUTH_KEY }}
+          envkey_API_ACCESS_ID: ${{ secrets.API_ACCESS_ID }}
+          envkey_API_ACCESS_KEY: ${{ secrets.API_ACCESS_KEY }}
+          envkey_ACSESS_ALLOW_URL: ${{ secrets.ACSESS_ALLOW_URL }}
+          envkey_EXECUTING_ENVIRONMENT: ${{ secrets.EXECUTING_ENVIRONMENT }}
+          envkey_IMAGE_MODEL_CHATGPT: ${{ secrets.IMAGE_MODEL_CHATGPT }}
+          file_name: api.env
+
+      - name: Docker Compose Build
+        run: docker-compose -f docker-compose.prod.yml build
+      - name: Yarn Install 
+        run: docker compose -f docker-compose.prod.yml run --rm view yarn
+      - name: Yarn Build
+        run: docker compose -f docker-compose.prod.yml run --rm view yarn build
+      - name: Docker Compose Up
+        run: docker-compose -f docker-compose.prod.yml up -d view api
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,14 @@
+{
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "editor.formatOnSave": true,
+  "[markdown]": {
+    "editor.formatOnSave": false
+  },
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": "explicit",
+    "source.fixAll.stylelint": "explicit"
+  },
+  "eslint.validate": ["html", "javascriptreact", "typescriptreact"],
+  "css.validate": false,
+  "scss.validate": false
+}
diff --git a/README.md b/README.md
@@ -1,10 +1,14 @@
+![Test](https://github.com/sharehouse-sanhaimu/ChatGP/actions/workflows/build_test.yml/badge.svg)
+
 # ChatGP
 
 【技育 CAMP2024】ハッカソン Vol.1 に参加して作成したアプリ
 
+こちらからアクセス ⇒ [ChatGP（チャットグランプリ）](https://chatgp.nosse.net/)
+
 ## Description
 
-プロジェクトの概要
+chatGPT を使ったレースゲーム！
 
 ## Installation
 
@@ -13,19 +17,47 @@
 ```bash
 docker compose -f docker-compose.prod.yml build
 
+docker compose -f docker-compose.prod.yml run --rm view yarn
+
 docker compose -f docker-compose.prod.yml run --rm view yarn build
 
 docker compose -f docker-compose.prod.yml up -d
 ```
 
+### Deletion
+
+```bash
+docker compose -f docker-compose.prod.yml down
+```
+
+### Use Script
+
+Installtionをまとめて実行
+
+```bash
+$ bash ./script/up.sh
+```
+
+Deletionを実行
+
+```bash
+$ bash ./script/down.sh
+```
+
 ## File Structure
 
-- api/
+- `api/`
+
   - FastAPI を使用したバックエンド処理を記述
 
-- view/
-  - Next.jsを用いてフロントエンドを構築
+- `view/`
+
+  - Next.js を用いてフロントエンドを構築
+
+- `script/`
+
+  - インストールや削除を行うシェルスクリプト
 
-- docker-compose.yml
+- `docker-compose.yml`
   - 複数のコンテナを定義し、実行するための設定
 
diff --git a/api/README_BACKEND.md b/api/README_BACKEND.md
@@ -4,12 +4,6 @@
 ## Description
 FastAPIを使用してChatGPTAPIを操作できるようにする.
 
-## Installation
-
-```bash
-docker compose build 
-docker compose up
-```
 
 ## Usage
 API使用方法

diff --git a/api/config.py b/api/config.py
@@ -23,4 +23,4 @@ class RaceInfoKeys:
     first_place: str = "first_place"
     second_place: str = "second_place"
     third_place: str = "third_place"
-    fourth_place: str = "fourth_prace"
+    fourth_place: str = "fourth_place"
diff --git a/script/down.sh b/script/down.sh
@@ -0,0 +1 @@
+docker-compose -f docker-compose.prod.yml down
diff --git a/script/up.sh b/script/up.sh
@@ -0,0 +1,4 @@
+docker-compose -f docker-compose.prod.yml build
+docker compose -f docker-compose.prod.yml run --rm view yarn
+docker compose -f docker-compose.prod.yml run --rm view yarn build
+docker compose -f docker-compose.prod.yml up -d
diff --git a/view/.eslintrc.json b/view/.eslintrc.json
@@ -1,3 +1,3 @@
 {
-  "extends": "next/core-web-vitals"
+  "extends": ["next", "next/core-web-vitals", "prettier", "next/babel"]
 }
diff --git a/view/.prettierrc.mjs b/view/.prettierrc.mjs
@@ -0,0 +1,22 @@
+/** @type {import('next').NextConfig} */
+
+const prettierConfig = {
+  plugins: ["prettier-plugin-tailwindcss"],
+  printWidth: 100,
+  tabWidth: 2,
+  useTabs: false,
+  semi: true,
+  singleQuote: false,
+  quoteProps: "as-needed",
+  jsxSingleQuote: false,
+  trailingComma: "es5",
+  bracketSpacing: true,
+  bracketSameLine: false,
+  arrowParens: "always",
+  proseWrap: "preserve",
+  htmlWhitespaceSensitivity: "css",
+  endOfLine: "lf",
+  embeddedLanguageFormatting: "off",
+};
+
+export default prettierConfig;
diff --git a/view/README_FRONTEND.md b/view/README_FRONTEND.md
@@ -0,0 +1,41 @@
+# view
+フロントエンドを記述
+
+## Description
+FastAPIを使用してChatGPTAPIを操作できるようにする.
+
+## Usage
+各ディレクトリの説明
+
+- `.yarn/`
+  - yarnのバージョン情報が入っている
+
+- `public/`
+  - 使用画像が入っている
+
+- `src/`
+  - `app/`
+      - `page.tsx`
+        - `/`のページ内容
+      - `layout.tsx`
+        - プロジェクト全体を囲むtsx
+        - `create/`
+          - 車作成画面
+          - `result/`
+            - 作成された画像を表示する画面
+        - `race/`
+          - レースが進行する画面
+        - `ending/`
+          - エンディングを表示する画面
+  - `components/`
+    - shadcn/uiがここにinstallされる
+  - `lib/`
+    - 各関数を設定
+    - serverActionsなどがある
+  - `tailwind.config.ts`
+    - tailwindの設定を記述
+    - 枠つき文字などをここで追加している
+  - `tsconfig.json`
+    - typescriptの設定が記述されている
+  - `view.Dockerfile`
+    - viewのコンテナを作るためのDockerfile
diff --git a/view/next.config.mjs b/view/next.config.mjs
@@ -1,4 +1,37 @@
-/** @type {import('next').NextConfig} */
-const nextConfig = {};
+/**
+ * @type {import('next').NextConfig}
+ */
 
+import { PHASE_DEVELOPMENT_SERVER } from "next/constants.js";
+import TerserPlugin from "terser-webpack-plugin";
+
+
+const nextConfig = (phase, { defaultConfig }) => {
+  if (phase === PHASE_DEVELOPMENT_SERVER) {
+    return {
+      /* 開発フェーズでのみ利用するオプションを設定 */
+    };
+  }
+
+  return {
+    /* 開発フェーズを除く全てのフェーズで有効なオプションを設定 */
+    webpack: (config, options) => {
+      // ----- ここから本番環境で、console.log を出力しない系の設定 -----
+      config.optimization.minimize = true;
+      config.optimization.minimizer = [
+        new TerserPlugin({
+          // Build時に console.log を削除する
+          terserOptions: {
+            compress: { drop_console: true },
+          },
+          // LICENSE 情報を残してその他のコメントを削除する
+          extractComments: "all",
+        }),
+      ];
+      // ----- ここまで本番環境で、console.log を出力しない系の設定 -----
+
+      return config;
+    },
+  };
+};
 export default nextConfig;
diff --git a/view/package.json b/view/package.json
@@ -19,7 +19,9 @@
     "react-hook-form": "^7.51.0",
     "sharp": "^0.33.2",
     "tailwind-merge": "^2.2.1",
-    "tailwindcss-animate": "^1.0.7"
+    "tailwindcss-animate": "^1.0.7",
+    "terser-webpack-plugin": "^5.3.10",
+    "webpack": "^5.90.3"
   },
   "devDependencies": {
     "@types/node": "^20",
@@ -28,7 +30,10 @@
     "autoprefixer": "^10.0.1",
     "eslint": "^8",
     "eslint-config-next": "14.1.0",
+    "eslint-config-prettier": "^9.1.0",
     "postcss": "^8",
+    "prettier": "^3.2.5",
+    "prettier-plugin-tailwindcss": "^0.5.12",
     "tailwindcss": "^3.3.0",
     "typescript": "^5"
   },

diff --git a/view/src/app/create/page.tsx b/view/src/app/create/page.tsx
@@ -27,14 +27,10 @@ export default function Home() {
     },
   });
 
-  const onSubmit: SubmitHandler<PlayerCarInput> = async (
-    data: PlayerCarInput
-  ) => {
+  const onSubmit: SubmitHandler<PlayerCarInput> = async (data: PlayerCarInput) => {
     try {
       setSubmit(true);
-      const responseJson: PlayerCarRes | false = await getPlayerCarDataFromGpt(
-        data
-      );
+      const responseJson: PlayerCarRes | false = await getPlayerCarDataFromGpt(data);
       if (responseJson) {
         await getResponseFromGpt(responseJson);
         router.push("/create/result");
@@ -55,9 +51,9 @@ export default function Home() {
   return (
     <main>
       {submit && <Loading />}
-      <div className="flex flex-wrap justify-around items-center h-screen bg-basecolor">
+      <div className="flex h-screen flex-wrap items-center justify-around bg-basecolor">
         <div className="h-4/5 w-1/2 p-4">
-          <div className="flex flex-col justify-around items-center h-full w-full bg-primarycolor rounded-xl border-4 border-secondarycolor">
+          <div className="flex h-full w-full flex-col items-center justify-around rounded-xl border-4 border-secondarycolor bg-primarycolor">
             <Image
               src="/announcer.webp"
               alt="announcer"
@@ -66,14 +62,14 @@ export default function Home() {
               priority
               className=" rounded-sm border-4 border-accentcolor"
             />
-            <Card className="text-4xl tracking-wider text-center w-11/12 border-4 border-basecolor p-8">
+            <Card className="w-11/12 border-4 border-basecolor p-8 text-center text-4xl tracking-wider">
               <p>これからレースだ！</p>
               <p> 君の車を作製しよう！</p>
             </Card>
           </div>
         </div>
-        <div className="flex h-full w-1/2 p-4 flex-col justify-around items-center">
-          <div className="text-3xl tracking-wider text-center w-11/12 p-4 items-center bg-secondarycolor text-basecolor rounded-xl border-4 border-accentcolor">
+        <div className="flex h-full w-1/2 flex-col items-center justify-around p-4">
+          <div className="w-11/12 items-center rounded-xl border-4 border-accentcolor bg-secondarycolor p-4 text-center text-3xl tracking-wider text-basecolor">
             <div className=" p-4">
               <p>これからChatGPに出場する車を</p>
               <p>ChatGPTに作成してもらおう！</p>
@@ -83,27 +79,27 @@ export default function Home() {
               <p>君の言葉で決まるよ！</p>
             </div>
           </div>
-          <Card className="w-full p-4 bg-primarycolor border-4 border-secondarycolor">
+          <Card className="w-full border-4 border-secondarycolor bg-primarycolor p-4">
             <form className="w-full" onSubmit={handleSubmit(onSubmit)}>
               <div className="p-1">
-                <div className="text-2xl tracking-widest bg-accentcolor text-basecolor inline-block p-2 rounded-xl">
+                <div className="inline-block rounded-xl bg-accentcolor p-2 text-2xl tracking-widest text-basecolor">
                   入力欄
                 </div>
               </div>
               <Textarea
-                className=" tracking-widest text-4xl text-center w-full border-4 border-accentcolor"
+                className=" w-full border-4 border-accentcolor text-center text-4xl tracking-widest"
                 {...register("text", { required: true, maxLength: 20 })}
               ></Textarea>
-              <div className="flex p-4 justify-end">
+              <div className="flex justify-end p-4">
                 <Button
                   disabled={submit}
-                  className=" bg-accentcolor hover:bg-secondarycolor text-basecolor w-24 h-12 text-xl text-center tracking-widest"
+                  className=" h-12 w-24 bg-accentcolor text-center text-xl tracking-widest text-basecolor hover:bg-secondarycolor"
                 >
                   送信
                 </Button>
               </div>
               {errors.text && (
-                <div className=" bg-basecolor border-secondarycolor border-4 text-2xl text-center text-accentcolor font-bold p-2">
+                <div className=" border-4 border-secondarycolor bg-basecolor p-2 text-center text-2xl font-bold text-accentcolor">
                   20文字以内で入力してください
                 </div>
               )}