Linux - Docker 컨테이너 올리기 (react, spring boot, mariadb) [2]

이전 포스팅에서 mariadb와 spring boot를 docker 컨테이너로 올리는 것까지 진행하였다.

2024.06.18 - [Server] - Linux - Docker 컨테이너 올리기 (react, spring boot, mariadb) [1]

Linux - Docker 컨테이너 올리기 (react, spring boot, mariadb) [1]

 

이번 포스팅은 react 프로젝트를 docker image로 만든 뒤 서버에 올리는 것으로 마무리하겠다.

---

✅React

🔹Dockerfile 작성

react는 root 디렉토리에 Dockerfile을 작성해 줬다.

Dockerfile 위치

FROM node

WORKDIR /src

COPY package.json .

RUN npm install

COPY . .

EXPOSE 4000

CMD [ "npm", "start" ]

 

이런 식으로 작성을 했는데... 이곳저곳 블로그를 열심히 찾아봤지만 각 문구들이 무엇을 뜻하는지를 모르겠다...

EXPOSE는 포트를 지정한다고 했는데 결론적으로 docker에서 react 실행시키면 3000번 포트로 진행된다...

 

🔹Docker image 생성

docker build -t react-image .

PS C:\Users\minki\Documents\company_project\board-front> docker images
REPOSITORY                 TAG       IMAGE ID       CREATED        SIZE
react-image                latest    9d1a41b735c9   5 hours ago    2.6GB
springapp                  latest    8cbdc24459d8   17 hours ago   523MB
rlaalsrl9569/springapp     1.0.1     8cbdc24459d8   17 hours ago   523MB

 

위와 같이 react-image가 생성된 것을 확인할 수 있다.

 

🔹Docker hub push

docker login --username={docker.userName}

docker tag 9d1a41b735c9 rlaalsrl9569/react-image:1.0.1

docker push rlaalsrl9569/react-image:1.0.1

 

이전에 얘기한 것과 같이 docker에 로그인해서 태깅하고 push 하면 된다.

 

🔹Docker container 실행

서버에서 docker pull을 통해 docker hub에 있는 react image를 다운 받은 후

docker run --name react-container -p 4000:3000 react-image:1.0.1

 

이제까지 작업을 했던 것처럼 위 명령어를 통해 Docker container로 실행을 할 수 있을 터였는데.....

unknown keyword formatminimum

 

위 에러와 함께 container 실행이 되지 않았다....

 

🔹Unknown Keyword Formatminimum 에러 해결...

해당 에러를 해결하기 위해 나름 삽질을 했는데..

https://trungvose.com/experience/angular-13-error-unknown-keyword-formatMinimum/

Trung Vo

 

결국 npm update를 하지 않아서 생긴 일이었다....

검색하면 금방 해결할 문제였는데.. react에 무지하니 package도 만져보고 기존 소스에 문제가 있는지 살펴보다가

시간을 허비했던 것 같다...

 

오래 방치했던 react app을 재사용해서 테스트를 하고 있었는데 항상 npm update부터 하는 습관을....

 

🔹Docker container 실행

[root@DJ-blabla-v7 ~]# docker ps
CONTAINER ID   IMAGE                            COMMAND                   CREATED             STATUS             PORTS                                                  NAMES
49e1341806b8   rlaalsrl9569/springapp:1.0.1     "java -jar app.jar"       5 hours ago         Up 5 hours         0.0.0.0:8080->8080/tcp, :::8080->8080/tcp              springapp
998a2e18d49d   rlaalsrl9569/react-image:1.0.2   "docker-entrypoint.s…"   5 hours ago         Up 5 hours         4000/tcp, 0.0.0.0:4000->3000/tcp, :::4000->3000/tcp    react-container
3033ec63cb44   mariadb                          "docker-entrypoint.s…"   17 hours ago        Up 17 hours        0.0.0.0:3307->3306/tcp, :::3307->3306/tcp              mariadb

 

드디어 react 프로젝트가 실행되었기 때문에 테스트에 들어갔다.

---

✅Test

회원가입 화면

 

우선 web이 정상적으로 돌아가는 것이 확인되었으니 회원가입을 통해 spring과 잘 연결되어 있는지를 확인한다.

 

에러...

 

.env 파일을 나눴기 때문에 localhost가 아닌 도메인 주소로 가야 하는데 localhost를 바라보고 있다...

container실행 혹은 docker build 시 .env 파일을 달리 설정하는 방법을 찾아봤는데 container 실행 시

.env 파일을 지정할 수 있었다 다만 container를 실행시키는 디렉토리에 .env 파일이 존재했어야 했다...

---

✅재시도

.env.production 파일

서버에 .env.production 파일을 생성하고 진행하였다.

 

🔹Docker container 실행

docker run -d --name react-container --env-file ./.env.production -p 4000:3000 rlaalsrl9569/react-image:1.0.2

---

✅성공

회원가입 성공

여러 삽질 끝에 결국 해결했다...

 

이것 외에도 .env 파일 설정할 때

REACT_APP을 붙이지 않아서 적용되지 않는 해프닝과...

REACT_APP_SERVER_URL = "blabla" 이런 식으로 작성해서 띄어쓰기 때문에 오류가 났던 해프닝...

그리고 큰따옴표를 붙여서 url이 이상하게 들어갔던 해프닝 등등...

 

react에 대한 무지함을 뼈저리게 느끼는 경험이었던 것 같다...

 

혹시 위 방식처럼 서버에 env 파일을 두지 않고 하는 방법을 아시는 분이 계시다면 알려주시면 감사하겠습니다. (꾸벅)