fix: docker 설정 추가

build별 설정 분리

.dockerignore

@@ -0,0 +1,13 @@
+# .git 과 .cache 폴더를 무시
+.git
+.cache
+
+# 모든 마크다운 파일들 (md) 파일들을 무시,
+# 모든 README*.md 파일 무시
+*.md
+IREADME*.md
+
+node_modules
+npm-debug.log
+# build
+.idea

Dockerfile

@@ -1,22 +1,26 @@
-FROM nginx
+FROM luuviethai/node-16-alpine as builder
+
+WORKDIR '/usr/src/app'
+
+COPY package.json ./
 
-# root 에 app 폴더를 생성
+RUN yarn install
-RUN mkdir /app
 
-# work dir 고정
+COPY ./ ./
-WORKDIR /app
 
-# work dir 에 build 폴더 생성 /app/build
+# ENV CHOKIDAR_USEPOLLING=true
-RUN mkdir ./build
 
-# host pc의 현재경로의 build 폴더를 workdir 의 build 폴더로 복사
+RUN yarn run build
-ADD ./build ./build
+
+#nginx base image
+FROM nginx
 
 # nginx 의 default.conf backup
-RUN mv /etc/nginx/conf.d/default.conf /etc/nginx/conf.d/default.conf.backup
+# RUN mv /etc/nginx/conf.d/default.conf /etc/nginx/conf.d/default.conf.backup
 
 # host pc 의 nginx.conf 를 아래 경로에 복사
-COPY ./nginx.conf /etc/nginx/conf.d
+# COPY ./nginx.conf /etc/nginx/conf.d
+COPY --from=builder /usr/src/app/build /usr/share/nginx/html
 
 # 80 포트 오픈
 EXPOSE 80

Dockerfile.local

@@ -0,0 +1,22 @@
+FROM nginx
+
+ADD ./build /usr/share/nginx/html
+
+# 80 포트 오픈
+EXPOSE 80
+
+# container 실행 시 nginx 시작함
+CMD ["nginx", "-g", "daemon off;"]
+
+# root 에 app 폴더를 생성
+# RUN mkdir /app
+# work dir 고정
+# WORKDIR /app
+# work dir 에 build 폴더 생성 /app/build
+# RUN mkdir ./build
+# host pc의 현재경로의 build 폴더를 workdir 의 build 폴더로 복사
+# ADD ./build ./build
+# nginx 의 default.conf backup
+# RUN mv /etc/nginx/conf.d/default.conf /etc/nginx/conf.d/default.conf.backup
+# host pc 의 nginx.conf 를 아래 경로에 복사
+# COPY ./nginx.conf /etc/nginx/conf.d

README.md

@@ -122,3 +122,15 @@ npm i -D react-error-overlay@6.0.9
 // prettier-ignore
 severity: "error"
 ```
+
+### docker build
+```shell
+# local에서 production mode 테스트 
+yarn build
+docker build -f Dockerfile.local -t opst-fo-local .
+docker run --rm -d --name opst-fo-local -p 3000:80 opst-fo-local:latest
+
+# 운영에 실제 배포되는 docker로 테스트
+docker build -t opst-fo .
+docker run --rm -d --name opst-fo -p 80:80 opst-fo:latest
+```

nginx.conf

@@ -1,10 +0,0 @@
-#nginx.config
-
-server {
-    listen 80;
-    location / {
-        root    /app/build;
-        index   index.html;
-        try_files $uri $uri/ /index.html;
-    }
-}

package.json

@@ -91,7 +91,7 @@
   },
   "scripts": {
     "start": "react-scripts start",
-    "build": "react-scripts build",
+    "build": "env-cmd -f .env.production react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
     "format": "prettier --write ."

src/utils/axios.js

@@ -6,8 +6,9 @@ import axios from 'axios';
 import Swal from 'sweetalert2';
 
 const axiosService = axios.create({
-  baseURL: process.env.NODE_ENV === 'development' ? process.env.REACT_APP_API_URL : '',
+  // baseURL: process.env.NODE_ENV === 'development' ? process.env.REACT_APP_API_URL : '',
-  withCredentials: true, // process.env.NODE_ENV === 'development', // 개발시만 사용 : crossdomain
+  baseURL: process.env.REACT_APP_API_URL,
+  withCredentials: process.env.NODE_ENV !== 'production', // 개발시만 사용 : crossdomain
   timeout: Number(process.env.REACT_APP_SERVER_TIMEOUT),
   headers: {
     'Content-Type': 'application/json'