리액트 + 스프링 부트 깃허브액션 (nginx프록시, 백엔드 파이프라인)

이번글에서는 백엔드 부분의 흐름에 대해서 설명해 보겠다.

깃허브액션은 

 

이렇게 되어있는데 

name: Build and Deploy

on:
  push:
    branches:
      - main

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest

    steps:
    - name: Checkout source code
      uses: actions/checkout@v2

    - name: Setup Java environment
      uses: actions/setup-java@v1
      with:
        java-version: 11
    
    - name: Grant execute permission for gradlew
      run: chmod +x gradlew
    
    - name: Build with Gradle
      run : ./gradlew clean build

    - name: Build Docker image
      run: |
        docker build -t ${{ secrets.PROJECT_NAME }} .
        docker tag ${{ secrets.PROJECT_NAME }} ${{ secrets.DOCKER_USERNAME }}/${{ secrets.PROJECT_NAME }}:latest
        docker login -u ${{ secrets.DOCKER_USERNAME }} -p ${{ secrets.DOCKER_PASSWORD }}
        docker push ${{ secrets.DOCKER_USERNAME }}/${{ secrets.PROJECT_NAME }}:latest

 

 

지난 글에서 역방향프락시로 해당도메인 80 포트의 요청이 들어오면 3000 포트를 반환하게 설정을 해놓았다.

 

이렇게 해야 하는 이유는 프런트영역에서 바로 들어가는 방법도 있겠지만 바로 접근을 하게 되면 

3000 포트자체가 외부포트로 접근이 가능하게 되어있기 때문에 프런트서버의 보안이 취약해지기 때문에

 

하나의 입구가 있고 각각의 노드는 하나의 입구로밖에 못 들어가게 하는 것이다.

 

여기서 React(3000 포트)로 들어왔다면 

    server {
    listen 3000;
    

    location / {
        root /usr/share/nginx/html;
        index  index.html index.htm;
        try_files $uri $uri/ /index.html;   
   }
   location /api {
    proxy_pass http://backend:8080;
  }


    error_log /var/log/nginx/api_error.log;
    access_log /var/log/nginx/api_access.log;
   }

 

proxy_pass를 통해서 api라는 요청이 들어오면 backend:8080 노드에게 파라미터를 요청한다.

 

대충 리엑트와 스프링부트의 테스트코드를 보면

 

function Example() {

    const [userData, setUserData] = useState('');

    useEffect(() => {
        axios.get('/api/users') // 스프링 부트 API 엔드포인트
            .then(response => {
                setUserData(response.data); // 상태 업데이트
            })
            .catch(error => {
                console.error('Error:', error);
            });
    }, []);
    
    return(
    
    <Button variant="primary" onClick={handleShow}>
                {userData}
            </Button>
            
    );

대충 이렇게 리액트에서 axios로 /api라는 파라미터로 요청을 넣으면 

 

   @RestController
    public class Testcontroller {
        @GetMapping("/api/users")
        public String getUsers() {
            return "Axios Transfer test";
        }
    }

부트에서 api파라미터를 받아서 텍스트를 반환시켜 준다.

여기서 중요한 점은 nginx의 프락시로 api라는 파라미터로 시작을 해야 8080 포트에게 요청을 보낼 수 있다는 점이다.

 

그렇게 하면

 

이렇게 버튼 위에 부트에서 반환된 텍스트가 보이는 것을 알 수 있다.

 

다양한 블로그를 보니 리액트 + 부트조합으로 파이프라인을 구축하는 내용은 많았지만

지식이 전무한 사람이 보면 부가설명이 전혀 없었기 때문에 전혀 이해가 가지 않았다.

 

그렇기에 3일 동안 매일 10시간씩 네트워크의 이해와 커스텀을 하면서 이해가 안 갔던 점을

정리해 보았다. 

 

https(ssl)의 적용도 해보려고 했지만 그건 프로젝트막바지에 해봐야 할 것 같으니 나중에 정리해 보도록 하겠다.(오류가 많이 떠서 시간을 써야 할 것 같지만.....)

 

이제부터 코딩의 시작이다. 앞으로 리액트를 하면서 중요한 점, 알게 된 점 등 한 달 동안 프로젝트를 하면서 시간이 날 때마다

개발일지를 적어보려고 한다. 힘들겠지만 재미는 있으니 버텨보겠다.

 

그럼 오늘은 이렇게 파이프라인에 대해서 정리해 보았다.

다음에는 자동배포의 마지막 내용인 docker swarmpit에 대해서 정리해 보겠다.