fix jest

fix jest error2

test3

test4

test5

test6

test7

test7

update document

document update2

.dockerignore

@@ -1,4 +1,3 @@
-docker_test.sh
 README.md
 .gitignore
 CODEOWNERS
@@ -10,4 +9,5 @@ LICENSE
 src/__tests__/*
 copilot/*
 Dockerfile
-docker-compose.yml
+compose.yaml
+run_local.sh

.github/workflows/react-jest.yaml

@@ -1,3 +1,4 @@
+# node_version: 20, 22とenvironment_type: development, staging, productionの計6パターンでテストを実行
 name: run-jest
 on:
   push:
@@ -22,6 +23,9 @@ jobs:
     strategy:
       matrix:
         node_version: [20, 22]
+        environment_type: ["development", "staging", "production"]
+    environment:
+      name: ${{ matrix.environment_type }}
 
     steps:
       # checkout repository to runner
@@ -40,5 +44,29 @@ jobs:
       - name: install dependencies
         run: github-comment exec --token ${{ secrets.token }} --  npm install
 
-      - name: run npm test
-        run: github-comment exec --token ${{ secrets.token }} -- npm test -- --watchall=false
+      # 3環境まとめてテスト
+      - name: run npm run test
+        env:
+          GH_TOKEN: ${{ secrets.token }} # gh用
+        run: |
+          if [ ${{ matrix.environment_type }} = "development" ]; then
+            npm_type="dev"
+          elif [ ${{ matrix.environment_type }} = "staging" ]; then
+            npm_type="stg"
+          elif [ ${{ matrix.environment_type }} = "production" ]; then
+            npm_type="prod"
+          else
+            echo "invalid environment_type"
+            exit 1
+          fi
+          # environmentにあった名称でenv_fileを作成し，github actions environment variableを書き込み
+          # NOTE: env_fileはgitで管理したくないため，workflow実行時に作成している。
+          env_file=".env.${{ matrix.environment_type }}"
+          touch $env_file
+          cat <<EOF >> $env_file
+          $(gh variable list --env ${{ matrix.environment_type }} | awk '{print $1"="$2}')
+          EOF
+          echo ----[DEBUG]: CHECK $env_file----
+          cat .env.${{ matrix.environment_type }}
+          echo ----[DEBUG]: END----
+          github-comment exec --token ${{ secrets.token }} -- npm run test-$npm_type -- --watchall=false

.gitignore

@@ -17,6 +17,7 @@
 .env.development
 .env.test.local
 .env.production
+.env.staging
 
 npm-debug.log*
 yarn-debug.log*

Dockerfile

@@ -10,16 +10,19 @@ COPY . .
 # npm startは.env.developmentが優先されるがnpm run buildでは.env.productoinが優先されるので注意。
 RUN <<EOF
 npm install
-if [ "$BUILD_ENV" = "production" ]; then
-echo "build mode = production"
-npm run build
-elif [ "$BUILD_ENV" = "development" ]; then
+if [ "$BUILD_ENV" = "development" ]; then
 echo "build mode = development"
+npm run build
+elif [ "$BUILD_ENV" = "staging" ]; then
+echo "build mode = staging"
+elif [ "$BUILD_ENV" = "productoin" ]; then
+echo "build mode = production"
 npm run build-dev
 else
 echo "build mode = unknown"
 exit 1
 fi
+
 rm -rf node_modules/.cache
 EOF
 

README.md

@@ -66,14 +66,59 @@ Sample React application for Trying to Use DevSecOps tools.
 
 ---
 
-
 ## PREPARING
 
-TODO
+### 始めにやること
+
+- Reopsitoryをforkする。
+
+### ローカルにインストールするツール
+
+- `pre-commit`
+- `git secret`
+- `gh`コマンドのインストール
+- VSCodeのExtensionsもお好みでインストール。TODO: Devcontainer化する。
+
+### GitHub Actionsでghコマンドを使うための設定
+
+- [Personal access tokens](https://github.com/settings/tokens)を作り，repository secretsに登録する。
+TODO: 一旦これくらいで作成。もっと権限しぼれるかも
+![personal acccess token例](./doc/fig/pat.png)
+- repository secretsに登録する。
+![Actions secrets and variables](./doc/fig/actions-secrets-set.png)
+
+### GitHub Actions Variablesの設定
+
+- Repositoryに[Environment](https://github.com/RyosukeDTomita/devsecops-demo-aws-ecs/settings/environments)を作る。
+![Environment例](./doc/fig/github-environment.png)
+- ローカルに3環境分の.envファイルをを作成する。
+
+```shell
+# 作成
+for environment in development staging production;
+do
+  touch .env.${environment}
+  echo $REACT_APP_MESSAGE=${environment} > .env.${environment}
+done
+```
+
+- github actions enrironment variablesに登録/更新する。
+
+```shell
+source ./update_github_actions_variables.sh
+```
+
+### GitHub Actionsで実行したスキャン結果をアップロードできるようにGitHubリポジトリの設定を変更する
+
+- GitHub Actionsがスキャン結果のファイルをアップロードできるようにGitHubリポジトリの設定を変更。詳細は[semgrepのyaml](./.github/workflows/react-semgrep.yaml)を参照。
+
+---
 
 ## HOW TO USE
 
-- ローカルでのセットアップが必用なのは git-secretsのセットアップ。
+### コミット時の検査セットアップ
+
+- git-secretsのセットアップ。
 
 ```shell
 cd devsecops-demo-aws-ecs
@@ -90,14 +135,13 @@ pip install pre-commit
 pre-commit install
 ```
 
-- VSCodeのExtensionsもお好みでインストール。
-- GitHub Actionsがスキャン結果のファイルをアップロードできるように権限をつける。詳細は[semgrepのyaml](./.github/workflows/react-semgrep.yaml)を参照。
-
 ---
 
 ## ERROR LOG
 
 <details>
-<summary>今まで詰まったエラー一覧</summary><div>
-
-</div></details>
+<summary>今まで詰まったエラー一覧</summary>
+<div>
+TODO
+</div>
+</details>

doc/github-actions.md

@@ -30,16 +30,18 @@ actions/setup-python@コミットハッシュ
 
 ---
 
-## GitHub ActionsでSecretを扱う
+## GitHub ActionsでSecret，variablesを扱う
 
 > GUIの場合は[公式ドキュメント](https://docs.github.com/ja/actions/security-guides/using-secrets-in-github-actions)参照。
 
-### 2種類のシークレット
+### Secret
+
+#### 2種類のシークレット
 
 - Environment Secret: Environmentを作成して値を区別して使用できる。Environmentはリポジトリに対して複数作成できる。
 - Repository Secret: リポジトリで共通の値を使う。
 
-### 使用方法(CLI)
+#### 使用方法(CLI)
 
 > [GitHub CLIでリポジトリへsecretを設定する方法](https://zenn.dev/hankei6km/articles/set-secret-to-repo-with-githubcli)
 > [GitHub ActionsでEnvironment Secretを扱うサンプル](https://qiita.com/ak2ie/items/4fbcdf74e7760c49c1af)
@@ -66,6 +68,18 @@ jobs:
       echo ${{ secrets.API_TOKEN }}
 ```
 
+### variables
+- 基本はsecretと同じでenvironment variablesとrepository variablesがある。
+- secretと異なり，値を確認することができる。
+
+#### 使用例
+
+```shell
+environment=development
+gh variable set --env $environment --env-file .env.$environment
+gh variable list --env $environment
+```
+
 ---
 
 ## path filterを使って特定のファイル変更時のみCIを走らせる

package.json

@@ -10,17 +10,23 @@
     "@types/node": "^16.18.66",
     "@types/react": "^18.2.39",
     "@types/react-dom": "^18.2.17",
+    "dotenv": "^16.4.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.4"
   },
   "scripts": {
+    "discription": "startはデフォルトで.env.developmentを使うがbuildはデフォルトで.env.productionを使う",
     "start": "react-scripts start",
+    "start-stg": "dotenv -e .env.staging react-scripts start",
     "start-prod": "dotenv -e .env.production react-scripts start",
-    "build": "react-scripts build",
     "build-dev": "dotenv -e .env.development react-scripts build",
-    "test": "react-scripts test",
+    "build-stg": "dotenv -e .env.staging react-scripts build",
+    "build": "react-scripts build",
+    "test-dev": "dotenv -e .env.development react-scripts test",
+    "test-stg": "dotenv -e .env.staging react-scripts test",
+    "test-prod": "dotenv -e .env.production react-scripts test",
     "eject": "react-scripts eject"
   },
   "eslintConfig": {

run_local.sh → run_local_example.sh

@@ -7,15 +7,18 @@
 # Author: Ryosuke Tomita
 # Date: 2024/08/01
 ##########################################################################
-#docker rmi react-app:latest -f
-#docker build -t react-app:latest . --no-cache
-#docker run -p 80:8080 react-app:latest # -p localport:containerport
+# -----composeを使わない場合-----
+# docker build -t react-app:latest . --build-arg BUILD_ENV=production
+# docker run -p 80:8080 react-app:latest # -p localport:containerport
 
+# -----composeを使う-----
 # .env.developmentでbuildxでbuild
 docker buildx bake --set react-app.args.BUILD_ENV=development
 # .env.productionでbuildxでbuild
 # docker buildx bake --set react-app.args.BUILD_ENV=production
-
+# buildxを使わない場合の引数の設定方法
+#docker compose build --build-arg BUILD_ENV=production
+# 起動
 docker compose up
 
 # open your browser and go to `localhost:80`.

src/App.css

@@ -7,9 +7,11 @@
   pointer-events: none;
 }
 
+/* [`@media prefers-reduced-motion`](https://developer.mozilla.org/ja/docs/Web/CSS/@media/prefers-reduced-motion)はユーザがページの動きを少なくする設定時の動作を規定しており，no-preferenceになっているので該当時にはアニメーションは動きません。 */
 @media (prefers-reduced-motion: no-preference) {
   .App-logo {
     animation: App-logo-spin infinite 20s linear;
+    /* animation: アニメーション名 無限ループ 1サイクルの速度(変えると回転速度が変わる) 一定速度で実行 */
   }
 }
 
@@ -28,7 +30,9 @@
   color: #61dafb;
 }
 
+/*[@keyframes](https://developer.mozilla.org/ja/docs/Web/CSS/@keyframes)はキーフレームを制御するため，fromとtoでアニメーションの始まりと終わりを定義している。*/
 @keyframes App-logo-spin {
+  /* 360度回転する*/
   from {
     transform: rotate(0deg);
   }

src/App.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import logo from "./logo.svg";
 import "./App.css";
-const message: string = process.env.REACT_APP_MESSAGE || "no env";
+const message: string = process.env.REACT_APP_MESSAGE || "";
 
 function App() {
   return (