오늘은 캡스톤디자인 회의(14:40 ~ )에서 프론트 측의 도메인 요청이 있어 연동을 했다.

🎢포트포워딩

이 부분은 이미 스마일게이트에서 해본 적이 있어, 설정 방식은 이미 알고 있어 간단하게 했다.
다만, iptime 공유기 방식이니 포트포워딩을 진행하려는 공유기가 iptime인지 확인하고 진행해야 한다.

1. 192.168.0.1 접속

• iptime 설정으로 들어갈 수 있는 주소이다. 해당 주소를 검색창에 입력하고 접속하면 로그인을 해야 한다. 이 부분은 본인이 공유기를 설정할 당시 설정한 값이니 참고하자.
  참고) 만약 설정을 하지 않았다면 초기 로그인 이름과 로그인 암호는 모두 admin이다.
  
  또한, 로그인을 하면 해당 화면이 보일 것이다. 여기에서 관리도구로 접속하자.
  

그 다음, 본인의 공유기의 연결 형태를 반드시 살펴보아야 한다.
메뉴 탐색기의 기본 설정 > 시스템 요약 정보에 들어가면 해당 화면이 보일 것이다.

여기에서 외부 IP 주소를 잘 봐주어야 한다.

-> 이 곳의 주소가 1.XX... 처럼 192.168 형태가 아니라면 사설 IP가 곧바로 공유기에 연결이 되어있다는 것으로 이해하면 된다.
-> 하지만, 192.168.X.X와 같은 형태로 지정되어 있다면 이중 포트포워딩을 해야만 한다.

📌이중 포트포워딩?
이중(2중) 공유기 or 다중 공유기 포트포워딩 방법
이론은 해당 링크를 참고하기 바란다.
본인이 이중 포트포워딩이 필요한 환경이라면, 방금 우리가 확인했던 외부 IP 주소가 현재 접속한 공유기보다 앞단에 연결되어 있는 네트워크 장치라고 이해하면 된다.
그럼 생각보다 간단할 것이다.
방법은? 확인한 외부 IP 주소로 검색창 검색 해서 들어가면 된다!!
자세한 설정 방법 역시 위 링크에 나와 있으니, 참고하기!

이제, 원격 관리 포트를 설정해주자.
메뉴 탐색기의 고급 설정 > 보안 기능 > 공유기 접속/보안관리에 들어가면 해당 화면이 보일 것이다.

-> 해당 화면에서 원격 관리 포트 사용을 체크해주고, 원하는 포트를 작성해준다.
(본인의 경우, 8081 포트를 열어야 할 것으로 판단하여 지정했다.)

---

2. 포트포워딩
   이때, 본인이 허용할 외부 포트가 무엇인지 먼저 알아야 한다.
   본인의 경우
   springboot, MySQL, Redis
   이렇게 3가지를 사용했기 때문에
   8080(또는 개인이 서버 개발 시 사용한 포트), 3306, 6379
   3가지의 포트포워딩을 진행했다.
   
   -> 해당 경로로 이동하면 다음과 같은 화면이 나올 것이다.
   

본인의 경우, 이미 설정을 했기 때문에 이렇게 많지만 대부분의 경우 거의 아무것도 써있지 않을 것이다.

새 규칙 추가를 눌러주면 아래에 규칙 이름, 내부 IP 주소 등 쓸 수 있는 화면이 보일 것이다.
자, 그러면 포트포워딩 설정을 시작해주자.

첫번째, 스프링부트 포트 열어주기

💡 규칙 이름 : 원하는 대로 작성하면 된다.
💡 내부 IP 주소 : 왼쪽의 현재 접속된 IP 주소를 클릭해줘야 한다.
💡 프로토콜 : TCP가 기본으로 설정되어 있다. 건드리지 말자
💡 외부 포트 : "외부에서 입력하여 접속하고자 하는 포트 번호"이기 때문에 8081 또는 80으로 등록한다.
 				-> 외부에서 "주소:80" 이런 식으로 접속을 요청할 수 있는 것이다.
