swith .env only local

.gitignore

@@ -13,10 +13,10 @@
 
 # misc
 .DS_Store
-.env.local
-.env.development.local
+.env
+.env.development
 .env.test.local
-.env.production.local
+.env.production
 
 npm-debug.log*
 yarn-debug.log*

Dockerfile

@@ -1,8 +1,26 @@
 # Build Image
 FROM node:20 AS build
 WORKDIR /app
+
+# defaultをdevelopmentにし，引数でproductionにも切り替えられるようにする
+ARG BUILD_ENV=development
+
 COPY . .
-RUN npm install && npm run build
+# 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
+echo "build mode = development"
+npm run build-dev
+else
+echo "build mode = unknown"
+exit 1
+fi
+rm -rf node_modules/.cache
+EOF
 
 
 # Product Image

compose.yaml

@@ -1,3 +1,7 @@
+# .env.developmentでbuild
+# docker buildx bake --set react-app.args.BUILD_ENV=development
+# .env.productionでbuild
+# docker buildx bake --set react-app.args.BUILD_ENV=production
 version: '3'
 
 services:

package.json

@@ -17,7 +17,9 @@
   },
   "scripts": {
     "start": "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",
     "eject": "react-scripts eject"
   },
@@ -41,6 +43,7 @@
   },
   "devDependencies": {
     "@typescript-eslint/parser": "^5.62.0",
+    "dotenv-cli": "^7.4.2",
     "eslint": "^8.54.0",
     "prettier": "^2.8.8",
     "typescript": "^4.9.5"

src/App.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import logo from "./logo.svg";
 import "./App.css";
+const message: string = process.env.REACT_APP_MESSAGE || "no env";
 
 function App() {
   return (
@@ -16,7 +17,7 @@ function App() {
           target="_blank"
           rel="noopener noreferrer"
         >
-          Learn React
+          Hello, React {message}
         </a>
       </header>
     </div>