From 188c2014b15b7528f95dcdabc74ac3106a8484b3 Mon Sep 17 00:00:00 2001
From: RyosukeDTomita <d310151c2@gmail.com>
Date: Thu, 1 Aug 2024 18:56:22 +0900
Subject: [PATCH] swith .env only local

---
 .gitignore        |  6 +++---
 Dockerfile        | 20 +++++++++++++++++++-
 compose.yaml      |  4 ++++
 package-lock.json | 37 +++++++++++++++++++++++++++++++++++++
 package.json      |  3 +++
 src/App.tsx       |  3 ++-
 6 files changed, 68 insertions(+), 5 deletions(-)

diff --git a/.gitignore b/.gitignore
index 4d29575..88c646a 100644
--- a/.gitignore
+++ b/.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*
diff --git a/Dockerfile b/Dockerfile
index ef92675..db1b238 100644
--- a/Dockerfile
+++ b/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
diff --git a/compose.yaml b/compose.yaml
index 3a4af55..6dc74c3 100644
--- a/compose.yaml
+++ b/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:
diff --git a/package-lock.json b/package-lock.json
index 0359006..a31e4ca 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -22,6 +22,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"
@@ -6059,6 +6060,42 @@
         "node": ">=10"
       }
     },
+    "node_modules/dotenv-cli": {
+      "version": "7.4.2",
+      "resolved": "https://registry.npmjs.org/dotenv-cli/-/dotenv-cli-7.4.2.tgz",
+      "integrity": "sha512-SbUj8l61zIbzyhIbg0FwPJq6+wjbzdn9oEtozQpZ6kW2ihCcapKVZj49oCT3oPM+mgQm+itgvUQcG5szxVrZTA==",
+      "dev": true,
+      "dependencies": {
+        "cross-spawn": "^7.0.3",
+        "dotenv": "^16.3.0",
+        "dotenv-expand": "^10.0.0",
+        "minimist": "^1.2.6"
+      },
+      "bin": {
+        "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",
+      "integrity": "sha512-GopVGCpVS1UKH75VKHGuQFqS1Gusej0z4FyQkPdwjil2gNIv+LNsqBlboOzpJFZKVT95GkCyWJbBSdFEFUWI2A==",
+      "dev": true,
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/dotenv-expand": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/dotenv-expand/-/dotenv-expand-5.1.0.tgz",
diff --git a/package.json b/package.json
index 9dee296..9ac9860 100644
--- a/package.json
+++ b/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"
diff --git a/src/App.tsx b/src/App.tsx
index 9cc63d9..0e4053c 100644
--- a/src/App.tsx
+++ b/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>