20240415 Deploy

.github/workflows/cd-beta.yml

@@ -0,0 +1,38 @@
+name: CD(beta)
+
+on:
+  workflow_dispatch:
+
+jobs:
+  build_and_deploy:
+    runs-on: [self-hosted, portainer]
+    permissions:
+      contents: read
+      deployments: write
+    name: Publish to Cloudflare
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          ref: develop
+      - uses: actions/setup-node@v4
+        with:
+          node-version: "latest"
+          cache: "npm"
+          cache-dependency-path: "**/package-lock.json"
+      - name: build
+        run: npx @cloudflare/next-on-pages@1
+        env:
+          NEXT_PUBLIC_API_ENDPOINT: ${{vars.BETA_API_ENDPOINT}}
+          NEXT_PUBLIC_FIREBASE_API_KEY: ${{vars.BETA_FIREBASE_API_KEY}}
+          NEXT_PUBLIC_FIREBASE_APP_ID: ${{vars.BETA_FIREBASE_APP_ID}}
+          NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN: ${{vars.BETA_FIREBASE_AUTH_DOMAIN}}
+          NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID: ${{vars.BETA_FIREBASE_MESSAGING_SENDER_ID}}
+          NEXT_PUBLIC_FIREBASE_PROJECT_ID: ${{vars.BETA_FIREBASE_PROJECT_ID}}
+          NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET: ${{vars.BETA_FIREBASE_STORAGE_BUCKET}}
+      - name: deploy
+        uses: cloudflare/pages-action@v1
+        with:
+          apiToken: ${{secrets.CLOUDFLARE_API_TOKEN}}
+          accountId: ${{vars.CLOUDFLARE_ACCOUNT_ID}}
+          projectName: ${{vars.CLOUDFLARE_BETA_PROJECT_NAME}}
+          directory: ".vercel/output/static"

.vscode/settings.json

@@ -1,7 +1,8 @@
 {
   "editor.formatOnSave": true,
-  "editor.defaultFormatter": "esbenp.prettier-vscode",
-
   "editor.tabSize": 2,
-  "files.insertFinalNewline": true
+  "files.insertFinalNewline": true,
+  "[typescriptreact]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  }
 }

README.md

@@ -1,36 +1,49 @@
-This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+# sos24-client
 
-## Getting Started
+[![CD(beta)](https://github.com/sohosai/sos24-client/actions/workflows/cd-beta.yml/badge.svg)](https://github.com/sohosai/sos24-client/actions/workflows/cd-beta.yml)
 
-First, run the development server:
+雙峰祭オンラインシステムのクライアントです。
 
-```bash
-npm run dev
-# or
-yarn dev
-# or
-pnpm dev
-# or
-bun dev
-```
+## 環境構築
+
+### 環境変数
+`.env.example`を参考にFirebase・バックエンドURLを設定します。
+
+### セットアップ
+`npm i`で依存関係がインストールされます。
 
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+`npm run dev`で開発用サーバが起動します。
 
-You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+### ビルド
+`npm run build`でビルドできます
 
-This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+Cloudflare Pagesにデプロイする場合は`npx @cloudflare/next-on-pages@1`で静的アセットを生成できます。
 
-## Learn More
+## APIからのresponseにスキーマに応じた型を付ける方法
+### SWRを使ってGETするとき編
 
-To learn more about Next.js, take a look at the following resources:
+```typescript
+import { assignType } from "@/lib/openapi";
+
+const newsId = "<uuid>"
+
+const { data: newsRes, error: newsErr, isLoading } = useSWR(`/news/${newsId}`);
+if (isLoading) {
+  // 読み込み時の処理
+}
+if (newsErr) {
+  // エラー時の処理
+}
+const news = assignType("/news/{news_id}", newsRes);
+```
 
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+path parametersはurlに文字列として直接埋め込みます。
 
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+`assignType`には、openapiで定義されているパスと`newsRes`を渡します。
 
-## Deploy on Vercel
+## APIを安全に叩く方法(post、putなど)
 
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+openapi-fetchを使います。
 
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
+## ベータについて
+[GitHub Actions](https://github.com/sohosai/sos24-client/actions/workflows/cd-beta.yml)を手動実行することでベータをデプロイできます。

panda.config.ts

@@ -22,6 +22,9 @@ export default defineConfig({
             orange: { value: "#ed6d1f" },
             purple: { value: "#60C" },
           },
+          tsukuba: {
+            purple: { value: "#60C" },
+          },
         },
       },
     },