diff --git a/.dockerignore b/.dockerignore index cbc509d..7a5676a 100644 --- a/.dockerignore +++ b/.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 diff --git a/.env.stating b/.env.stating new file mode 100644 index 0000000..c7d2d1f --- /dev/null +++ b/.env.stating @@ -0,0 +1 @@ +REACT_APP_MESSAGE=staging diff --git a/.github/workflows/react-jest.yaml b/.github/workflows/react-jest.yaml index 5ac81a5..6b66409 100644 --- a/.github/workflows/react-jest.yaml +++ b/.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 diff --git a/Dockerfile b/Dockerfile index c548447..a861e58 100644 --- a/Dockerfile +++ b/Dockerfile @@ -10,16 +10,19 @@ COPY . . # npm startは.env.developmentが優先されるがnpm run buildでは.env.productoinが優先されるので注意。 RUN <=10" + "node": ">=12" + }, + "funding": { + "url": "https://dotenvx.com" } }, "node_modules/dotenv-cli": { @@ -6075,18 +6079,6 @@ "dotenv": "cli.js" } }, - "node_modules/dotenv-cli/node_modules/dotenv": { - "version": "16.4.5", - "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.4.5.tgz", - "integrity": "sha512-ZmdL2rui+eB2YwhsWzjInR8LldtZHGDoQ1ugH85ppHKwpUHL7j7rN0Ti9NCnGiQbhaZ11FpR+7ao1dNsmduNUg==", - "dev": true, - "engines": { - "node": ">=12" - }, - "funding": { - "url": "https://dotenvx.com" - } - }, "node_modules/dotenv-cli/node_modules/dotenv-expand": { "version": "10.0.0", "resolved": "https://registry.npmjs.org/dotenv-expand/-/dotenv-expand-10.0.0.tgz", @@ -13591,6 +13583,14 @@ "resolved": "https://registry.npmjs.org/dedent/-/dedent-0.7.0.tgz", "integrity": "sha512-Q6fKUPqnAHAyhiUgFU7BUzLiv0kd8saH9al7tnu5Q/okj6dnupxyTgFIBjVzJATdfIAm9NAsvXNzjaKa+bxVyA==" }, + "node_modules/react-scripts/node_modules/dotenv": { + "version": "10.0.0", + "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-10.0.0.tgz", + "integrity": "sha512-rlBi9d8jpv9Sf1klPjNfFAuWDjKLwTIJJ/VxtoTwIR6hnZxcEOQCZg2oIL3MWBYw5GpUDKOEnND7LXTbIpQ03Q==", + "engines": { + "node": ">=10" + } + }, "node_modules/react-scripts/node_modules/emittery": { "version": "0.8.1", "resolved": "https://registry.npmjs.org/emittery/-/emittery-0.8.1.tgz", diff --git a/package.json b/package.json index 9ac9860..6fe17e2 100644 --- a/package.json +++ b/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": { diff --git a/run_local.sh b/run_local_example.sh similarity index 63% rename from run_local.sh rename to run_local_example.sh index c36e1c0..08bae27 100755 --- a/run_local.sh +++ b/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`. diff --git a/src/App.css b/src/App.css index 74b5e05..a69922e 100644 --- a/src/App.css +++ b/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); } diff --git a/src/App.tsx b/src/App.tsx index 0e4053c..51de2f2 100644 --- a/src/App.tsx +++ b/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 ( diff --git a/src/__tests__/App.test.tsx b/src/__tests__/App.test.tsx index 7f6509e..743cf92 100644 --- a/src/__tests__/App.test.tsx +++ b/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(); +// 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(); + 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(); - const linkElement = screen.getByText(/learn react/i); + const linkElement = screen.getByText(new RegExp(testMessage, "i")); expect(linkElement).toBeInTheDocument(); }); diff --git a/update_github_actoins_variables.sh b/update_github_actoins_variables.sh new file mode 100644 index 0000000..79b8173 --- /dev/null +++ b/update_github_actoins_variables.sh @@ -0,0 +1,6 @@ +#!/bin/bash +for env in "development" "staging" "production"; +do + echo $env + gh +done