[TIL-20260128] Nginx Basic Auth, Github Actions로 .htpasswd 생성

 

🍀 To Do List

 

 

👩🏻‍💻 Today I Learned ...

실무에서는 Swagger를 써보지 못 해서 .. 사이드 프로젝트에서 처음 도입하면서 보안 처리를 어떻게 하는 게 좋을지 막막했다.

FE 개발자인 짝꿍한테 물어보니, 짝꿍의 회사에서는 Nginx에서 접근 제한을 하고 있다고 알려줘서 나도 적용해봤다 !

TIL에는 간단한 개념 정리만 하고, 트러블 슈팅을 포함한 자세한 내용은 사이드 프로젝트 기록 일지에 작성할 예정이다. ✍🏻

 

 

Nginx에 Basic Auth 적용하기

Basic Auth란 서버에서 인가되지 않은 사용자들의 접근을 제한할 수 있는 인가 시스템을 의미한다.

Nginx에 basic Auth를 적용하기 위해서는 nginx.conf 파일에 basic Auth을 추가해주고, 아이디 패스워드 값이 담긴 .htpasswd 파일의 위치를 지정해주면 된다.

 

나는 아래처럼 Swagger ui에 접속했을 때 아이디와 패스워드를 입력해서 접근할 수 있게 하였다.

        location ~ ^/(swagger-ui|v3/api-docs) {
            auth_basic "Restricted Access - Swagger";
            auth_basic_user_file /etc/nginx/.htpasswd;
			
            #.. 생략
            
        }

 

참고 : 

[Nginx] Basic Auth

 

 

 

 

 

 

Github Actions로 .htpasswd 생성

dev 서버에서도 보안을 신경쓰는 게 좋을 것 같다는 생각이 들어서 스프링 프로젝트에 .htpasswd를 직접 생성하지 않았다.

Repository secrets에 로컬에서 생성한 아이디와 패스워드를 등록한 후, workflow에 .htpasswd 생성해서 Docker image 빌드하는 step을 추가했다.

 

1. .로컬에서 htpasswd 생성

# htpasswd 설치
# macOS
brew install httpd


# 사용자 추가 (비밀번호 포함)
htpasswd -cb .htpasswd {아이디} {패스워드} 

# 파일 확인
cat .htpasswd
// 형식: username:encrypted_password

 

 

2. Repository secrets 추가

Base64 인코딩 된 아이디와 패스워드 값을 시크릿 값에 추가해준다.

cat .htpasswd | base64 | tr -d '\n'

 

 

3. workflow 수정

.htpasswd 생성하는 step을 추가해준다.

      - name: Create .htpasswd file from secrets
        run: |
          echo "${{ secrets.HTPASSWD_BASE64 }}" | tr -d '\n' | base64 -d > ./nginx/.htpasswd
          
	  - name: Build Nginx Docker image (DEV)
        uses: docker/build-push-action@v5
        with:
          context: .
          file: ./nginx/Dockerfile
          
       # .. 생략

 

 

base64로 인코딩해서 저장했던 아이디와 패스워드를 디코딩하여 빌드 컨텍스트의 nginx 디렉터리에 생성하면,

해당 파일을 포함한 Nginx 이미지를 빌드하게 된다. Dockerfile에는 아래 명령어가 포함되어 있어야 한다.

 

COPY nginx/.htpasswd /etc/nginx/.htpasswd

 

 

💡 Build Context : `docker build` 명령어를 실행했을 때 접근 가능한 파일의 집합

(오늘도 느꼈지만 Docker 공부 더 열심히 해야겠다 ...  )

 

 

참고 :

[Docker] Build Context

 

 

 

우역곡절 끝에 dev 배포 성공하고 원하던 대로 별도의 로그인을 통해 Swagger UI에 접근 할 수 있게 구현했다. ✌🏻