💡 내부 포트 : 스프링부트에서 설정한 포트 번호(본인의 경우 8081 포트를 사용했음.

작성을 마쳤다면 적용 버튼이 활성화될 것이다. 눌러준다.

⚒️ Trouble shooting

• 원래는 외부 포트와 내부 포트를 8081로 동일하게 지정했었다.
• 하지만, 이 경우 이상하게도 Postman으로 요청을 보내면, 400에러만 뱉어냈다.
• 설마 하는 마음으로 외부 포트를 알려진 포트인 80으로 변경해주고, 요청을 날리니 성공했다.

---

두 번째, 나머지 모두 포트 열어주기

• 포트 포워딩 자체의 방식을 모두 동일하기 때문에 바로 위를 참고하여 원하는 서비스의 포트를 모두 적용해주면 끝난다.
  

  한가지 참고사항
  만약, 모든 설정이 동일함에도 접속이 안된다면 순위를 변경해본다.
  본인이 접속하려는 서비스의 포트의 순위를 높여주면 잘 연결될 가능성이 높아진다.
  본인의 경우, Springboot 포트를 2순위로 변경하여 상단에 올려두었다.

자, 이제 그러면 도메인을 등록하고 연결해주자.

---

🔗도메인 연결

• 도메인 연결의 경우, 경험이 있어 어렵지는 않았지만 이번에는 💰을 쓰게 되었다.
• 해당 부분에서 돈을 쓰는 것을 원하지 않는다면 다른 방식이 있으니 참고하자.

먼저, 본인의 경우 원래는 freenom이라는 사이트에서 무료로 도메인을 받아왔었다.
하지만 로그인을 하려고 하니, 소셜 로그인이 아니면 안되는 상태 + 구글이 자꾸 로그인 거부되는 문제가 발생하여 다른 방법을 택했다.

사전 점검 : 환경
본인의 경우, 작년에 리눅스 수업을 들으며 이미 닷홈이라는 사이트에서 무료 웹 호스팅을 계속 연장중인 상태였다.
그렇기 때문에, 닷홈으로 진행하기로 했다.

1. 닷홈 접속

• 닷홈 링크
  해당 링크를 눌러 접속하고, 로그인을 한다.
  (만약, 회원가입을 하지 않았다면, 회원가입 후 로그인 하자.)

  마이 닷홈을 눌러주자.

  도메인 관리 > 도메인 사용현황에서 현재 도메인을 사용하고 있는지 먼저 확인한다.
  

  대부분의 경우, 이 곳에서 아무것도 없는 것을 볼 수 있을 것이다.
  1) 닷홈 홈페이지 상단에서 도메인 클릭 -> 도메인 검색 클릭
  2) 도메인 검색 창에 원하는 이름 검색 & 신청 & 결제
  
  -> 이렇게 사용이 가능한 도메인이 어떤 것이 있는지 검색이 될 것이다.
  본인의 경우 jjclub을 검색했고 무료는 아니지만 1년에 11000원이면 사용이 가능한 pe.kr을 가진 도메인을 구매했다.

• 도메인 구매를 마치고 나면, 마이 닷홈 > 도메인 관리 > 도메인 사용화면 이 화면에서 도메인이 보일 것이다.
  

이제, 이 화면에서 DNS 관리에 접속해주고, DNS 레코드 관리를 눌러주자.

그러면 이런 화면이 보일 것이다.

여기에서 레코드 추가 클릭!

그러면 이 화면이 보인다.

💡 타입 : A
💡 이름 : 원하는 이름 입력
💡 TTL : 3600(아마 default로 설정되어 있을 것이니 신경 안써도 됨)
💡 값 : 외부 IP 주소

여기에서 값 부분은 우리가 포트포워딩 시에 확인했던 외부 IP 주소이다!!

모두 입력했다면 추가하기 클릭해서 저장해준다.
그러고 나면 이제 도메인 준비는 모두 끝났다.

---

💻IntelliJ(SpringBoot) 설정

• 본인은 SpringBoot를 이용하여 백엔드 서버 API를 개발했다.
• 또한, MySQL Workbench와 Windows용 Redis를 사용해 DB를 구성했다.
• API 테스트는 Postman을 사용했다.

1. application.yml에서 정보 추가&수정(or application.properties도 상관 X)

Project > resources > application.yml

다음과 같이 작성해주면 끝이다.

포트는 8081을 이용할 것이라는 표현이다.
또한, "address: 0.0.0.0"의 표현은 어떠한 주소라도 접속을 허용하겠다는 표현 정도로 이해해주면 된다.
이 부분을 작성하지 않으면, 여러분이 run할 서버는 자동적으로 localhost(127.0.0.1)을 연결할 것이다.
그러니, 우리가 접속을 원하는 도메인주소 또는 ip 주소로 연결을 해주기 위해 작성하는 것으로 이해하자.

