fix jest

.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

.env.stating

@@ -0,0 +1 @@
+REACT_APP_MESSAGE=staging

.github/workflows/react-jest.yaml

@@ -22,6 +22,7 @@ jobs:
     strategy:
       matrix:
         node_version: [20, 22]
+        env_type: ["dev", "stg", "prod"]
 
     steps:
       # checkout repository to runner
@@ -40,5 +41,6 @@ jobs:
       - name: install dependencies
         run: github-comment exec --token ${{ secrets.token }} --  npm install
 
+      # 3環境まとめてテスト
       - name: run npm test
-        run: github-comment exec --token ${{ secrets.token }} -- npm test -- --watchall=false
+        run: github-comment exec --token ${{ secrets.token }} -- npm run test-${{ matrix.env_type }} -- --watchall=false

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,31 @@ Sample React application for Trying to Use DevSecOps tools.
 
 ---
 
-
 ## PREPARING
 
-TODO
+### ローカルにインストールするツール
+
+- `pre-commit`
+- `git secret`
+- `gh`コマンドのインストール
+- VSCodeのExtensionsもお好みでインストール。TODO: devcontainer化する。
+
+### GitHub Actions Variablesの設定
+
+- Repositoryに[Environment](https://github.com/RyosukeDTomita/devsecops-demo-aws-ecs/settings/environments)を作る。
+![Environment例](./doc/fig/github-environment.png)
+
+### 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,9 +107,6 @@ pip install pre-commit
 pre-commit install
 ```
 
-- VSCodeのExtensionsもお好みでインストール。
-- GitHub Actionsがスキャン結果のファイルをアップロードできるように権限をつける。詳細は[semgrepのyaml](./.github/workflows/react-semgrep.yaml)を参照。
-
 ---
 
 ## ERROR LOG

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 (

src/__tests__/App.test.tsx

@@ -1,10 +1,43 @@
+// import React from "react";
+// import { render, screen } from "@testing-library/react";
+// import App from "../App";
+// const message: string = process.env.REACT_APP_MESSAGE || "";
+
+// // 画面にHello, Reactの文字が出るかテスト
+// test("renders Hello, React link", () => {
+//   render(<App />);
+//   const linkElement = screen.getByText(new RegExp(`Hello, React ${message}`, 'i'));
+//   expect(linkElement).toBeInTheDocument();
+// });
+
 import React from "react";
 import { render, screen } from "@testing-library/react";
 import App from "../App";
 
-// 画面にLearn Reactの文字が出るかテスト
-test("renders learn react link", () => {
+// 環境変数をテストの前に設定
+const originalEnv = process.env;
+beforeEach(() => {
+  jest.resetModules(); // モジュールキャッシュをクリア
+  process.env = { ...originalEnv }; // 環境変数をリセット
+});
+
+afterAll(() => {
+  process.env = originalEnv; // 全テスト後に環境変数を元に戻す
+});
+
+// 画面に"Hello, React"の文字が出るかテスト（環境変数なし）
+test("renders 'Hello, React' text without environment variable", () => {
+  process.env.REACT_APP_MESSAGE = ""; // 環境変数をクリア
+  render(<App />);
+  const linkElement = screen.getByText(/Hello, React/i);
+  expect(linkElement).toBeInTheDocument();
+});
+
+// 画面に"Hello, React"と環境変数のメッセージが出るかテスト（環境変数あり）
+test("renders 'Hello, React' text with environment variable", () => {
+  const message: string = process.env.REACT_APP_MESSAGE || "";
+  const testMessage: string = "Hello, React " + message;
   render(<App />);
-  const linkElement = screen.getByText(/learn react/i);
+  const linkElement = screen.getByText(new RegExp(testMessage, "i"));
   expect(linkElement).toBeInTheDocument();
 });

update_github_actoins_variables.sh

@@ -0,0 +1,6 @@
+#!/bin/bash
+for env in "development" "staging" "production";
+do
+  echo $env
+  gh
+done