React env 파일 설정법

.env

REACT_APP_AWS_EC2_IP_URL=http://54.180.226.95:8080

react 에서 env 파일 내 설정한 환경변수를 가져올려면 반드시 REACT_APP_을 붙여주어야 합니다!

.gitignore

# env
.env

Test.js

• process.env. 형태로 env 파일 내 값을 불러올 수 있습니다.

import axios from "axios";

// .env 파일에 있는 AWS_EC2_IP_URL 값을 가져오기
const awsEc2IpUrl = process.env.REACT_APP_AWS_EC2_IP_URL;

// 테스트 API 호출
export const getTest = async () => {
  console.log("awsEc2IpUrl: ", awsEc2IpUrl);
  const response = await axios.get(`${awsEc2IpUrl}/api/test/list`);
  return response;
};

env local, production

.env.local

REACT_APP_API_URL=http://localhost:8080
REACT_APP_FRONT_URL=http://localhost:3001

.env.production

REACT_APP_API_URL=http://43.200.239.220:8080
REACT_APP_FRONT_URL=http://43.200.239.220:3001

apiConfig.js

export const API_SERVER_HOST = process.env.REACT_APP_API_URL;
export const FRONT_HOST = process.env.REACT_APP_FRONT_URL;

npm start -> env.local

npm run build -> env.production

로 진행됩니다.

Dockerfile

# 환경변수 설정
ARG REACT_APP_API_URL
ENV REACT_APP_API_URL=$REACT_APP_API_URL

✳️ Docker로 실행할려고 할때!추가해주어야!

./nginx/nginx.conf 파일 만들어주어야!

server {
    listen 80;
    
    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
        try_files $uri $uri/ /index.html;
    }

    # API 프록시 설정 (필요한 경우)
    location /api {
        proxy_pass http://43.200.239.220:8080;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
}

Dockerfile

FROM node:alpine as build
WORKDIR /app

# 환경변수 설정
ARG REACT_APP_API_URL
ENV REACT_APP_API_URL=$REACT_APP_API_URL

COPY package.json package-lock.json ./
RUN npm install --force --silent

COPY . /app
RUN npm run build

FROM nginx:alpine
COPY --from=build  /app/build /usr/share/nginx/html
COPY ./nginx/nginx.conf /etc/nginx/conf.d/default.conf

ENTRYPOINT ["nginx", "-g", "daemon off;"]