참고 링크 : [Spring Boot] 스프링 부트 외부 접속 안되는 문제

테스트

인텔리제이에서 서버를 구동하고, Postman에서 요청을 날려보자.
이 부분을 살펴보자.

원래는 로컬에서 대부분 테스트를 한다면 이 부분이 http://localhost:8080/...과 같이 되어있을 것이다.
이 부분은 localhost에서만 테스트가 가능하도록 해주는 것이다.

• 그렇기 때문에 외부에서 접속을 할 수 있고, ip 주소가 아닌 도메인 주소로 접속할 수 있도록 하는 처리를 이 포스트에서 해온 것이다.

http://Cap.jjclub.pe.kr.:80/
-> 여기에서 Cap.jjclub.pe.kr은 현재 요청을 하고자 접속하려는 도메인 주소를 뜻하고, :80은 80번 포트를 사용해 접속하겠다는 것을 뜻한다.

테스트 결과?

-> 대표적으로 4가지를 테스트했다.
(회원정보 조회, 수정, 탈퇴, 토큰 재발급 등은 굳이 하지 않았다.)

---

• 이메일 보내기
  
  💡Request
• 요청 형식 : POST
• URI : http://Cap.jjclub.pe.kr:80/api/v1/auth/email
• Body

  {
      "email":"dlgkdis801@jj.ac.kr"
  }

  💡Response
  • 200 Ok

    {
      "success": true,
      "code": 0,
      "msg": "성공하였습니다.",
      "data": "send mail"
    }

    

---

• 이메일 인증받기
  
  💡Request
• 요청 형식 : POST
• URI : http://Cap.jjclub.pe.kr:80/api/v1/auth/verifyCode
• Body

  {
    "email": "dlgkdis801@jj.ac.kr",
    "code": "899719" //해당 부분은 실제 이메일로 받은 인증 코드를 넣어야 함.
    }

  💡Response
  • 200 Ok

    {
      "success": true,
      "code": 0,
      "msg": "성공하였습니다.",
      "data": "true"
    }

---

• 회원가입
  
  💡Request
• 요청 형식 : POST
• URI : http://Cap.jjclub.pe.kr:80/api/v1/auth/signup
• Body

  {
      "email":"dlgkdis801@jj.ac.kr",
      "password":"1234",
      "userName":"이하얀"
  }

  💡Response
  • 201 Created

    {
        "result": "success",
        "data": {
            "email": "dlgkdis801@jj.ac.kr",
            "userName": "이하얀",
            "mbti": null
        }
    }

---

• 로그인
  

💡Request

• 요청 형식 : POST
• URI : http://Cap.jjclub.pe.kr:80/api/v1/auth/login
• Body

  {
      "email":"dlgkdis801@jj.ac.kr",
      "password":"1234"
  }

  💡Response
  • 201 Created

    {
      "result": "success",
      "data": {
          "grantType": "bearer",
          "accessToken": "eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOiIxIiwiYXV0aCI6IlJPTEVfVVNFUiIsImV4cCI6MTY4NDc1NTk3OX0.N_HmC4C8B5P1MqJ71NixyipFUrI9TLjjnvl9xHhRmnw343SeTwsYwjxV-GaKpZJ5rMX6eKUAt69kbr29zJyFKQ",
          "refreshToken": "eyJhbGciOiJIUzUxMiJ9.eyJleHAiOjE2ODUzNTg5Nzl9.pz9i-0fwIZteA3FArfZanQp4a4DqnVJFk8qsOUO2dBPsUJI_Pl_MdYoIYPCQCwS-W3Jeq2sqPeJOrgu5yR6k7A",
          "accessTokenExpiresIn": 1684755979760
      }
    }

---

정리

다음과 같이 도메인으로도 잘 테스트되는 것을 확인할 수 있다.
도메인을 이용해 API를 프론트엔드와 공유해야한다면 지금까지 이야기한 방식을 사용해볼 수 있을 것이다.

순서 간단 정리
1. 포트포워딩
2. 도메인 구매(or 발급)
3. DNS 설정
4. 서버에서 API 테스트

그럼 이만!