# ? Spring Boot 프로젝트(fly, AWS 배포) ### [강사의 리포지터리 todo 문법](https://github.com/woooyoung/java_example_11) ### [강사의 리포지터리 lombok ](https://github.com/woooyoung/test_project_11) ### [강사의 리포지터리 Surl_project_11](https://github.com/woooyoung/Surl_project_11) --- # 1강 - [1강, 프로젝트 세팅](https://youtu.be/WSDpxjrE6vI) - [git](https://github.com/woooyoung/java_example_11/commit/b9bd5884f0f262b813a3439305ddb7abf0c702f6) # 2강 - [2강, todo CRUD 구현](https://youtu.be/ylUm0k9lKUU) - [git](https://github.com/woooyoung/java_example_11/commit/3a8aeb6288110e8b0d4b7cec04f99c110cd0274f) # 3강 - [3강, run 메서드 크기 줄이기](https://youtu.be/sZnzuEutZ34) - [git](https://github.com/woooyoung/java_example_11/commit/342566d65157c979422d70d0e88ecd9d46ff50ad) # 4강 - [4강, 핵심기능 이전](https://youtu.be/Dm3wsct_vQI) - ![img](https://upload.wikimedia.org/wikipedia/commons/a/a0/MVC-Process.svg) - [git](https://github.com/woooyoung/java_example_11/commit/ae281e3cf22cbe235a89fa86f203d29192b93174) # 5강 - [5강, 프로젝트 세팅](https://youtu.be/Do1C1hkxpSA) - [git](https://github.com/woooyoung/surl_project_11/commit/57a38c81162f440a58e8150ffeda7e717718fed0) # 6강 - 운영환경(실제 서비스 환경)에서는 클라이언트(고객,브라우저)와 서버(주인, 스프링부트)는 다른 컴퓨터에서 실행된다. - 클라이언트와 서버 사이에는 통신이 필요하다. - 브라우저와 스프링부트 사이에는 이미 통신기능이 들어있다. - HTTP 방식으로 통신한다. - 스프링부트 프로젝트에서 ~Controller 를 고객과의 소통을 담당하는 컨트롤러로 만들어야 함 -> @Controller - 컨트롤러의 모든 메서드를 외부(브라우저)에서 호출(URL 호출) 할 수 있도록 만들어야 한다. x - 특정 메서드를 외부에서 호출 가능한 상태로 만들려면? @GetMapping("경로") 추가 - 컨트롤러 안에서 필요한 특정 메서드만 골라서 액션 메서드로 만들 수 있다. - 고객의 요청(주소창에 입력 enter, F5)마다 액션 메서드가 실행된다. - 액션 메서드가 수행되고, return값을 해당 요청에 대한 응답으로 화면에 표시되길 원한다면 -> @ResponseBody --- - 스프링부트의 목적은 고객의 입장에서 보면 원격지원에 있다. - todoApp 처럼 고객이 직접 스프링부트가 실행되고 있는 컴퓨터로 와서 입력할 필요 없다. - @Controller, @GetMapping, @ResponseBody - 자바가 이해하는 주석 -> 스프링부트에게 개발자(나)의 의도를 알리기 위함 ## 컨트롤러 관련 어노테이션의 역할 | | @Controller | @GetMapping | @ResponseBody | | --- | --- | --- | --- | | 붙는 위치 | 컨트롤러 | 메서드 | 메서드 | | 역할 | 해당 클래스의 객체를
스프링부트가 생성하고(1개만)
HTTP 요청을 처리할 때마다 사용하도록 | 해당 메서드를
브라우저를 통해서 호출 가능하도록 | 해당 메서드의 return 값을
String 형태로 변환하여
응답본문으로 설정하도록 | - [6강, 원격 메서드 호출](https://youtu.be/rrOE3mRNU-Y) - [git](https://github.com/woooyoung/surl_project_11/commit/8679e6e325ba881b908c1df3da2e36df479a88d7) # 7강 - HTTP는 편지를 이용해서 고객과 점원이 대화를 나누는 방법에 대한 규칙 - 고객 == 클라이언트 == 브라우저 == 서비스 이용자 - 점원(주인) == 서버 == 스프링부트 == 서비스 제공자 - 고객은 요청 편지를 점원에게 보내고, 점원은 그에 대한 응답 편지를 보낸다. - 편지는 헤더와 바디로 나뉜다. - 헤더에는 부가정보, 바디에는 내용이 담긴다. - 고객의 생각(데이터)이 점원에게 전해지려면, 양쪽이 모두 다 이해할 수 있는 String을 사용해야 한다. - 브라우저(고객)의 모국어는 자바스크립트, 스프링부트(점원)의 모국어는 자바 - 브라우저는 자바의 int, boolean, char, float, 배열, 리스트, 맵... 을 이해할 수 없다. - 스프링부트도 number, 객체... 를 이해할 수 없다. - 동시에 이해하는게 String이다. ## HTTP통신과 편지통신의 비교 | | HTTP 통신 | 편지로 통신 | | --- | --- | --- | | 요청 | Request(요청) | 보낸편지 | | 응답 | Response(응답) | 답장편지 | | 요청자 | 고객(클라이언트) | 보낸이 | | 응답자 | 주인(서버) | 받은이 | | 편지내용(헤더) | 발신자 주소, 수신자 주소 | 발신자 주소, 수신자 주소 | | 편지내용(바디) | 핵심내용 | 편지의 본문 | ## 자바스크립트와 자바의 자료형 비교 | | 자바스크립트 | 자바 | | --- | --- | --- | | 숫자 | number | byte, short, int, long, float, double | | 논리 | boolean | boolean | | 문자열 | string | String | | 고정크기배열 | 없음 | new int[50] | | 리스트 | 배열(`[10, 20, 30]`) | List(`List.of(10, 20, 30)`) | | 맵 | 객체(`{"age":23, "name": "Paul", "name-2": "Kang"}`) | HashMap(`Map.of("age", 23, "name", "Paul", "name-2", "Kang")`) | | 문자 | number | char | - [7강, Http와 String](https://youtu.be/rdMqSZmedSE) - [git](https://github.com/woooyoung/surl_project_11/commit/d0baf3c9d24627c48ef61ac79f19d39e6decb407) # 8강 ## 케이스 1 : HTTP 요청 `/somePath?age=1&active=true` 에 의해서 액션 메서드 `hello(int age, boolean)` 가 호출될 때 잭슨이 작동하는 방법 $$uml participant 브라우저 participant "스프링부트 웹 서버" as 서버 participant "자동으로 작동되는 잭슨 라이브러리" as 잭슨 participant "hello 컨트롤러 액션 메서드" as 컨트롤러 브라우저 -> 서버 : HTTP 요청 /somePath?age=1&active=true activate 서버 서버 -> 잭슨 : 쿼리 스트링 파싱("age=1", "active=true") activate 잭슨 잭슨 -> 잭슨 : 문자열 "1"을 int 1 로 변환 잭슨 -> 잭슨 : 문자열 "true"를 boolean true 로 변환 잭슨 -> 컨트롤러 : 액션 메소드 호출\n public void hello(int age, boolean)\nhello(1, true); deactivate 잭슨 activate 컨트롤러 컨트롤러 -> 컨트롤러 : 메서드 실행 컨트롤러 -> 서버 : 처리 결과 서버 -> 브라우저 : HTTP 응답 deactivate 컨트롤러 deactivate 서버 $$ ## 케이스 2 : HTTP 요청에 의해서 호출된 액션메서드가 공용어인 String(Text) 이외에 다른 형태의 데이터를 리턴한 경우 $$uml participant 브라우저 participant "스프링부트 웹 서버" as 서버 participant "자동으로 작동되는 잭슨 라이브러리" as 잭슨 participant "컨트롤러 액션 메서드" as 컨트롤러 브라우저 -> 서버 : HTTP 요청 /married activate 서버 서버 -> 컨트롤러 : 액션 메소드 호출\n public boolean marrid() activate 컨트롤러 컨트롤러 -> 컨트롤러 : 비즈니스 로직 처리(true 리턴) 컨트롤러 -> 잭슨 : true 를 "true" 로 변환 deactivate 컨트롤러 activate 잭슨 잭슨 -> 서버 : 처리 결과(예: "성공") 서버 -> 브라우저 : HTTP 응답 (예: "성공") deactivate 잭슨 deactivate 서버 $$ ## XML과 JSON 비교 | 데이터 유형 | XML 예시 | JSON 예시 | | -- | -- | -- | | 숫자 | `22` | `{"age": 22}` | | 문자 | `Paul` | `{"name": "Paul"}` | | 객체 | ` 22 Paul ` | `{"age": 22, "name": "Paul"}` | | 배열 | `2223` | `[22, 23]` | | 배열<객체> | ` 22 Paul 23 Alice ` | `[{"age": 22, "name": "Paul"}, {"age": 23, "name": "Alice"}]` | - [8강, 여러가지 리턴타입, Jackson과 Json 파싱](https://youtu.be/H-ULXdAnEQU) - [git](https://github.com/woooyoung/surl_project_11/commit/f40406dbb59cfcc95028d7baae6aac8500ca52d1) # 9강 ## 유용한 어노테이션 | 어노테이션 | 역할 | | -- | -- | | @Getter | 모든 필드에 대한 getter 메서드를 자동으로 생성 | | @Setter | 모든 필드에 대한 setter 메서드를 자동으로 생성 | | @ToString | 클래스의 toString 메서드를 자동으로 생성. @ToString.Exclude로 특정 필드를 제외할 수 있음 | | @AllArgsConstructor | 모든 필드를 매개변수로 받는 생성자를 자동으로 생성 | | @Builder | 빌더 패턴을 구현. 객체 생성 시점에 설정해야 할 필드를 명시적으로 설정할 수 있도록 함 | | @JsonIgnore | JSON 직렬화/역직렬화 시 특정 필드를 무시하도록 지정 | | @EqualsAndHashCode | equals와 hashCode 메서드를 자동으로 생성. @EqualsAndHashCode.Include로 특정 필드만 포함 가능 | | @SneakyThrows | 메서드에 선언된 checked exception을 무시하고 런타임 예외로 처리하도록 함 | - [9강, Lombok](https://youtu.be/Hv9XFutjHSI) - [git](https://github.com/woooyoung/surl_project_11/commit/ad26e8da2a713ee152994d18fdb6285b80fa50a0) # 10강 - [10강, 프로젝트 세팅 및 URL추가](https://youtu.be/VIPH8gHaUmk) - [git](https://github.com/woooyoung/Surl_project_11/commit/78de20cb7e045792fc82ac07a578eebdf373233b) # 11강 - [11강, URL 단축 방식 설정](https://youtu.be/jism45ZWsMM) - [git](https://github.com/woooyoung/Surl_project_11/commit/ec62831c4b3f4c25e8eb2e69c3762868fabdb34f) # 12강 - [12강, 단축된 URL을 통해 원본 URL로 이동](https://youtu.be/XJQJnMZWXOc) - [git](https://github.com/woooyoung/Surl_project_11/commit/f8474e564597079d4b61e61ee6f9de99f4b1b8ca) # 13강 - [13강, 도커(docker)](https://youtu.be/Cyy6PSAM7pc) # 14강 ## 핵심 - 도커 이미지는 밀키트와 비슷하지만 훨씬 더 편리합니다. - 비유하자면, 밀키트는 밀키트인데 조리도구(가스레인지, 냄비 등)까지 포함된 밀키트라고 보시면 됩니다. - 그래서 현대의 웹 서비스에서 주류기술로 자리잡았습니다. - 컨테이너(Container) - 컨테이너는 애플리케이션과 그 필요한 모든 것을 포함하는 격리된 환경입니다. - 가볍고 빠르게 시작되며, 다른 컨테이너나 호스트 시스템과의 충돌 없이 독립적으로 실행됩니다. - 이는 개발, 배포, 실행을 일관되게 만들어 줍니다. - 이미지(Image) - 이미지는 컨테이너를 생성하는 데 사용되는 템플릿으로, - 애플리케이션 실행에 필요한 코드, 라이브러리, 환경설정 등이 포함됩니다. - 읽기 전용이며, 컨테이너는 이 이미지를 기반으로 생성됩니다. - 도커 데몬(Docker Daemon) - 도커 데몬은 컨테이너의 생성, 실행, 모니터링, 삭제 등을 관리하는 - 백그라운드 프로세스입니다. - 도커 클라이언트와 통신하며, - 도커의 모든 중요 작업을 담당합니다. - 도커 파일(Dockerfile) - 도커 파일은 도커 이미지를 빌드하기 위한 설정 파일로, - 이미지 생성 과정에 필요한 명령어를 순서대로 담고 있습니다. - 이 파일을 사용하면 이미지 빌드 과정을 자동화하고, - 재사용 가능한 방식으로 관리할 수 있습니다. - 도커 허브(Docker Hub) - [https://hub.docker.com/](https://hub.docker.com/) - 도커 허브는 도커 이미지를 저장하고 공유할 수 있는 클라우드 서비스입니다. - 사용자는 자신의 이미지를 업로드하여 공유할 수 있으며, - 다른 사람이 만든 이미지를 검색하고 사용할 수 있습니다. ## 모든 도커자원(이미지, 컨테이너, 네트워크 볼륨) 삭제 명령어 - 가끔 도커 관련 실습을 처음부터 다시하고 싶을 때 아래 명령어가 유용합니다. ```bash # 컨테이너 삭제 docker rm -f $(docker ps -qa) # 이미지 삭제 docker rmi -f $(docker images -qa) # 안쓰는 네트워크 삭제 docker network prune -f # 안쓰는 볼륨 삭제 docker volume prune -f ``` ## 도커 데스크톱 다운로드 - [도커 데스크톱 다운로드 - https://www.docker.com/products/docker-desktop](https://www.docker.com/products/docker-desktop) ## 자주 발생하는 도커설치 관련 에러 1 : 윈도우에서 도커 데스크톱 설치시, Hardware assisted virtualization and data execution protection must be enabled in the BIOS ### 오류 ``` Hardware assisted virtualization and data execution protection must be enabled in the BIOS ``` ### 해결책 - [영상 - 인텔 - 가상화기능 BIOS에서 VT 활성화하기 Virtualization Technology](https://youtu.be/EebFWCPoJQo?t=1m33s) - [영상 -AMD - AMD CPU 가상화 활성화하기](https://youtu.be/p0QKSlMsRV8) - [14강, 도커 데스크톱 설치(docker desktop)](https://youtu.be/3p1Uwo_vv1I) # 15 강 - HTML 파일을 원격지의 브라우저에게 전송하려면 웹서버가 필요하다 - 웹서버 중에 유명한 것이 nginx - nginx 도커 이미지는 이미 도커 허브에 있다. - 도커 이미지를 만드는게 목표 - 도커 이미지는 Dockerfile로부터 생성 - Dockerfile 작성 - 도커허브의 nginx:latest 를 기반으로 하겠다 - index.html 파일 생성 -> 소스코드 - 도커 이미지 생성 - docker build -t 이미지 이름 . - 도커 이미지 이름 : 리포지터리_이름:태그 - 기본 태그 : latest - 참고 : latest는 생략 가능(태그를 latest로 쓰고 싶다면) - docker build -t nginx-1 . == docker build -t nginx-1:latest . - 생성된 도커 이미지 확인 - docker images ## HTML 앱과 스프링부트 앱 비교 | | HTML 앱 | 스프링부트 앱 | 떡볶이 밀키트 | | --- | --- | --- | --- | | 소스코드 | index.html | SurlController.java | 떡, 양념 | | 필요의존성 | 웹서버(NGINX) | JVM(21 Version) | 냄비, 가스레인지 | | 포트(최종 사용자가 결과물을 달라고 요청하는 창구) | 80(기본 포트가 80) | 8090(보통은 8080, 우리가 8090으로 설정) | 주방(밀키트를 가지고 요리하는 사람이 주방에 있고 요청이 들어올 때 마다 요리를 하나 만들어서 제공한다고 가정) | ## index.html ```html

Hello

``` ## Dockerfile ```dockerfile # 기본 이미지 설정 FROM nginx:latest # index.html 파일 복사 COPY index.html /usr/share/nginx/html/ # Nginx 실행 CMD ["nginx", "-g", "daemon off;"] ``` - [15강, 도커 이미지 만들기 1](https://youtu.be/1C05YCgyqSo) - [15강, 도커 이미지 만들기 2](https://youtu.be/t5tNsQYpqd4) # 16강 - 도커 이미지 삭제 - docker rmi 이미지_이름 docker rmi 이미지_ID - 도커 이미지 이름 : 리포지터리_이름:태그 - 기본 태그는 latest - 생략가능 - ex) docker rmi nginx-1:latest . == docker rmi nginx-1 - [16강, 도커 이미지 삭제](https://youtu.be/1Gm1gGQhu8g) # 17강 - 도커 이미지로 도커 컨테이너를 생성할 수 있다.(도커이미지를 실행하면 도커 컨테이너가 생성된다) - 도커 이미지는 일종의 템플릿(이력서의 양식) - 도커 컨테이너는 도커 이미지를 디스크에서 복사해서 메모리에 띄운 것이다. - 이력서를 작성을 해야해. 이력서 양식 다운로드. 원본에서 작업하지 않고, 복사본을 만들고 작업하는 것과 비슷함. - 80 포트를 사용하는 nginx-1-1 컨테이너를 띄운다. - docker run -d -p 80:80 --name nginx-1-1 nginx-1 --> 다른 컨테이너에서 80 x, nginx-1-1 x - 8081 포트를 사용하는 nginx-1-2 컨테이너를 띄운다. - docker run -d -p 8081:80 --name nginx-1-2 nginx-1 --> 다른 컨테이너에서 8081 x, nginx-1-2 x - 하나의 도커 이미지로 2개의 컨테이너를 띄웠고(같은 이름 불가, 같은 포트 불가라서 서로 다른걸 할당) - 도커 컨테이너 삭제 - docker rm -f nginx-1-1 - docker rm -f nginx-1-2 - [17강, 도커 컨테이너 생성 및 삭제](https://youtu.be/JIgQ3D14NYg) # 18강 - fly.io 는 서버(PC)를 제공해준다 - 서버 == 컴퓨터 - 서버에는 공인 IP가 부여되어 있다 - 일반적으로 웹 서버에는 도메인(IP의 별칭)이 부여되어 있다. - 웹 서버 : 서버중에서 웹 서비스를 제공하는 서버 - flyctl을 설치하면 컴퓨터에서 명령어로 fly.io를 이용할 수 있다. - flyctl 을 설치하고 로그인해야 사용 가능 - [18강, flyctl 설치](https://youtu.be/oyIboVgjTII) # 19강 - fly.io에 서비스 배포를 위해서는 '앱'이 필요함 - 앱은 fly.io에서의 서비스 단위 - 내가 5개 서비스 해야해. 앱이 5개 필요해 - 앱은 `fly launch --no-deploy` 명령어로 생성 - 앱은 대시보드에서 확인 가능 - fly.toml 파일이 생성됨 -> 앱의 설정을 바꿀 때 사용 - fly deploy 명령어 수행 전이기 때문에 앱은 현재 `Pending` 상태 - [19강, flyctl로 앱 생성하기](https://youtu.be/gtmNlFNCw9w) # 20강 - 3가지 요소만 있으면 fly.io 배포 가능 - 3가지 요소: 프로젝트 폴더, Dockerfile, fly.toml - fly.toml만 있으면 x, fly.toml에 대응하는 fly.io `앱`이 있어야 함 - 프로젝트 폴더에서 `fly deploy` 명령어 입력 - 프로젝트 폴더의 모든 파일들이 fly.io 앱으로 복사 - 빌더 앱이 생성되고 업로드 된 파일들로 도커 빌드 진행 - 도커 이미지 완성 - machines(보통 2개)에 컨테이너가 위치함 - 여기서 기계는 머신, PC, 서버를 의미 - 도메인은 `https://앱_이름.fly.dev - 소스코드가 바뀌면 재배포 해야함 - 재배포 명령어 : fly deploy - 머신에서 돌아가고 있는 기존 컨테이너는 제거되고 새 도커이미지로 만든 컨테이너가 차지 - 기존 컨테이너가 모두 사라지고, 새 컨테이너가 그 자리를 차지하게 되면, - 단순 교체로 인한 고객입장에서의 중단 타임 발생 - 고객 입장에서 웹서비스를 이용하는중에 404 를 볼 수 있다. - fly.io는 기본적으로 롤링 업데이트를 사용한다. -> 무중단배포(교체) 방식 - [20강, fly.io 앱에 배포 테스트](https://youtu.be/E0eFeyOb2vw) # 21강 ## Dockerfile(자바 21, 스프링부트 배포용) - 주의사항 - 기존 Dockerfile은 작동하지 않습니다. - 아래의 Dockerfile을 사용해주세요. ```dockerfile # 첫 번째 스테이지: 빌드 스테이지 FROM gradle:jdk21-graal-jammy AS builder # 작업 디렉토리 설정 WORKDIR /app # 소스 코드와 Gradle 래퍼 복사 COPY build.gradle . COPY settings.gradle . # Gradle 래퍼에 실행 권한 부여 RUN gradle wrapper # 종속성 설치 RUN ./gradlew dependencies --no-daemon # 소스 코드 복사 COPY src src # 애플리케이션 빌드 RUN ./gradlew build --no-daemon # 두 번째 스테이지: 실행 스테이지 FROM container-registry.oracle.com/graalvm/jdk:21 # 작업 디렉토리 설정 WORKDIR /app # 첫 번째 스테이지에서 빌드된 JAR 파일 복사 COPY --from=builder /app/build/libs/*.jar app.jar # 실행할 JAR 파일 지정 ENTRYPOINT ["java", "-jar", "-Dspring.profiles.active=prod", "app.jar"] ``` - `Dockerfile` 생성 - 스프링부트에 맞게 세팅 - `fly launch --no-deploy` => `앱` 만들기, `fly.toml` 파일 생성 - 이 과정에서 생성 되는 앱은 `cwy-surl-project-11` - HomeController 생성, `/` 요청 받기 - 프로젝트 폴더에서 `fly deploy` 명령어 입력 - 프로젝트의 모든 폴더의 모든 파일들이 fly.io 앱으로 복사된 뒤 빌드 - fly.io 안에서 도커 이미지 생성 - 도커 이미지를 기반으로 2개의 머신에서 컨테이너 생성 - 브라우저에서 어떤 요청이 있을 때마다 2개의 머신중 랜덤으로 1개가 선택되어 - 그 안에 있는 컨테이너 안의 스프링부트가 작동 - 일종의 부하 분산 - [21강, 도커파일 생성, fly 배포](https://youtu.be/UUEft39Qb-o) - [git](https://github.com/woooyoung/Surl_project_11/commit/4812a37a2d4c91113945b9f46c902fe328aeb639) # 22강 - 개발 환경(dev)과 운영 환경(prod)은 다르다. - 각 환경에 맞는 설정 필요 - 스프링부트가 지원해줌 - application.yml은 모든환경에서 작동 - application-dev.yml 은 개발환경 - `application.yml` 의 `spring.profiles.active=dev` 설정 때문에 작동함 - application-prod.yml 은 운영환경 - `Dockerfile`의 `-Dspring.profiles.active=prod` 옵션 때문에 작동함 - application.yml이 제일 먼저 작동 - 먼저 작동하는 설정파일이 우선순위가 낮다 - 나중에 작동하는 설정파일의 정보가 우선 적용됨 - 프로젝트 폴더에서 `fly deploy` 명령 입력 -> 바뀐 소스코드, 설정을 실서버(운영서버)에 반영 - [22강, 개발환경과 운영환경의 설정파일 분리](https://youtu.be/v0Ym3wwy9zU) - [git](https://github.com/woooyoung/Surl_project_11/commit/2ef9fb6cc584c2d14aa6b76c78498dc414c05914) # 23강 - 깃허브 리포지터리에 푸시하는 것 만으로 자동으로 배포까지 이루어질 수 있도록 - CI/CD 라고 한다. - fly.io가 무중단이기 때문에 결과적으로는 `무중단 CI/CD`가 걸려있게 된다 - GITHUB ACTION을 걸어두면 특정 이벤트가 발생했을 때 어떤 일이 작동하도록 할 수 있음 - 이벤트 예시 : 특정 브랜치의 특정 파일이 변경되는 푸시가 발생 - 소스코드의 내용 중 Github에 노출되면 안되는 내용 - 이런 것들은 `application-secret.yml`에 몰아넣고 - `.gitignore`에 `src/main/resources/application-secret.yml`을 추가 - application-secret.yml은 모든 환경에서 작동 - application.yml의 `spring.profiles.include=secret` 설정 때문 - 목표는 도커 빌드를 fly.io에서 수행하기 - 빌드 == 완제품 만들기 - 빌드를 할 때 application-secret.yml이 필요하다 - github 리포지터리에는 application-secret.yml 가 있어야 한다 - 나는 application-secret.yml를 로컬에만 존재하도록 해놨다. -> 보안 - application-secret.yml를 암호화해서 해당 리포지터리에 넣어야한다 - 깃허브 시크릿 변수 기능 활용 - application-secret.yml 내용을 시크릿 변수에 저장을 하면 된다 - .github/workflows/deploy.yml 파일 추가 - .github/workflows 는 지켜야 함 -> 그래야 이벤트가 걸림 - `deploy.yml`에는 언제 해당 파일이 실행되어야 하는지, 실행되면 무슨 일이 일어나야 하는지 기술됨 - 리포지터리 세팅을 해야함 - APPLICATION_SECRET_YML 생성 - FLY_API_TOKEN 생성 - fly.io에 create AccessToken으로 발급 - Settings -> Actions -> General - Workflow permissions -> Read and write permissions 선택 - 추후에 AWS 를 위한 배포를 위한 설정 - fly.io에서는 필요하지 않음 - GITHUB ACTION이 해당 리포지터리에 태그나 릴리즈를 생성할 권한을 얻는다 - Github Push - 이제는 fly deploy를 따로 할 필요가 없다 - 푸시하게 되면 자동으로 배포까지 진행된다. - 무중단 CI/CD 완성 ## .gitignore ```gitignore HELP.md .gradle build/ !gradle/wrapper/gradle-wrapper.jar !**/src/main/**/build/ !**/src/test/**/build/ ### STS ### .apt_generated .classpath .factorypath .project .settings .springBeans .sts4-cache bin/ !**/src/main/**/bin/ !**/src/test/**/bin/ ### IntelliJ IDEA ### .idea *.iws *.iml *.ipr out/ !**/src/main/**/out/ !**/src/test/**/out/ ### NetBeans ### /nbproject/private/ /nbbuild/ /dist/ /nbdist/ /.nb-gradle/ ### VS Code ### .vscode/ ### Custom ### src/main/resources/application-secret.yml db_dev.mv.db db_dev.trace.db src/main/generated ``` ## .github/workflows/deploy.yml ```yml name: Fly Deploy on: push: paths: - settings.gradle - build.gradle - src/** - fly.toml - Dockerfile - .github/workflows/deploy.yml branches: - main --> 실제 브랜치명으로 변경 jobs: deploy: name: Deploy app runs-on: ubuntu-latest steps: - uses: actions/checkout@v4 - name: application-secret.yml 생성 env: APPLICATION_SECRET: ${{ secrets.APPLICATION_SECRET_YML }} run: echo "$APPLICATION_SECRET" > src/main/resources/application-secret.yml - uses: superfly/flyctl-actions/setup-flyctl@master - run: flyctl deploy --remote-only env: FLY_API_TOKEN: ${{ secrets.FLY_API_TOKEN }} ``` - [23강, CI/CD 구축](https://youtu.be/EUcDiBMCRxE) - [git](https://github.com/woooyoung/Surl_project_11/commit/71cb3363c6bcf1ac847400e1989039161a1df568) # 24강 - 소스코드 변경시에 실서버에 반영하려면? - push만 하면 됨 - 만약에 `application-secret`의 내용이 바뀌고, 그것을 서버에 반영하려면? - 리포지터리 내의 시크릿 변수를 수정해야함 -> push or 해당 액션 re-run - 앱 테스트 -> SurlController 참고 - fly.io의 기본적인 앱은 일정시간동안 요청이 없으면 자동으로 꺼진다. - 스프링부트 내부에 있는 변수에 저장된 정보들이 전부 날아간다. -> 영속성을 부여해서 해결 - 필요없는 상황에서 자동으로 앱이 꺼지기 때문에 비용 절감이 됨 - [24강, 현재 구축된 CI/CD 주의사항](https://youtu.be/JLoP-mZQpUc) # 25강 ## MySQL 서버 띄우기 - MySQL 포트는 기본적으로 `3306` 을 사용합니다. - 설치가 안된다면 기존에 직접 설치한 MySQL 을 지우고 다시시도해주세요. - root 계정의 비밀번호는 `koreait123414` 로 하겠습니다. ```bash # MySQL 없을 때 띄우는 방법 cd ~ # 운영환경에서는 `cd /` # 설정파일 만들기 mkdir -p dockerProjects/mysql-1/volumes/etc/mysql/conf.d # 원하는 설정을 적어주세요. chmod 644 dockerProjects/mysql-1/volumes/etc/mysql/conf.d/my.cnf echo "[mysqld] # general_log = ON # general_log_file = /etc/mysql/conf.d/general.log" > dockerProjects/mysql-1/volumes/etc/mysql/conf.d/my.cnf chmod 444 dockerProjects/mysql-1/volumes/etc/mysql/conf.d/my.cnf docker run \ --name mysql-1 \ -p 3307:3306 \ -v /${PWD}/dockerProjects/mysql-1/volumes/var/lib/mysql:/var/lib/mysql \ -v /${PWD}/dockerProjects/mysql-1/volumes/etc/mysql/conf.d:/etc/mysql/conf.d \ -e TZ=Asia/Seoul \ -e MYSQL_ROOT_PASSWORD=koreait123414 \ -d \ mysql:8.4.1 ``` ## MySQL 초기화 - MySQL 서버를 초기화할 때 사용해주세요. ```bash # MySQL 없을 때 띄우는 방법 cd ~ # 운영환경에서는 `cd /` # 기존 컨테이너와 볼륨 제거 docker ps -a | grep -q mysql-1 && docker rm -f mysql-1 rm -rf dockerProjects/mysql-1 # 설정파일 만들기 mkdir -p dockerProjects/mysql-1/volumes/etc/mysql/conf.d # 원하는 설정을 적어주세요. echo "[mysqld] # general_log = ON # general_log_file = /etc/mysql/conf.d/general.log" > dockerProjects/mysql-1/volumes/etc/mysql/conf.d/my.cnf chmod 444 dockerProjects/mysql-1/volumes/etc/mysql/conf.d/my.cnf docker run \ --name mysql-1 \ -p 3307:3306 \ -v /${PWD}/dockerProjects/mysql-1/volumes/var/lib/mysql:/var/lib/mysql \ -v /${PWD}/dockerProjects/mysql-1/volumes/etc/mysql/conf.d:/etc/mysql/conf.d \ -e TZ=Asia/Seoul \ -e MYSQL_ROOT_PASSWORD=koreait123414 \ -d \ mysql:8.4.1 ``` ## 모든 도커자원(이미지, 컨테이너, 네트워크 볼륨) 삭제 명령어 - 가끔 도커 관련 실습을 처음부터 다시하고 싶을 때 아래 명령어가 유용합니다. ```bash # 컨테이너 삭제 docker rm -f $(docker ps -qa) # 이미지 삭제 docker rmi -f $(docker images -qa) # 안쓰는 네트워크 삭제 docker network prune -f # 안쓰는 볼륨 삭제 docker volume prune -f ``` ## Dbeaver 최신 버전 설치 및 세팅 - [Dbaver 최신버전 다운로드](https://dbeaver.io/download) - 최신버전에서 F9(스크립트 실행)관련 오류가 있을 수 있습니다. - 만약에 오류가 있다면 아래 링크에 있는 23.3.5 버전을 받아주세요. - ![img](https://i.postimg.cc/WzvtRKqv/UbL0xZb.png) - ![img](https://i.postimg.cc/9FczJ6jP/ITBwUyn.png) ## Dbeaver 23.3.5 버전 설치 및 세팅 - 최신버전이 안될때는 최신버전을 삭제 후 이 버전으로 설치해보세요. - [Dbaver 23.3.5 버전 다운로드](https://github.com/dbeaver/dbeaver/releases/tag/23.3.5) - ![img](https://i.imgur.com/mWBcTxb.png) - macos-aarch64.dmg : 맥 M1, M2 칩 - macos-x86_64.dmg : 맥 인텔칩 칩 - macos-x86_64-setup.exe : 윈도우 사용자 - [25강, MySQL 설치(docker) Dbeaver 설치](https://youtu.be/gUWPS43tfBI) # 26강 - ORM을 쓰면 개발자가 SQL 직접 작성하지 않고 관련 작업을 JAVA코드로 수행가능 - ORM이 개발자 대신 상황에 맞는 SQL을 생성하고 실행 - Spring Data JPA는 가장 유명하고 유용한 ORM - Spring Data JPA는 데이터 소스를 통해서 본인(ORM) 다뤄야 하는 실제 DB에 대한 정보를 얻는다 - 설정 파일에서 작성 - url - username - password - driver-class-name - [26강, JPA 의존성 추가](https://youtu.be/K6zBt-lpnEA) - [git](https://github.com/woooyoung/Surl_project_11/commit/a31221b96d6ae9ee7fe49a1460540c5b6ad872b9) # 27강 - @Entity : 이 클래스로 테이블 만들거야 - @Id : 이 필드를 PRIMARY KEY로 만들거야 - @GeneratedValue(strategy = IDENTITY) : AUTO_INCREMENT - [27강, Article 클래스로 article 테이블 생성](https://youtu.be/u8yOXhkdm9Y) - [git](https://github.com/woooyoung/Surl_project_11/commit/5e5958b375670c8570b490bb9dea9ee16520acd0) # 28강 - [28강, JPA가 실행하는 SQL 로깅](https://youtu.be/tmI-9sACrwM) - [git](https://github.com/woooyoung/Surl_project_11/commit/f9d0a558d7fa8f2dafcbad3e2d797c9fb26c758d) # 29강 - [29강, 게시글 INSERT](https://youtu.be/n9-Ul-Q4AI4) - [git](https://github.com/woooyoung/Surl_project_11/commit/b7f04667a94b79784fafe7fc026343672eb32db0) # 30강 - [30강, 게시글 COUNT, DELETE, TRUNCATE](https://youtu.be/Gob-UaC50TA) - [git](https://github.com/woooyoung/Surl_project_11/commit/64f5d1cf96d018095b8bec0f3043104b23268f63) # 31강 - MySQL 초기화(제너럴 로그 켠 모드로 시작) - `echo ''` 으로 로그 비우는 방법 - `cat`과 `less`로 으로 로그 확인하는 방법 - 기존의 코드는 트랜잭션이 3개로 구성됨 - 하나의 트랜잭션으로 묶음 - 트랜잭션내에서의 엔티티 객체 수정은 자동으로 UPDATE 가 유발됨 - 영속성 컨텍스트는 트랜잭션 당 하나가 존재함 - 모든 엔티티 객체는 영속성 컨텍스트에 복제본(스냅샷)이 존재 - 영속컨 컨텍스트는 트랜잭셩이 종료될 때 더티체킹에 의해 체크된 것들에 대해서 UPDATE ## MySQL 초기화(제너럴 로그 켠 모드로 시작) - 이렇게 시작하면 MySQL 에서 실행된 모든 쿼리로그를 general.log 에서 볼 수 있습니다. - general.log 를 보면 트랜잭션이 어떻게 묶이는지도 확인할 수 있습니다. ```bash # MySQL 없을 때 띄우는 방법 cd ~ # 운영환경에서는 `cd /` # 기존 컨테이너와 볼륨 제거 docker ps -a | grep -q mysql-1 && docker rm -f mysql-1 rm -rf dockerProjects/mysql-1 # 설정파일 만들기 mkdir -p dockerProjects/mysql-1/volumes/etc/mysql/conf.d # 원하는 설정을 적어주세요. echo "[mysqld] general_log = ON general_log_file = /etc/mysql/conf.d/general.log" > dockerProjects/mysql-1/volumes/etc/mysql/conf.d/my.cnf chmod 444 dockerProjects/mysql-1/volumes/etc/mysql/conf.d/my.cnf docker run \ --name mysql-1 \ -p 3306:3306 \ -v /${PWD}/dockerProjects/mysql-1/volumes/var/lib/mysql:/var/lib/mysql \ -v /${PWD}/dockerProjects/mysql-1/volumes/etc/mysql/conf.d:/etc/mysql/conf.d \ -e TZ=Asia/Seoul \ -e MYSQL_ROOT_PASSWORD=lldj123414 \ -d \ mysql:8.4.1 ``` ## 제너럴 로그 초기화 및 확인 ```bash # 이동 cd ~ # 운영환경에서는 `cd /` echo '' > dockerProjects/mysql-1/volumes/etc/mysql/conf.d/general.log cat dockerProjects/mysql-1/volumes/etc/mysql/conf.d/general.log | less # 방향키 위/아래 로 이동, 종료는 q ``` - [31강, 게시글 UPDATE](https://youtu.be/8DOetnZibO4) - [git](https://github.com/woooyoung/Surl_project_11/commit/98bd4f5346894acb338bcb2f9fb5544427065255) # 32강 - [32강, 게시글 SELECT](https://youtu.be/CYMLuxh0ufM) - [git](https://github.com/woooyoung/Surl_project_11/commit/67d0025aabe7734ed28cfb02e73c05dd493fb72e) # 33강 - [33강, 여러가지 SELECT](https://youtu.be/5JkNTn45z3k) - [git](https://github.com/woooyoung/Surl_project_11/commit/e714fe1152ec47a1b34c77a7cfb928018885acdb) # 34강 - [34강, 엔티티의 생성,수정날짜 자동기입](https://youtu.be/uRtNcy4DIWs) - [git](https://github.com/woooyoung/Surl_project_11/commit/ad4bf19ef6923823201bb731ef847cc72c6f3dd4) # 35강 - [35강, Service 도입](https://youtu.be/uHtnPqBggtA) - [git](https://github.com/woooyoung/Surl_project_11/commit/722725eccab6399e32bf09c742e6d43f25efd249) # 36강 - [36강, RsData 도입](https://youtu.be/R_H7uw_8RlE) - [git](https://github.com/woooyoung/Surl_project_11/commit/0e6a70ba65bd338dbf20d86df847dffc55d61a9a) # 37강 - [37강, 샘플 회원 2명 생성](https://youtu.be/Z85TFM5j9Ag) - [git](https://github.com/woooyoung/Surl_project_11/commit/8b154989e1ffa5139d811bd45766c4cf28455694) # 38강 - [예외처리](https://inpa.tistory.com/entry/JAVA-%E2%98%95-%EC%98%88%EC%99%B8-%EC%B2%98%EB%A6%ACException-%EB%AC%B8%EB%B2%95-%EC%9D%91%EC%9A%A9-%EC%A0%95%EB%A6%AC) - [38강, 오류 상태에서 리턴이 아닌 예외발생](https://youtu.be/Z85TFM5j9Ag) - [git](https://github.com/woooyoung/Surl_project_11/commit/ebfc96965e22ffde2a41cd54a93069ed5addb55c) # 39강 - 서비스의 모든 public 메서드에는 @Transactional 을 붙이는게 관례 - 그 중에서 SELECT 만 하는 메서드는 @Transactional(readOnly = true)를 붙여야 함 - 클래스 수준에서 @Transactional 을 붙인다 - @Transactional이 붙은 메서드에서 @Transactional 붙은 메서드를 실행하면 물리 트랜잭션은 가장 바깥쪽의 메서드 기준으로 1개만 작동함 - 다만 논리 트랜잭션은 @Transactional가 붙은 메서드가 호출될 때마다 작동함 - 물리 트랜잭션이 중요 - 다만 논리 트랜잭션 안에서 RuntimeException 계열의 예외가 발생하면 조용한 롤백이 일어남 - try catch로 예외가 발생하는 메서드를 감싸도 소용없음 - @Transactional(noRollbackFor = GlobalException.class) 로 특정 예외에 대해서 조용한 롤백이 되지 않도록 할 수 있다 - [39강, 서비스에 @Transactional 적용](https://youtu.be/Ufnuay4_B2I) - [git](https://github.com/woooyoung/Surl_project_11/commit/d5b0a52454a1542a55f8cb2aee9f837fea2f855f) # 40강 - [40강, @MappedSuperClass](https://youtu.be/GNEOJvrjHUs) - [git](https://github.com/woooyoung/Surl_project_11/commit/464ad49b5c98b17ba9a551c0d695919697776597) # 41강 - Article class에 작성자 필드 추가 - private String username; 가능 - private Long authorId; 가능 - @ManyToOne private Member author 가 관례(JPA) - [41강, Article에 Member 추가](https://youtu.be/nwj2FAQEeZo) - [git](https://github.com/woooyoung/Surl_project_11/commit/9c9acf733d3aa8e4cb97263d329f455284febac2) # 42강 - [42강, Surl 엔티티화](https://youtu.be/jBZc9dtUctM) - [git](https://github.com/woooyoung/Surl_project_11/commit/798de02dbe7ae163f0288522b2acd63704fdac19) # 43강 - [43강, Surl에 author 필드 추가, 프록시](https://youtu.be/OEcw-2wOG2c) - [git](https://github.com/woooyoung/Surl_project_11/commit/63f768263b05453b69041341e46815f67264b8c5) # 44강 ## MySQL 초기화(제너럴 로그 끈 모드로 시작) - 이렇게 시작하면 MySQL 에서 실행된 모든 쿼리로그를 general.log 에서 볼 수 있습니다. - general.log 를 보면 트랜잭션이 어떻게 묶이는지도 확인할 수 있습니다. ```bash # MySQL 없을 때 띄우는 방법 cd ~ # 운영환경에서는 `cd /` # 기존 컨테이너와 볼륨 제거 docker ps -a | grep -q mysql-1 && docker rm -f mysql-1 rm -rf dockerProjects/mysql-1 # 설정파일 만들기 mkdir -p dockerProjects/mysql-1/volumes/etc/mysql/conf.d # 원하는 설정을 적어주세요. echo "[mysqld] # general_log = ON # general_log_file = /etc/mysql/conf.d/general.log" > dockerProjects/mysql-1/volumes/etc/mysql/conf.d/my.cnf chmod 444 dockerProjects/mysql-1/volumes/etc/mysql/conf.d/my.cnf docker run \ --name mysql-1 \ --restart unless-stopped \ -p 3307:3306 \ -v /${PWD}/dockerProjects/mysql-1/volumes/var/lib/mysql:/var/lib/mysql \ -v /${PWD}/dockerProjects/mysql-1/volumes/etc/mysql/conf.d:/etc/mysql/conf.d \ -e TZ=Asia/Seoul \ -e MYSQL_ROOT_PASSWORD=koreait123414 \ -d \ mysql:8.4.1 ``` ## PostgreSQL 서버 삭제하는 방법 ```bash cd ~ # 운영환경에서는 `cd /` docker rm -f postgres_1 rm -rf /${PWD}/dockerProjects/postgres_1 ``` ## PostgreSQL 서버 띄우기 - PostgreSQL 포트는 기본적으로 `5432` 입니다. - 설치가 안된다면 기존에 직접 설치한 PostgreSQL 을 지우고 다시시도해주세요. - `postgres` 계정의 비밀번호는 `koreait123414` 입니다. ```bash cd ~ # 운영환경에서는 `cd /` docker run \ --name postgres_1 \ --restart unless-stopped \ -e POSTGRES_PASSWORD=koreait123414 \ -v /${PWD}/dockerProjects/postgres_1/volumes/var/lib/postgresql/data:/var/lib/postgresql/data \ -p 5432:5432 \ -d postgres ``` ## PostgreSQL 상식 - MySQL과 달리 PostgreSQL 에서는 관리자 계정이 `root` 가 아닌 `postgres` 이다. - `postgres` DB는 기본적으로 존재한다. - `CREATE DATABASE app1;`; 으로 데이터베이스를 만들 수 있다. - `SELECT datname FROM pg_database;` 로 데이터베이스 목록을 볼 수 있다. - `MySQL` 에서의 `use` 와 같은 명령어는 없다. ## 현재 선택된 데이터베이스안의 모든 사용자 정의 테이블 목록 나열 ```sql SELECT tablename FROM pg_catalog.pg_tables WHERE schemaname != 'pg_catalog' AND schemaname != 'information_schema'; ``` ## post 테이블 생성 ```sql create table post ( id bigserial not null, primary key (id), create_date timestamp(6), modify_date timestamp(6), title varchar(255) ) ``` ## post 테이블에 데이터 삽입 ```sql # V1 insert into post (id, create_date, modify_date, title) values (default, NOW(), NOW(), '제목 1') ``` ```sql # v2 insert into post (create_date, modify_date, title) values (NOW(), NOW(), '제목 1') ``` # 검색어가 `당근` 이고, 1 페이지에 보여줄 글 가져오기 - 한 페이지에 최대 10개의 글 노출 가능 ## 데이터 쿼리 ```sql select P.* from post AS P where upper(P.title) like upper('%당근%') escape '\' order by P.id desc limit 10 offset 0; ``` ## 카운트 쿼리 ```sql select count(P.id) from post AS P where upper(P.title) like upper('%당근%') escape '\' ``` # 검색어가 `당근` 이고, 2 페이지에 보여줄 글 가져오기 - 한 페이지에 최대 10개의 글 노출 가능 ```sql select P.* from post AS P where upper(P.title) like upper('%당근%') escape '\' order by P.id desc limit 10 offset 10; ``` ## 카운트 쿼리 ```sql select count(P.id) from post AS P where upper(P.title) like upper('%당근%') escape '\' ``` - [44강, PostgreSQL 띄우기](https://youtu.be/P8uK3JN6Dts) # 45강 - [45강, PostgreSQL로 변경](https://youtu.be/zaWKSvi0e_c) - [git](https://github.com/woooyoung/Surl_project_11/commit/9afae0c83ca8ab37c3a326ba1e9bc09b26d5a75f) # 46강 - [46강, h2 DB](https://youtu.be/zIHBWeTKGIM) - [git](https://github.com/woooyoung/Surl_project_11/commit/5e64bfc07362aec5a05f3a35af2056120550f735) # 47강 ## fly.io에 PostgreSQL 생성 - 프로젝트 폴더와 상관없는 곳에서 수행 ```bash flyctl pg create ``` - 앱 이름 : cwy-surl-project-db - 여러분은 이 앱 이름(cwy-surl-project-db)을 사용하시면 안됩니다. - 여러분 고유의 앱 이름을 사용해주세요. ## 만들어진 정보 저장(2번 이상 못봐) ``` Postgres cluster cwy-surl-project-db created Username: postgres Password: WSvgSlSd9GaktDA Hostname: cwy-surl-project-db.internal Flycast: fdaa:9:4add:0:1::3 Proxy port: 5432 Postgres port: 5433 Connection string: postgres://postgres:WSvgSlSd9GaktDA@cwy-surl-project-db.flycast:5432 Save your credentials in a secure place -- you won't be able to see them again ``` ## 외부에서는 fly.io 안쪽의 db에 바로접근이 불가능하기 때문에, 접근이 필요할 때 마다 flyctl proxy 명령으로 개구멍을 open - flyctl proxy 5434:5432 -a appName - EX : `flyctl proxy 5433:5432 -a cwy-surl-project-db` - 로컬 포트 5433 을 원격지 포트 5432 와 연결한다. - 이렇게 하면 로컬에서의 포트 5432 와 충돌하지 않는다. - `Ctrl + c` 로 프록시 종료 ## Dbeaver 로 DB 접속 - 프로젝트 이름 : cwy-surl-project-db, fly.io - 서버이름 : surl_prod - 주소 : 127.0.0.1 - 사용자 : postgres - 비밀번호 : - 포트 : 5433 - DB : postgres - 추후 `surl_prod` 로 변경 ## surl_prod 데이터베이스 생성 ```sql DROP DATABASE IF EXISTS surl_prod; CREATE DATABASE surl_prod; ``` ## Dbeaver 로 DB 접속정보에서 DB변경 - DB : surl_prod ## fly.io 대시보드에서 확인 - [대시보드(https://fly.io/dashboard)](https://fly.io/dashboard) - [47강, fly.io에 PostgreSQL 생성](https://youtu.be/ZtPVdRnwHu8) # 48강 - application-prod.yml에 운영모드용 설정 - initAll 빈 등록 - 로컬에서 잘 되는지 테스트 - @ActiveProfiles("test") - 테스트 환경에서는 H2 메모리 모드로 설정 - initAll 다음에 initNotProd 가 수행되도록 설정 - log.debug는 운영모드에서 작동 x - [48강, 운영 모드에서 운영 DB 사용](https://youtu.be/NObMqpf0iWM) - [git](https://github.com/woooyoung/Surl_project_11/commit/4a6623bfb19a3f604a0026a6d4980157f90587bc) # 49강 ## 도메인 관리 - [도메인 구매 - dnszi.com](https://dnszi.com) ## 도메인 구매 - [도메인 구매 - iwantmyname.com](https://iwantmyname.com) - [도메인 구매 - domain.gabia.com](https://domain.gabia.com) ## 프로젝트에 도메인 연결 ```bash fly certs add www.surl.abbl.site # 추가 fly certs show www.surl.abbl.site # 확인 ``` ## 순서 - cwy-surl-project-11.fly.dev 는 기본적으로 제공되는 운영 도메인 입니다. - dnszi 는 도메인 관리 서비스 - 도메인 구매 사이트에서 도메인 구매하기 - 도메인 구매시 DNS 서버를 dnszi 로 설정 - fly certs add 새-도메인 - dnszi 에서 CNAME 설정 - ## DNSZI 에서 CNAME 등록 - CNAME(별명) : www.surl.abbl.site - 목적지(연결) 도메인 : cwy-surl-project-11.fly.dev - [49강, 도메인 구매 및 연결](https://youtu.be/5aoyom2adKg) # 50강 - [50강, 도메인 추가, 자원 해제](https://youtu.be/sASLeOkIHqY) # 51강 - AWS : 합리적인 가격에 서버를 대여해줌 - fly.io보다 자유도가 높다 - AWS 루트계정 가입 -> 이메일, 카드 - AWS의 핵심 자원 : IAM(인증,인가), EC2(컴퓨터) - IAM admin 계정 생성 - 정책 : 권한의 조합 - AdministratorAccess 정책 연결 - 별칭 추가 - IAM 계정 로그인 ### IAM 계정 - AWS ROOT 계정을 해킹당하면 피해가 크다. IAM 유저를 만들고 그걸 쓰는게 좋다. - ROOT 계정의 역할 : IAM USER admin 을 만드는 역할 뿐. 이게 바람직하다 - IAM에서는 사용자의 편의를 위한 정책들을 미리 만들어 놨다 - AdministratorAccess 정책은 ROOT에 준하는 권한이 정의되어 있다. - ROOT 에는 고유 ID가 있다. 외우기 힘들어서 쓰는게 별칭 - [51강, AWS 가입, IAM 계정 생성](https://youtu.be/-8wWNIbQMkM) # 52강 ## AWS 대표 핵심자원 3가지 - IAM - 권한, 정책 - 역할, 사용자 - VPC - EC2 ## AWS 자원을 다루는 방법 - AWS 콘솔 : 일일히 하나하나 클릭 - AWS CLI : 명령어로 - 일괄처리 가능 - AWS 콘솔에 비해서 효율적임 - 테라폼 : AWS CLI를 쉽게 ## AWS API - AWS의 모든 처리는 내부적으로 API - 어떤 일을 할 때 AWS 콘솔에 접속해서 클릭을 통해서 진행해도 되고, AWS API이용해도 된다 - AWS API를 명령어를 통해서 쉽게 사용하려면 AWS CLI 설치해야해 - AWS CLI를 설치 후 IAM USER의 엑세스키를 등록해야해 - [52강, AWS CLI, 테라폼](https://youtu.be/vMgDVcEveBE) # 53강 ## AWS CLI 설치 - [AWS - AWS CLI 설치 - https://docs.aws.amazon.com/ko_kr/cli/latest/userguide/getting-started-install.html](https://docs.aws.amazon.com/ko_kr/cli/latest/userguide/getting-started-install.html) - 윈도우 사용자 - ![img](https://i.imgur.com/rwbwquC.png) - MAC 사용자 - `Command line installer - All users` 로 설치 ## AWS CLI 설치확인 - 윈도우 사용자 - `윈도우 키` 누르고 `cmd` 누르고 `엔터` - `aws` 명령어 실행 - MAC 사용자 - 터미널 창 띄우기 - `aws` 명령어 실행 - ![img](https://i.imgur.com/78Chm8o.png) ## admin 계정의 엑세스키 발급받기 - [AWS - IAM 사용자 - https://us-east-1.console.aws.amazon.com/iamv2/home?region=ap-northeast-2#/users](https://us-east-1.console.aws.amazon.com/iamv2/home?region=ap-northeast-2#/users) - [IAM - admin 계정 - 보안자격증명](https://us-east-1.console.aws.amazon.com/iamv2/home?region=ap-northeast-2#/users/details/admin?section=security_credentials) ## AWS CLI 명령어 - aws configure list - AWS 엑세스키가 등록되어 있는지 확인 - aws configure - AWS 엑세스키 등록 - 엑세스 키, 시크릿 엑세스키 등록 - 재등록도 가능 - 리전 : ap-northeast-2 - ap-northeast-2 : AWS 서울 - `Default output format` 에서는 그냥 엔터 - aws s3 ls - 아무 결과가 안나오면 성공적으로 로그인 되었다고 볼 수 있습니다. - 엑세스키 삭제하는 방법 - 콘솔 -> IAM USER -> `admin` 유저 선택 -> 보안자격증명 -> 액세스 키 -> 비활성화 -> 삭제 - AWS CLI에 입력된 엑세스키 삭제하는 방법 - 윈도우 터미널 - `rmdir /s /q "%USERPROFILE%/.aws"` - 윈도우 파워쉘 - `rm -force -recurse $HOME\.aws` - MAC SHELL OR BASH SHELL - `rm -rf ~/.aws` - [53강, AWS CLI 설치 및 로그인](https://youtu.be/9EjqOdlZ9Q4) # 54강 ## 테라폼 CLI 설치 - [테라폼 - 설치 - https://developer.hashicorp.com/terraform/install](https://developer.hashicorp.com/terraform/install) - 윈도우 - `C:\lib\terraform` 폴더 생성 - amd64 다운로드 - 안되면 386 다운로드 - `C:\lib\terraform` 폴더에 `terraform.exe` 파일 저장 - 환경변수의 PATH 에 `C:\lib\terraform` 등록 - ![img](https://i.imgur.com/umlRfeN.png) - 윈도우 키 누르고 `환경` 이라고 검색 - ![img](https://i.imgur.com/9Oy9V9g.png) ## 테라폼 프로젝트 폴더 생성 - 프로젝트 경로 : ~/IdeaProjects/terraform_project_1 ## .gitignore ```.gitignore .idea .terraform ``` ## main.tf ```hcl terraform { // 자바의 import 와 비슷함 // aws 라이브러리 불러옴 required_providers { aws = { source = "hashicorp/aws" version = "~> 4.0" } } } # Configure the AWS Provider provider "aws" { region = "ap-northeast-2" } resource "aws_vpc" "example" { cidr_block = "10.0.0.0/16" tags = { Name = "example" } } ``` ## 테라폼 명령어 - terraform init - 라이브러리 다운로드 - 라이브러리 관련 소스코드가 바뀔 때 마다 실행해야 한다. - terraform plan - 실제 리소스 생성을 하는것은 아니고 - 현재 소스코드가 실행가능한지 검사 - terraform apply - 리소스 생성 - yes 입력 - terraform destroy - 리소스 삭제 - yes 입력 - [54강, 테라폼 설치 및 프로젝트 생성](https://youtu.be/5OlypUlF6jo) - [git](https://github.com/woooyoung/24_11_terraform_project_1) # 55강 - EC2 인스턴스 하나 추가하기 위한 작업 - AMI -> 운영체제 - EC2가 생성되자마자 수행해야하는 명령어 - [55강, 테라폼으로 EC2 1개 생성](https://youtu.be/-Bp_ymTGLFA) - [git](https://github.com/woooyoung/24_11_terraform_project_1/commit/1ae2543671f2763c6e6cf88d7379399dd98b537f) # 56강 - 나중에 EC2에서 private docker image를 받기 위해 로그인 - read 패키지 권한만 있는 GITHUB 토큰 생성 - 도커 이미지에는 application-secret.yml 이 포함 - EC2에서 도커 로그인(ghcr.io) ## 깃허브 토큰 생성 - [https://github.com/settings/tokens](https://github.com/settings/tokens) - ![img](https://i.imgur.com/e62OqSz.png) - ![img](https://i.imgur.com/02bUYwO.png) ## ghcr.io 에 로그인 ```bash docker login ghcr.io -u USERNAME -p YOUR_TOKEN # EX : docker login ghcr.io -u jhs512 -p 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 ``` - [56강, docker login ghcr.io](https://youtu.be/n9A8GZTwUvo) # 57강 - MySql을 도커로 실행 - dbeaver로 연결 생성 - root계정의 근거리 비번 세팅 - root계정의 원거리 비번 세팅 ## MySQL 실행 ```bash docker run -d \ --name mysql_1 \ --restart unless-stopped \ -p 3306:3306 \ -e TZ=Asia/Seoul \ -e MYSQL_ROOT_PASSWORD=koreait123414 \ -v /dockerProjects/mysql_1/volumns/var/lib/mysql:/var/lib/mysql \ mysql \ --character-set-server=utf8mb4 --collation-server=utf8mb4_unicode_ci ``` ## MySQL 에 새 비밀번호 세팅, 로컬용 비밀번호 세팅 ```bash docker exec -it mysql_1 mysql -u root -p # 비번입력 : koreait123414 ALTER USER 'root'@'%' IDENTIFIED BY '새로운 비밀번호'; # 새 비번 입력 ALTER USER 'root'@'localhost' IDENTIFIED BY '1234'; # 로컬에서는 1234 로 접속 할 수 있도록 FLUSH PRIVILEGES; exit ``` - [57강, MySQL 설치, 세팅](https://youtu.be/g9QNODwnYiE) # 58강 - 레디스를 도커로 설치 - 레디스를 도입하면 스프링부트가 교체되면서 발생하는 로그인 풀림 현상을 방지할 수 있다. - 레디스에 비밀번호 설정 ## redis 설치 ```bash docker run -d \ --name=redis_1 \ --restart unless-stopped \ -p 6379:6379 \ -e TZ=Asia/Seoul \ redis ``` ## redis 비밀번호 변경 ```bash docker exec -it redis_1 redis-cli AUTH 기존_비밀번호 # 기존에 설정된 비밀번호가 있다면 입력 CONFIG SET requirepass 새로운_비밀번호 # 새 비번 입력 EXIT ``` - [58강, Redis 설치, 세팅](https://youtu.be/1OUzbt5r7bo) # 59강 ## Nginx Proxy Manager 설치 ```bash docker run -d \ --name npm_1 \ --restart unless-stopped \ -p 80:80 \ -p 443:443 \ -p 81:81 \ -e TZ=Asia/Seoul \ -v /dockerProjects/npm_1/volumes/data:/data \ -v /dockerProjects/npm_1/volumes/etc/letsencrypt:/etc/letsencrypt \ jc21/nginx-proxy-manager:latest ``` ## nginx proxy manager 관리콘솔에 접속 - [http://sb.abbl.site:81](http://sb.abbl.site:81) - 초기 계정 - 아이디 : admin@example.com - 비번 : changeme ## 접속확인 - [https://api.www.surl.abbl.site](https://api.www.surl.abbl.site) - 오류가 발생해야 합니다. - [59강, Nginx Proxy Manager 설치, 세팅](https://youtu.be/5u5E_d95I6k) # 60강 - 수동배포 - EC2 인스턴스에서 git clone - application-secret.yml 생성 - 도커 이미지 생성 - 도커 컨테이너 생성 - docker logs -f 로 로그 확인 ## 도커 이미지 빌드 준비를 위한 소스코드 다운로드 ```bash mkdir -p /dockerProjects/surl/source cd /dockerProjects/surl/source git clone https://github.com/woooyoung/demo03-2024 . ``` ## src/main/resources/application-secret.yml 파일 생성 ```bash # vim 열기 vim src/main/resources/application-secret.yml # 키보드 'a' 키 입력 ``` ```yml custom: secret: key: 1234 ``` ```bash # vim 닫으면 서 파일 저장하기 # 키보드 'ESC' 키 입력 # 키보드 ':wq!' 키 입력 # 키보드 'ENTER' 키 입력 ``` ## 도커 이미지 생성 ```bash docker build -t axdsw121/surl . ``` ## 도커 컨테이너 실행 ```bash docker run -d \ --name=surl_1 \ --restart unless-stopped \ -p 8081:8080 \ -e TZ=Asia/Seoul \ -v /dockerProjects/surl/volumes/gen:/gen \ axdsw121/surl:latest ``` ## 도커 컨테이어 출력문(로그) 확인 ```bash docker logs -f surl_1 ``` - [60강, 수동배포 시도, 실패](https://youtu.be/RAmPQkFQVlo) # 61강 - 운영 DBMS(EC2)에서 surl_prod DB 생성 - application-prod.yml 에서 운영 DB 정보 수정 - git push - EC2 인스턴스에서 기존 컨테이너 삭제 - 기존 이미지 삭제 - git pull - 이미지 생성 - 컨테이너 생성 - MySql에서 root@172.17.0.1 계정 생성, 권한 부여 - api.www.surl.abbl.site로 운영서버에 접속 - DB table 생성 확인 ``` fly - 소스코드 : fly deploy 도커 파일로 이미지생성해서 앱 등록 - 머신 2개 - DB : DB 앱 생성 - 머신 3개 -> 무중단 CI/CD + 배포 를 위해서 github Action -> push 했을 때 알아서 재배포 하도록 -> 자동배포 AWS - IAM 계정 생성 -> 정책 - 테라폼 - github 토큰 - VPC 자원 생성 - EC2 생성 - mysql, redis, NPM - git clone -> 이미지 -> 컨테이너 -> 실행 -> 배포 ``` ## EC2 인스턴스 재부팅 ```bash reboot now ``` - 2, 3분 후 해당 브라우저를 리프레시 후 `sudo su` 다시 입력하면 - 다시 쉘에 접근할 수 있다. ## 도커 이미지 빌드 준비를 위한 소스코드 다운로드 ```bash cd /dockerProjects/surl/source git pull origin main ``` ## 기존 컨테이너, 이미지 삭제 ```bash docker rm -f surl_1 docker rmi surl ``` ## surl 서비스에서 접속할 때 사용할 root@172.17.0.1 MySQL 계정 생성 ```bash docker exec -it mysql_1 mysql -u root -p # 비번입력 : koreait123414 CREATE USER 'root'@'172.17.0.1' IDENTIFIED BY '1234'; GRANT ALL PRIVILEGES ON *.* TO 'root'@'172.17.0.1'; # 권한부여 # REVOKE ALL PRIVILEGES ON *.* FROM 'root'@'172.17.0.1'; # 이 명령어는 알아두세요. root@172.17.0.1 사용자의 권한을 삭제하는 명령어 입니다. FLUSH PRIVILEGES; exit ``` ## 컨테이너 실행 ```bash docker run -d \ --name=surl_1 \ --restart unless-stopped \ -p 8081:8080 \ -e TZ=Asia/Seoul \ -v /dockerProjects/surl/volumes/gen:/gen \ axdsw121/surl:latest ``` ## 접속확인 - https://api.www.surl.abbl.site(본인 도메인) - [61강, 수동배포 시도, 성공](https://youtu.be/U6ZeJP53Avk) - [git](https://github.com/woooyoung/Surl_project_11/commit/4fc68e51c51253915a12077d7af925f5485e2ece) # 62강 ### 어려움 주의 : 따라하기 위주로/ access key, branch 확인 / 이전의 세팅 확인 - socat 설치 - 파이썬 설치 - 기존 컨테이너 제거 - 기존 이미지 제거 - 코드 변경사항 적용 (branch 주의 - main, master) - github 시크릿 변수들 설정 - aws access key가 일치해야함 - 커밋, 푸시 -> 릴리즈, 패키지 생성 - 릴리즈 생성시에 만들어지는 버전을 사용하기 위해서 - 릴리즈 버전 -> 도커 이미지 버전 - 패키지 세팅 -> public을 private -> 도커 이미지를 private 화 하도록 - 무중단 배포 되는지 확인 ## application-secret.yml ```yml custom: secret: spring: data: redis: password: koreait123414 key: 1234 ``` ## socat 설치 ```bash yum install socat -y ``` ## python 설치 ```bash yum install python -y ``` ## infraScript/zero_downtime_deploy.py ```yml #!/usr/bin/env python3 import os import requests # HTTP 요청을 위한 모듈 추가 import subprocess import time from typing import Dict, Optional class ServiceManager: # 초기화 함수 def __init__(self, socat_port: int = 8081, sleep_duration: int = 3) -> None: self.socat_port: int = socat_port self.sleep_duration: int = sleep_duration self.services: Dict[str, int] = { '${도커이미지명}_1': 8082, '${도커이미지명}_2': 8083 } self.current_name: Optional[str] = None self.current_port: Optional[int] = None self.next_name: Optional[str] = None self.next_port: Optional[int] = None # 현재 실행 중인 서비스를 찾는 함수 def _find_current_service(self) -> None: cmd: str = f"ps aux | grep 'socat -t0 TCP-LISTEN:{self.socat_port}' | grep -v grep | awk '{{print $NF}}'" current_service: str = subprocess.getoutput(cmd) if not current_service: self.current_name, self.current_port = '${도커이미지명}_2', self.services['${도커이미지명}_2'] else: self.current_port = int(current_service.split(':')[-1]) self.current_name = next((name for name, port in self.services.items() if port == self.current_port), None) # 다음에 실행할 서비스를 찾는 함수 def _find_next_service(self) -> None: self.next_name, self.next_port = next( ((name, port) for name, port in self.services.items() if name != self.current_name), (None, None) ) # Docker 컨테이너를 제거하는 함수 def _remove_container(self, name: str) -> None: os.system(f"docker stop {name} 2> /dev/null") os.system(f"docker rm -f {name} 2> /dev/null") # Docker 컨테이너를 실행하는 함수 def _run_container(self, name: str, port: int) -> None: os.system( f"docker run -d --name={name} --restart unless-stopped -p {port}:${스프링부트-운영모드-포트} -e TZ=Asia/Seoul -v /dockerProjects/${도커이미지명}/volumes/gen:/gen --pull always ghcr.io/${깃허브-아이디}/${도커이미지명}") def _switch_port(self) -> None: # Socat 포트를 전환하는 함수 cmd: str = f"ps aux | grep 'socat -t0 TCP-LISTEN:{self.socat_port}' | grep -v grep | awk '{{print $2}}'" pid: str = subprocess.getoutput(cmd) if pid: os.system(f"kill -9 {pid} 2>/dev/null") time.sleep(5) os.system( f"nohup socat -t0 TCP-LISTEN:{self.socat_port},fork,reuseaddr TCP:localhost:{self.next_port} &>/dev/null &") # 서비스 상태를 확인하는 함수 def _is_service_up(self, port: int) -> bool: url = f"http://127.0.0.1:{port}/actuator/health" try: response = requests.get(url, timeout=5) # 5초 이내 응답 없으면 예외 발생 if response.status_code == 200 and response.json().get('status') == 'UP': return True except requests.RequestException: pass return False # 서비스를 업데이트하는 함수 def update_service(self) -> None: self._find_current_service() self._find_next_service() self._remove_container(self.next_name) self._run_container(self.next_name, self.next_port) # 새 서비스가 'UP' 상태가 될 때까지 기다림 while not self._is_service_up(self.next_port): print(f"Waiting for {self.next_name} to be 'UP'...") time.sleep(self.sleep_duration) self._switch_port() if self.current_name is not None: self._remove_container(self.current_name) print("Switched service successfully!") if __name__ == "__main__": manager = ServiceManager() manager.update_service() ``` ## .github/workflows/deploy.yml ```yml name: 'deploy' on: push: paths: - '.github/workflows/**' - 'src/**' - 'build.gradle' - 'Dockerfile' - 'readme.md' - 'infraScript/**' branches: - 'master' # 브랜치 주의 jobs: makeTagAndRelease: runs-on: ubuntu-latest outputs: tag_name: ${{ steps.create_tag.outputs.new_tag }} steps: - uses: actions/checkout@v4 - name: Create Tag id: create_tag uses: mathieudutour/github-tag-action@v6.1 with: github_token: ${{ secrets.GITHUB_TOKEN }} - name: Create Release id: create_release uses: actions/create-release@v1 env: GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} with: tag_name: ${{ steps.create_tag.outputs.new_tag }} release_name: Release ${{ steps.create_tag.outputs.new_tag }} body: ${{ steps.create_tag.outputs.changelog }} draft: false prerelease: false buildImageAndPush: name: 도커 이미지 빌드와 푸시 needs: makeTagAndRelease runs-on: ubuntu-latest steps: - uses: actions/checkout@v4 - name: Docker Buildx 설치 uses: docker/setup-buildx-action@v2 - name: 레지스트리 로그인 uses: docker/login-action@v2 with: registry: ghcr.io username: ${{ github.actor }} password: ${{ secrets.GITHUB_TOKEN }} - name: set lower case owner name run: | echo "OWNER_LC=${OWNER,,}" >> ${GITHUB_ENV} env: OWNER: "${{ github.repository_owner }}" - name: application-secret.yml 생성 env: ACTIONS_STEP_DEBUG: true APPLICATION_SECRET: ${{ secrets.APPLICATION_SECRET_YML }} run: echo "$APPLICATION_SECRET" > src/main/resources/application-secret.yml - name: 빌드 앤 푸시 uses: docker/build-push-action@v3 with: context: . push: true tags: | ghcr.io/${{ env.OWNER_LC }}/${도커이미지명}:${{ needs.makeTagAndRelease.outputs.tag_name }}, ghcr.io/${{ env.OWNER_LC }}/${도커이미지명}:latest deploy: runs-on: ubuntu-latest needs: [ buildImageAndPush ] steps: - name: AWS SSM Send-Command uses: peterkimzz/aws-ssm-send-command@master id: ssm with: aws-region: ${{ secrets.AWS_REGION }} aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }} aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }} instance-ids: "${AWS-EC2-인스턴스-ID}" working-directory: / comment: Deploy command: | mkdir -p /dockerProjects/${도커이미지명} curl -o /dockerProjects/${도커이미지명}/zero_downtime_deploy.py https://raw.githubusercontent.com/${깃허브-아이디}/${깃허브-리포지터리명}/master/infraScript/zero_downtime_deploy.py # 브랜치 주의 chmod +x /dockerProjects/${도커이미지명}/zero_downtime_deploy.py /dockerProjects/${도커이미지명}/zero_downtime_deploy.py ``` - [62강, 자동배포](https://youtu.be/8114R3ena50) - [git](https://github.com/woooyoung/Surl_project_11/commit/50ba38aee7dae9d791e77d9256c151a4d41a8879) # 63강 - [63강, 회원가입 API 구현](https://youtu.be/gqPsB0S1nF0) - [git](https://github.com/woooyoung/Surl_project_11/commit/9196e290d88633da4ff555dbc57cda92e64a701f) # 64강 - [64강, Ut class](https://youtu.be/0OYwOKyH7Ps) - [git](https://github.com/woooyoung/Surl_project_11/commit/e601b0098d014478f6cbe44a87bc9944ca1b2e4c) # 65강 - 예외상황에서 return 보다 throw가 좋은 이유 - return 으로 하면 리턴타입이 허용하는 범위 내에서만 표현 가능 - 표현이 어색해질 수 있다 - throw는 리턴타입과 상관이 없다 - 다만 json 메서드 return 이라면 응답결과는 깔끔하다 - [65강, 예외처리는 return 보다 throw](https://youtu.be/S_wkvTruWq4) # 66강 - return은 해당 statement가 포함된 함수만 끝내지만 - throw는 예외처리를 호출자에서 해주지 않으면 해당 쓰레드 전체가 끝난다 - 즉 해당 HTTP 요청에 대한 처리 자체가 끝난다 - 예외를 발생시키고 예외처리를 하지 않으면 스프링부트가 메뉴얼대로 오류를 처리한다 - @ControllerAdvice 클래스에 @ExceptionHandler 메서드를 만들면 오류에 대한 처리를 가로챈다 - @ExceptionHandler 메서드가 여러개라면 해당 예외상황에 더 적절한 메서드가 알아서 선택됨 - @ExceptionHandler 메서드가 존재해도 예외상황에 맞지 않다면 메서드는 작동하지 않음 - [쓰레드 - 링크](https://simple-ing.tistory.com/67) - [66강, ExceptionHandler를 이용한 예외처리](https://youtu.be/cky8qJfCHl8) - [git](https://github.com/woooyoung/Surl_project_11/commit/89e6e4b93c4e8be4378c902f74eee1cd6770e93d) # 67강 - 기계는 `정보`만 필요해 - 사람은 `정보`와 `꾸밈`이 필요해 - 스프링부트 앱에서는 `정보`와 `꾸밈`을 모두 처리할 수 있다 - JSP, 타임리프 - 스프링부트 앱에서 `정보`만 처리하는 경우 - 이때는 따로 프론트엔드 서버를 만들어 - 리액트, 스벨트, 앵귤러, 뷰 - 기계가 원하는 것(정보) : {"age" : 22, "name" : "철수"} - 사람이 원하는 것(정보 + 꾸밈) : 1명의 사람이 있는데 그 사람의 이름 철수고, 나이는 22살이야 ``` 스프링부트 만(MPA) - 정보 + 꾸밈 스프링부트(REST API) + 프론트엔드(SPA) - 스프링부트 : 정보 - 리액트 or 스벨트 : 꾸밈 ->스프링부트로 REST API 서버를 구현한다 ``` - [67강, 백엔드의 사용자는 사람 or 기계](https://youtu.be/Aq9v0Zi672g) - [git](https://github.com/woooyoung/Surl_project_11/commit/fbe2391b93df7e7d94ee8c83864c81acf84f7402) # 68강 - POSTMAN - 기계(프론트엔드 앱)와 통신하는 스프링부트 앱 만드는 행위를 `REST API 서버 구현` or `API 서버 구현`이라고 한다 - API 서버를 구현하면서 테스트를 할 때는 브라우저만으로 충분하지 않다 - 브라우저의 주소표시줄로는 GET 요청만 발생시킬 수 있다 - 이럴 때 POSTMAN - 해당 툴로 GET, POST, PUT, PATCH, DELETE HTTP 메서드 요청을 할 수 있으므로 - 쿼리스트링과 요청 본문도 요청에 담고 결과도 확인이 가능하므로 - HTTP 요청 메서드 - GET : 조회 - POST : 생성 - PUT or PATCH : 수정 - DELETE : 삭제 - URL 은 동사형보다는 명사형으로 쓰는게 좋다. - 게시물 CRUD 로 알아보는 올바른 HTTP 요청 방법 - 게시물 생성 - 잘못된 방법 : GET /article/write?title=제목&body=내용 - 올바른 방법 : POST /articles - 헤더, Content-Type : application/json - body : {"title": "제목", "body": "내용"} - 게시물 1번 수정 - 잘못된 방법 : GET /article/modify?id=1&title=제목 new&body=내용 new - 올바른 방법 : PUT /articles/1 - 헤더, Content-Type : application/json - body : {"title": "제목 new", "body": "내용 new"} - 게시물 1번 조회 - 잘못된 방법 : GET /article/detail?id=1 - 올바른 방법 : GET /articles/1 - 게시물들 조회 - 잘못된 방법 : GET /article/list - 올바른 방법 : GET /articles - 게시물 1번 삭제 - 잘못된 방법 : GET /article/delete?id=1 - 올바른 방법 : DELETE /articles/1 - [68강, POSTMAN, HTTP 메서드](https://youtu.be/qiH3yTBFnXI) # 69강 - [69강, ApiV1MemberController 생성](https://youtu.be/JeI5GMWH344) - [git](https://github.com/woooyoung/Surl_project_11/commit/5093e67bb7695ddc4f21706e1c8b86d8b6af89a5) # 70강 - @ResponseStatus(HttpStatus.BAD_REQUEST) : 400으로 고정 - ResponseEntity : 상황에 따라서 다른 상태코드 지정 가능 - [70강, 예외발생시 상태코드를 명시](https://youtu.be/gixglTHgiqA) - [git](https://github.com/woooyoung/Surl_project_11/commit/046df7bd646452208018d3aee9ab4c3c35ab955a) # 71강 - [71강, 성공과 실패의 양식을 통일](https://youtu.be/LjutgBsGynk) - [git](https://github.com/woooyoung/Surl_project_11/commit/af48237f92dbc87390054881983d28e20c37440b) # 72강 - [72강, Validation](https://youtu.be/7xO0yArbbC8) - [git](https://github.com/woooyoung/Surl_project_11/commit/861f9df30b6bded84a9f37061ae325cf113aef72) # 73강 - MethodArgumentNotValidException 처리 - MethodArgumentNotValidException 핸들러 추가 - 해당 핸들러에서 GlobalException 형태로 변형 - 응답의 양식이 같음 - 양식 : resultCode, statusCode, msg, data - 케이스 - 성공할 경우 - 실패할 경우 1 : GlobalException 발생 - 실패할 경우 2 : MethodArgumentNotValidException - 기타 예외 핸들러 - trace : 예외에 대한 자세한 발생경위 - path : URL - rq - rq는 요청과 응답 쌍에 대한 추상화된 레이어 - rq는 내부적으로 요청(HttpServletRequest)과 응답(HttpServletResponse)에 접근하고 다룰 수 있다 - 기타 예외에 대한 처리를 하지 않으면 기본 양식과 동일한 양식으로 오류가 출력된다 - [73강, 기타 사항 예외처리](https://youtu.be/QraVBzFr2Ts) - [git](https://github.com/woooyoung/Surl_project_11/commit/703e128245c0a2ff9fcd38741e38fdae89038bd5) # 74강 - 엔드포인트 - 액션메서드 - 액션 메서드마다 보통 클래스 2개씩 필요하다 - 요청본문 클래스 - 입력값이 없다면 필요없음 - 응답본문 클래스 - MemberJoinRespBody 클래스 - join 메서드가 RsData`` 타입 데이터를 리턴하도록 - [74강, 액션의 응답본문 클래스](https://youtu.be/UA1D5XQ1f08) - [git](https://github.com/woooyoung/Surl_project_11/commit/1ed83056b2c2c9f46d169d1cefd1be5c56d0b024) # 75강 - 성공했을 때 응답코드 - 현재는 무조건 200 (또는 설정되어 있는거) - Aspect - Aspect가 적은 코딩량으로 특정 패턴의 코드가 실행되기 전/후에 추가작업이 가능해진다 - RsData 상태코드를 응답코드로 - [75강, Aspect, RsData 상태코드를 응답코드로](https://youtu.be/Lab0IM0cCzo) - [git](https://github.com/woooyoung/Surl_project_11/commit/916f643e365ea4be18cf79b281a3fcbe8bf09029) # 76강 - [76강, REST API, Surl 등록, 단건조회](https://youtu.be/AIUEwOpoh9M) - [git](https://github.com/woooyoung/Surl_project_11/commit/7b896ab68c6dd30cf8714f0f839d3f4acd8148d8) # 77강 - 엔티티는 직접적으로 노출되면 안됨 - @JsonIgnore가 있지만 임시방편 - 엔티티의 칼럼명을 바꾸지 못함 - 프론트엔드 앱에서 오류가 발생 - DTO가 필요하다 - 엔티티는 API를 통해서 노출될 때 무조건 DTO로 변경 되어야 함 - DTO는 엔티티를 포함하면 안됨 - DTO 객체는 엔티티 객체로부터 만드는게 일반적이다 - DTO는 엔티티와 구조가 거의 비슷함 - `Member author` 는 분리해서 적절한 필드로 변경 - `long authorId` - `String authorName` - [77강, DTO](https://youtu.be/Xrc3xLIroYA) - [git](https://github.com/woooyoung/Surl_project_11/commit/5667882e491d096ed2dfc64cd5dbefd1fc331bd8) # 78강 - DBCP - 스프링부트에서 DB와의 통신 회선(DB 커넥션)을 미리 여러개 만들어 둔다 - 요청이 몰릴 때를 대비하여 미리 해놓는 것 - OSIV - 기본적으로 켜져있음 - 이로 인해 하나의 요청이 시작될 때 DBCP에서 DB 커넥션 하나가 배정된다 - 응답이 완료되면 그 때 DB 커넥션이 회수된다 - 이 방식은 비효율적이다. 대신 코딩이 편하다 - REST API 에서는 OSIV 끄기 - 스프링부트로 타임리프나 JSP로 MPA를 만드려는게 아니고 REST API를 구현하는게 목표라면 보통 끈다 - 대신 컨트롤러의 액션메서드마다 `@Transactional`을 붙여야 함 - [78강, OSIV 끄기](https://youtu.be/Mban1vh342Y) - [git](https://github.com/woooyoung/Surl_project_11/commit/e6b9910054919a6b1e5e99fc536e55ec6b07130b) # 79강 - [79강, REST API, surl 삭제](https://youtu.be/ThcQt9VDepE) - [git](https://github.com/woooyoung/Surl_project_11/commit/6dc78743b053a75eff87bf765c6d4ff8fda78c53) # 80강 - [80강, REST API, SURL 다건조회](https://youtu.be/M79thvgZaSg) - [git](https://github.com/woooyoung/Surl_project_11/commit/23925dd1aeb4613621866c0b952e1ddde20941a7) # 81강 - [81강, REST API, SURL 수정](https://youtu.be/cnSane6nkOY) - [git](https://github.com/woooyoung/Surl_project_11/commit/3fd92eff13ba78c7ddc04084b8f1f3e7fc850bca) # 82강 - 소유권 체크 - 조회, 수정, 삭제 전에 행위자(로그인 한 사람)가 surl 객체의 소유주인지 체크 - rq.getMember() - 현재는 1번 회원이 리턴되는 중 - [82강, 권한체크](https://youtu.be/ri5IlK-RUIQ) - [git](https://github.com/woooyoung/Surl_project_11/commit/db1996104370610da1e2ffdfc4a7b36fb7ef62bc) # 83강 - [83강, AuthService, 권한체크](https://youtu.be/8Gzj3SZe1AA) - [git](https://github.com/woooyoung/Surl_project_11/commit/6a37da681f9a158703a8cc981d9c83fdfcc4a8fb) # 84강 - 서버는 사용자를 구분하지 못함 - 서버에게 `내 정보 줘` 라고 하면? `너 누군데?` 라고 함 - 서버에게 `내 정보 줘, 나는 user1이야` 하면? 서버는 `user1`에 대한 정보를 줌 - 매 요청마다 본인이 누군지에 대한 정보(user1)를 포함시켜야 함 - `user1`과 같은 정보를 `인증정보`라고 함 - surl 다건조회할 때 인증정보를 포함시켜보자 - 해당 액션메서드에서 인증정보를 기준으로 현재 로그인 한 사람이 누구인지 파악하도록 - [84강, 매 요청마다 파라미터 정보로 인증](https://youtu.be/Culveeth4ak) - [git](https://github.com/woooyoung/Surl_project_11/commit/7e1d4679fa75928a48c8842e52bd0ed983952202) # 85강 - rq.getMember(); -> null 리턴 - rq.setMember(...); 를 사전에 했었어야함 - 매 액션메서드마다 해당작업을 해줘야함 - 더 좋은 방법을 찾자 - rq.getMember 메서드만으로 인증처리 - Rq는 `리퀘스트 스코프 빈` - HttpServletRequest 객체에 접근이 가능함 - 따라서 파라미터로 넘겨진 actorUsername에 접근이 가능 - [85강, Rq에서 인증처리](https://youtu.be/zSd4nRQ-zfU) - [git](https://github.com/woooyoung/Surl_project_11/commit/03332029d5507481ad098971350da6e9541e6072) # 86강 - [86강, getMember에 캐시 로직 추가](https://youtu.be/QK-yMelDGCE) - [git](https://github.com/woooyoung/Surl_project_11/commit/98b2c5fd76ead7e84f0eb7c40819e0b78e40ec7e) # 87강 - [87강, Authorization Header](https://youtu.be/HY1nVKSbeE4) - [git](https://github.com/woooyoung/Surl_project_11/commit/4c2c9e998cb9f4fa95b4645411d1e33568bfcdf6) # 88강 - 쿠키는 특정 사이트에 귀속되고, 해당 사이트로의 통신(요청)이 발생하면 관련된 쿠기가 자동으로 헤더에 압축되어 포함된다. - [88강, 쿠키](https://youtu.be/RvWBgmkA4N8) - [git](https://github.com/woooyoung/Surl_project_11/commit/96cc4bd1da1732813c4e137b8574b66cef278de9) # 89강 - [89강, 쿠키로 로그인, 로그아웃](https://youtu.be/9zjMV3FtN5g) - [git](https://github.com/woooyoung/Surl_project_11/commit/ba1547b570bd4dd0f796a6b688dc9bc67b79de4f) # 90강 - [90강, 스프링 시큐리티](https://youtu.be/cSg8mZScF-I) - [git](https://github.com/woooyoung/Surl_project_11/commit/4659fb74a735ae489ec48e2e932cb709367a21fc) # 91강 - [91강, 기본설정에서 특정 URL만 허용](https://youtu.be/MDECDglnTos) - [git](https://github.com/woooyoung/Surl_project_11/commit/0355b77c2564ef90aaba5832f055042a44bc36d3) # 92강 - [92강, CSRF 끄기](https://youtu.be/Le9DuuWfmKs) - [git](https://github.com/woooyoung/Surl_project_11/commit/3e6523c966c9650c305a5989576baf523e30280a) # 93강 - [93강, 비밀번호 암호화](https://youtu.be/5Wgu19Nyjkw) - [git](https://github.com/woooyoung/Surl_project_11/commit/f3364f8b336069e1d0583132a72571d5ba49b2e8) # 94강 - passwordEncoder로 암호화 한 것은 passwordEncoder로 검증해야 함 - [94강, 비밀번호 인증에 인코더 적용](https://youtu.be/jyQnMc7LXCk) - [git](https://github.com/woooyoung/Surl_project_11/commit/8e73c85c0061c795682fc77b3b415758efd031f8) # 95강 - 시큐리티의 입구컷 - 단건조회 API 호출하면 입구컷 됨 - 로그인을 제대로 했는데 입구컷 됨 - 시큐리티는 나의 로그인 방식을 이해할 수 없어 - CustomAuthenticationFilter 추가 - 스프링 시큐리티는 필터로 구현되어 있다 - 내가 원하는 필터를 적절한 시점에 실행할 수 있다 - 시큐리티가 나를 입구컷하기 전에 실행되어야 한다 - CustomAuthenticationFilter는 쿠키(actorUsername,actorPassword)가 올바른지 체크 - 올바르다면 스프링 시큐리티가 이해할 수 있는 방식으로 로그인 되었다고 설정해야함 - [95강, CustomAuthenticationFilter 추가](https://youtu.be/nUFudE3ocWo) - [git](https://github.com/woooyoung/Surl_project_11/commit/f83b039f19672834e006bc0b8e66ec42883a369a) # 96강 - 필터기능 구현 - 인증정보가 없거나 올바지 않으면 예외 발생 x - 시큐리티 인증정보를 등록하지 않는 걸로 - 왜냐하면 어차피 인증정보만 등록하지 않아도 사용자가 원하는 목적지로 못가 - 쿠키의 인증정보가 올바르다면 시큐리티에 인증정보를 등록 - 이른 filterChain.doFilter 후에는 return;을 해줘야함 - [96강, CustomAuthenticationFilter 구현](https://youtu.be/qr6XrKCzOeY) - [git](https://github.com/woooyoung/Surl_project_11/commit/26f8594f33ea185e962d74759d412f89b8a7524d) # 97강 - exceptionHandling 구현 - AppConfig 에서 static 메서드로 잭슨 빈 받아오는 기능 구현 - [97강, 자격없는 접근에 대한 오류](https://youtu.be/bt2afcp77Qc) - [git](https://github.com/woooyoung/Surl_project_11/commit/920b9537b7a2f75c5819c2f6987a2240cbdc4534) # 98강 - 인증정보 더블체크 이슈 - 스프링 시큐리티 인증객체 안의 name은 믿어도 됨 - Rq의 getMember는 위의 정보를 신뢰한다 - [98강, 인증정보 더블체크 제거](https://youtu.be/lup9Tibf9ro) - [git](https://github.com/woooyoung/Surl_project_11/commit/0aa0272395baa2397201abfae2e7ad5fea48cdd2) # 99강 - 회원의 식별자 - username -> id : 더 빠름, JPA에서 이 id를 기준으로 캐싱데이터 사용 여부를 결정 - 영속성 컨텍스트의 작동으로 인한 추가 회원 조회 쿼리가 발생하지 않을수도 있다 - [99강, username 대신 id 활용](https://youtu.be/5XeSUdJsW7k) - [git](https://github.com/woooyoung/Surl_project_11/commit/43625777849e369228fad4772249ef74406bdc0e) # 100강 - UUID : 길고, 난수성이 뛰어나서 해커가 특정회원의 apiKey(UUID)를 추측해서 알아낼 수 없다 - 회원마다 고유한 apiKey를 가지도록 - username, password를 통한 인증만이 아닌 apiKey를 통한 인증도 가능해진다 - 필터에서 인증할 때 쿠키에서 apiKey를 사용하도록 - 로그인 시에 올바른 username/password가 입력되었다면 쿠키로 apiKey 등록 - 로그인 API 엔드포인트에 대해서는 permit - 로그인시에 matchers 활용하도록 - apiKey 방식과 username/password 방식은 둘 다 탈취당하면 치명적이지만 apiKey가 상황상 더 낫다 - [100강, apiKey 도입](https://youtu.be/Pm3P4igXpX0) - [git](https://github.com/woooyoung/Surl_project_11/commit/d963d5a5ec50581fec56385a0c1ec8495b3c507d) # 101강 - 시크릿키로 서명해야 JWT가 완성된다. 이후 같은 키로 해당 JWT의 조작여부를 빠르게 알 수 있다 - appilcation-secret.yml이 수정됐다 -> GITHUB의 시크릿 변수도 수정해야함 - AuthTokenService - 특정 회원의 JWT를 생성해줌 - JWT는 만료의 개념이 있다 - JWT는 정보(내용)를 직접 넣을 수 있다 - 보통 회원의 식별자를 넣는다 - JWT를 보고 누구의 토큰인지 알아야하기 때문에 - 로그인 성공시 accessToken 이라는 쿠키가 생기고 회원의 JWT를 저장함 - [101강, JWT 방식으로 API KEY 생성](https://youtu.be/k5oeK2tYZn8) - [git](https://github.com/woooyoung/Surl_project_11/commit/71727ead6453ad0109311d602118e3171c77ce28) # 102강 - API KEY 종류별 비교 - 키 자체에 정보를 담고 있는가? - UUID : 없음 - JWT : 있음 - 해당 키가 어떠한 회원의 키인지 파악하는 방법 - UUID : `SELECT * FROM member WHERE apiKey = ?` 를 통해서 나온 회원 - JWT : JWT 자체에 정보가 들어있다. - 생성할 때 시크릿 키가 필요한가? - UUID : 필요없음 - JWT : 필요함 - 절대로 외부에 노출되면 안됨 - 해당 키가 유효한 키인지 확인하는 방법 - UUID : `SELECT * FROM member WHERE apiKey = ?` 를 해서 결과나 나오면 유효한 키 - JWT : 해당 JWT 를 생헝할 때 사용한 시크릿 키를 통해서 아주 빠르게 유효성 체크를 할 수 있다. - 중앙관리를 하는가? - UUID : 키 자체를 DB에서 관리한다. 언제든지 폐기, 중지, 재생성이 가능하다. 해커가 해당 키를 탈취했다는 사실을 안다면 빠르게 대처가 가능 - JWT : 중앙관리를 하지 않는다. 해커가 해당 키를 탈취했다는 사실을 안다고 하더라도 대처가 불가능하다. 그래서 수명을 보통 수명을 5분이내로 짧게 부여한다. - [102강, JWT에 수명이 있는 이유](https://youtu.be/V2Kswl91a6M) # 103강 - validateToken, getDataFrom 메서드 - 필터에서 사용 -> 키의 유효성 체크와 사용자 정보조회를 기존보다 빠르게 - 60초 후에 로그인이 풀린다 - 리프레시 토큰을 도입하여 해결 예정 - UUID를 활용한 API_KEY 방식이 틀린게 아니다 - [103강, JWT를 사용하여 인증](https://youtu.be/6z1EHbS50Qo) - [git](https://github.com/woooyoung/Surl_project_11/commit/1be4cb96ff1dac193ac67e79088e1ba595e57335) # 104강 - 필터에서 리프레시 토큰 활용 - 엑세스 토큰이 만료 되었을 때 - 리프레시 토큰을 사용하여 토큰을 재생성 - 필터에서 Refresh Token 얻기 - 엑세스 토큰이 만료되었다면 재갱신 시도 - 재갱신이 되면 새로 엑세스 토큰을 쿠키로도 응답 - 그래야 브라우저에 저장되어 있던 엑세스 토큰도 갱신됨 - [104강, Refresh Token 적용](https://youtu.be/fL-hWnFs0rI) - [git](https://github.com/woooyoung/Surl_project_11/commit/39f200873f68c8e5d538d0c732f2c1a40795823a) # 105강 - 로그인을 한다 -> 쿠키가 생성된다 - 엑세스 토큰과 리프레시 토큰 - 로그인 후 모든 요청마다 엑세스 토큰과 리프레시 토큰은 요청의 헤더에 자동으로 포함 - 토큰별로 검증에 걸리는 시간 - 엑세스 토큰 : CPU 연산만으로 해당 토큰이 유효한지 알 수 있다 - 유효성 체크 : 해당 토큰을 해커가 꾸민게 아닌 내(스프링부트)가 생성한것인지를 체크 - 리프레시 토큰 : CPU 연산 + IO 연산(DB 쿼리)으로 해당 토큰이 유효한지 알 수 있다 - 유효성 체크 : 해당 토큰을 해커가 꾸민게 아닌 내(스프링부트)가 생성한것인지를 체크 - 각 토큰별 작동 타이밍 - 엑세스 토큰 : 매 요청마다 해당 토큰이 사용됨 - 리프레시 토큰 : 엑세스 토큰의 만료기간이 10분이라면, 개별 브라우저의 요청기준에서 10분에 1번씩만 사용됨 - 이 특징때문에 리프레시 토큰이 엑세스 토큰과 비교해서 느려도 크게 문제되지 않음 -> 어차피 자주 사용 안함 - [105강, Refresh Token 작동방식](https://youtu.be/8qd4fAXLsbI) # 106강 - OpenAPI 문서 - 프론트엔드 개발자 입장에서 매우 편하게 서버 API에 대한 정보를 얻을 수 있다 - OpenAPI 문서를 잘 만들면 POSTMAN을 대체할 수도 있다 - SpringDoc - OpenAPI 표준에 맞게 문서를 자동을 만들어주는 툴이 Swagger - 스웨거를 스프링부트의 상황에 맞게 쓸 수 있게 해주는게 SpringDoc - SpringDocConfig - @OpenAPIDefinition : 스웨거 문서 세팅 - @SecurityScheme : Authorization 헤더로 로그인하는 기능 활성화 - @Bean public GroupedOpenApi groupApiV1() : API v1에 관련된 API에 대한 문서 생성 - @Bean public GroupedOpenApi groupController() : API v1에 관련없는 API에 대한 문서 생성 - [106강, SpringDoc](https://youtu.be/gTUNwqlMflQ) - [git](https://github.com/woooyoung/Surl_project_11/commit/6bd7724b5b98f1e2614885825cabc4b88f0308f6) # 107강 - OpenAPI 문서 - 프론트엔드 개발자 입장에서 매우 편하게 서버 API에 대한 정보를 얻을 수 있다 - OpenAPI 문서를 잘 만들면 POSTMAN을 대체할 수도 있다 - SpringDoc - OpenAPI 표준에 맞게 문서를 자동을 만들어주는 툴이 Swagger - 스웨거를 스프링부트의 상황에 맞게 쓸 수 있게 해주는게 SpringDoc - SpringDocConfig - @OpenAPIDefinition : 스웨거 문서 세팅 - @SecurityScheme : Authorization 헤더로 로그인하는 기능 활성화 - @Bean public GroupedOpenApi groupApiV1() : API v1에 관련된 API에 대한 문서 생성 - @Bean public GroupedOpenApi groupController() : API v1에 관련없는 API에 대한 문서 생성 - [107강, 일반 Controller 문서 꾸미기](https://youtu.be/Y8WMsY-D_BI) - [git](https://github.com/woooyoung/Surl_project_11/commit/b55952225926e9a170fb13ef7992044899c99f1b) # 108강 - api response body mime type - 모든 REST API 엔드포인트는 JSON 형태의 데이터 응답한다 - 설정이 따로 없다면 */*로 되어있음 - produces = APPLICATION_JSON_VALUE - 기존 코드 : @RequestMapping("/api/v1/members") - 신규 코드 : @RequestMapping(value = "/api/v1/members", produces = APPLICATION_JSON_VALUE) - 명시적으로 해당 어노테이션이 붙은 컨트롤러 클래스의 모든 하위 엔드포인트 메서드의 응답 타입을 `application/json`으로 설정 - 나중에 타입스크립트와 연동되어 프론트 개발자에게 도움이 됨 - application.yml - springdoc: default-produces-media-type: application/json - 기본적인 응답 본문의 MIME 타입을 설정 - GlobalExceptionHandler::handleException에 @ResponseStatus(HttpStatus.BAD_REQUEST)를 붙여서 실패응답 본문양식 설정 - [108강, REST Controller 문서 꾸미기](https://youtu.be/4ygk0ejRUiA) - [git](https://github.com/woooyoung/Surl_project_11/commit/597fc32585643d71cd625c65b5f77bfff53290b1) # 프론트엔드 ## 트랜스 오버(실시간 번역), 크롬 익스텐션 - [트랜스 오버](https://chromewebstore.google.com/detail/transover/aggiiclaiamajehmlfpkjmlbadmkledi) ## 스벨트 - [스벨트 - https://svelte.dev](https://svelte.dev) - [스벨트 - 튜토리얼 - https://learn.svelte.dev/tutorial/welcome-to-svelte](https://learn.svelte.dev/tutorial/welcome-to-svelte) - [스벨트 - 예제들 - https://svelte.dev/examples](https://svelte.dev/examples) ## 스벨트 5 preview - [스벨트 5 preview - 문서 - https://svelte-5-preview.vercel.app/docs](https://svelte-5-preview.vercel.app/docs) - [스벨트 5 preview - 플레이그라운드 - https://svelte-5-preview.vercel.app](https://svelte-5-preview.vercel.app) ## 스벨트킷 - [스켈트킷 - 문서 - https://kit.svelte.dev/docs](https://kit.svelte.dev/docs) - [스벨트킷 - 튜토리얼 - https://learn.svelte.dev/tutorial/welcome-to-svelte](https://learn.svelte.dev/tutorial/welcome-to-svelte) - [스켈트킷 - 문서 - 프로젝트 생성 - https://kit.svelte.dev/docs/creating-a-project](https://kit.svelte.dev/docs/creating-a-project) ## 프론트엔드 프레임워크별 문법 비교 - [프론트엔드 프레임워크별 문법 비교 - https://component-party.dev](https://component-party.dev) ### 사전학습기술 - HTML - CSS - CSS, FLEX - 자바스크립트 - 타입스크립트 ### 사전학습기술 1 : HTML - [생활코딩 - WEB - WEB1 - HTML & Internet](https://opentutorials.org/course/3084) ### 사전학습기술 2 : CSS - [생활코딩 - WEB - WEB2 - CSS](https://opentutorials.org/course/3086) ### 사전학습기술 3 : CSS FLEX - [CSS 셀렉터 튜토리얼 - CSS DINER](https://flukeout.github.io) - 정답을 검색해서 봐도 됩니다. - 제한시간 : 10분 - [CSS 셀렉터 튜토리얼 - Css Selector Game](https://kowoohyuk.github.io/css-selector) - 정답을 검색해서 봐도 됩니다. - 제한시간 : 10분 - [flex 개구리](https://flexboxfroggy.com/#ko) - 제한시간 : 10분 - [flex 디펜스](http://www.flexboxdefense.com/) - 제한시간 : 15분 - [flex playground](https://codepen.io/enxaneta/debug/adLPwv) - 목표 : flex-grow, flex-shrink, flex-basis 를 직관적으로 이해한다. - [글 - 이번에야 말로 css flex를 익혀보자](https://studiomeal.com/archives/197) - 목표 : flex의 전반적인 내용을 이해한다. ### 사전학습기술 4 : 자바스크립트 - [생활코딩 - WEB - WEB2 - JavaScript](https://opentutorials.org/course/3085) - [자바스크립트 온라인 튜토리얼](https://school.programmers.co.kr/learn/courses/3/3-hello-javascript-자바스크립트-입문) - [생활코딩 - WEB - WEB2 - JavaScript - Ajax](https://opentutorials.org/course/3281) - [생활코딩 - JavaScript callback function](https://youtu.be/iPe0noahrBY) - [생활코딩 - JavaScript promise (then)](https://youtu.be/Sn0ublt7CWM) - [생활코딩 - JavaScript async & await](https://youtu.be/1z5bU-CTVsQ) ### 사전학습기술 5 : 타입스크립트 - [타입스크립트 핸드북](https://joshua1988.github.io/ts) ### Node.js 설치 - [node.js - https://nodejs.org](https://nodejs.org) - [node.js - 다운로드 - https://nodejs.org/en/download](https://nodejs.org/en/download) - [nvm windows - download - https://github.com/coreybutler/nvm-windows/releases](https://github.com/coreybutler/nvm-windows/releases) - 윈도우에서는 이걸로 설치해도 됩니다. - [글 - NVM(Node Version Manage) 설치 및 사용해보기 (Mac) - https://suinchoi.tistory.com/115](https://suinchoi.tistory.com/115) - mac에서는 이걸로 설치해도 됩니다. ### NVM 명령어 - nvm list - 현재 설치되어 있는 node.js 버전들 리스팅 - nvm install v20.9.0 - v20.9.0 설치 - nvm use v20.9.0 - 해당 node 버전 활성화 ## legacy-peer-deps 이 기본적으로 작동하도록 전역설정 ```bash npm config set legacy-peer-deps true # 이제 더 이상 --legacy-peer-deps 를 명시적으로 입력하지 않아도 된다. npm config get legacy-peer-deps # 확인 ``` ## npm 최신화 - mac 에서는 아래 명령어 앞에 `sudo `를 붙여야 할 수 도 있습니다. ```bash npm install -g npm ``` # 109강 - [109강, 노드 설치 및 세팅, nvm, npm](https://youtu.be/qiH5v9cGo44) # 110강 - [110강, VS CODE 설치 및 세팅](https://youtu.be/sUGyVvxl05o) # 111강 - [111강, front 폴더를 VS CODE로 열기](https://youtu.be/IgbfM_fQLPc) - [git](https://github.com/woooyoung/Surl_project_11/commit/03c7650b0c17875f096949e5400ba68cff468b96) # 112강 - 스벨트킷과 스프링부트 - 언어 - 스벨트킷 : 자바스크립트 - 우리는 타입스크립트로 할 예정 - 스프링부트 : 자바 - 프레임워크 구성 - 스벨트킷 : 스벨트 + 추가기능 - 스프링부트 : 스프링 + 추가기능 - 프레임워크 성격 - 스벨트킷 : 프론트엔드 프레임워크 - 백엔드 프레임워크로서의 기능도 있음 / 대신 우리는 안 쓸 예정 - 스프링부트 : 백엔드 프레임워크 - 프론트엔드 프레임워크로서의 기능도 있음 / 대신 우리는 안 쓸 예정 - dependencies : 컴파일타임, 런타임 - devDependencies : 컴파일타임 - [112강, 스벨트킷 프로젝트 생성](https://youtu.be/ry1oFjw2ZWk) - [git](https://github.com/woooyoung/Surl_project_11/commit/2e7c1ca536e2d42ff623f1adabd2f08884bc1ac8) # 113강 - 스벨트킷 실행 - npm run dev - npm run + 명령어 -> package.json의 scripts에 정의 된 명령을 수행 - http://localhost:5173 - Ctrl + c 로 정지 - 각 확장자 별로 프리티어 활성화 - 전체 소스코드 정리 - npm run format - [113강, 프로젝트 재생성 및 스벨트킷 실행](https://youtu.be/_nx6zzb-LHg) - [git](https://github.com/woooyoung/Surl_project_11/commit/0fe8b2695a7d4149c3075337492e73562fc07d62) # 114강 - http://localhost:5173 - 메인페이지 - routes/+page.svelte - http://localhost:5173/about - 설명페이지 - routes/about/+page.svelte - http://localhost:5173/home/links - 링크들 - routes/home/links/+page.svelte - [114강, 라우팅](https://youtu.be/LTHVUUn7bNU) - [git](https://github.com/woooyoung/Surl_project_11/commit/f8ca8637578c136fd03ee5a69b0d380ec612651a) # 115강 - 전체 레이아웃 - routes/+layout.svelte - 모든 페이지에 적용됨 - 특정 범위 레이아웃 - routes/about/+layout.svelte - 설명 페이지(`routes/about/+page.svelte`)에만 적용됨 - [115강, 레이아웃](https://youtu.be/7xEfJ9salSE) - [git](https://github.com/woooyoung/Surl_project_11/commit/2562e6744b0a27d7596af20092c45ede3e03673a) # 116강 - [116강, 로그인 페이지](https://youtu.be/ZdFdh9uKT64) - [git](https://github.com/woooyoung/Surl_project_11/commit/bf9460b00fc244de28359db921ab785271324c5d) # 117강 - CORS 허용 - 타 도메인간 fetch는 기본적으로 금지여서 - CORS 작동은 브라우저, 허용은 백엔드 - [117강, CORS 허용](https://youtu.be/JEHPX2rDGZk) - [git](https://github.com/woooyoung/Surl_project_11/commit/d69220ae90ee93e13b787665eb50c052c2edbce0) # 118강 - 크로스 도메인 쿠키 허용 - credentials: 'include' - 브라우저에서 fetch를 할 때 꼭 해당 옵션을 붙여야 함 - 크로스 도메인 쿠키 허용 백엔드 - .domain(getSiteCookieDomain()) - 프론트 환경의 도메인을 명시해야 함 - 크로스 도메인 쿠키에 대한 보안 설정 - .sameSite("Strict") - 특정한 환경에서만 해당 쿠키가 접근할 수 있도록 - .secure(true) - 안전한 환경(HTTPS)에서만 쿠키 전송이 되도록 - .httpOnly(true) - 자바스크립트를 통한 쿠키 접근을 금지하도록, XSS 공격으로 인한 쿠키 탈취를 방어 - [118강, 크로스 도메인 쿠키 허용](https://youtu.be/26zKrdpipJc) - [git](https://github.com/woooyoung/Surl_project_11/commit/6f866d264a296d4aaa4e4436fa4454bf66732d49) # 119강 - 개발환경 - 프론트엔드 도메인 : http://localhost:5173 - 백엔드 도메인 : http://localhost:8070 - 쿠키 도메인 : localhost - 운영환경 - 프론트엔드 도메인 : https://www.surl.abbl.site - 백엔드 도메인 : https://api.www.surl.abbl.site - 쿠키도메인 : .www.surl.abbl.site - 소스코드에서의 도메인 명시 (하드코딩 x) - 프론트엔드 도메인 : AppConfig.getFrontUrl(); - 백엔드 도메인 : AppConfig.getBackUrl(); - 쿠키도메인 : AppConfig.getSiteCookieDomain(); - [119강, 백엔드, 프론트엔드에서 개발,운영환경 도메인 분기](https://youtu.be/PfhBIP7fm0g) - [git](https://github.com/woooyoung/Surl_project_11/commit/0ed7599c9910439a633e24657ee99ea48bb90c1a) - [git](https://github.com/woooyoung/Surl_project_11/commit/efe417ed5b9115c9dd06b6df9f3978db3deb461e) # 120강 - initAll에서 회원의 Refresh Token 변경 - 운영환경이 아니라면 username 과 refreshToken 같도록 설정 - Refresh Token 생성로직 변경 - UUID는 너무 길다. - 별도의 로직으로 조금 더 짧게 생성되도록 변경 - [120강, Refresh Token 생성로직 변경]() - [git](https://github.com/woooyoung/Surl_project_11/commit/c32b8e9298fb1dfb8b602fd47c0af027c1017166) # 121강 - @SecurityRequirement - API 문서에서 로그인 하면 그것이 - API 문서에서 Try out 할 때 적용되도록 - `@SecurityRequirement`를 API 컨트롤러에 적용 - Filter에서 쿠키보다 헤더를 통한 로그인을 우선시 - 기타 개선작업 - API 문서에서 로그인 테스트 - 내 정보 조회 API 구현 - 현재 로그인한 회원의 정보를 반환 - [121강, OPEN API 문서에서 로그인]() - [git](https://github.com/woooyoung/Surl_project_11/commit/a5d1326bca9a72dc81b09df791d662f77fcc9c4a) # 122강 - logout 함수 구현 - `+layout.svelte` 페이지에서 `로그아웃` 버튼 누르면 `logout` 함수 실행 - 백엔드 로그아웃 로직 변경 - accessToken, refreshToken 쿠기 삭제로 변경 - 로그아웃 요청은 시큐리티에서 로그인 체크 - `DELETE /api/v1/members/logout` 요청도 로그인 체크 대상에서 제외 - [122강, 로그아웃]() - [git](https://github.com/woooyoung/Surl_project_11/commit/1b7f2a13e274d67cff476fe85ec2b16e3a7588be) # 123강 - 내 정보 페이지 구현 - `routes/member/me/+page.svelte` 파일 추가 - GlobalError 커스텀 예외 클래스 추가 - type Member 정의 - member 상태변수 정의 - 상태변수는 `$state(초기값);` 형태로 초기화된 변수이다. - 보통 뷰에서 사용되는 변수이면 상태변수로 만드는게 보통이다. - `let member: Member | null = $state(null);` - errorMessage 상태변수 정의 - `let errorMessage: string | null = $state(null);` - getMe 함수 구현 - 해당 함수에서 API 요청 - 성공하면 member 변수에 값 할당 - 해당 변수가 뷰단에서 사용된 상태변수이기 때문에 해당 변수에 값을 할당하는 것 만으로 뷰 부분이 자동으로 갱신됨 - 실패하면 errorMessage 변수에 값 할당 - 해당 변수가 뷰단에서 사용된 상태변수이기 때문에 해당 변수에 값을 할당하는 것 만으로 뷰 부분이 자동으로 갱신됨 - $effect 에서 getMe 함수 실행 - 자동실행되어야 하는 함수는 $effect 안쪽에서 호출하는게 스벨트의 룰이다. - svelte.config.js는 왜 수정이 필요한가? - 기본 설정(`vitePreprocess()`)은 TypeScript를 처리하지만, Svelte 컴파일러에서 `script` 태그 내에서 TypeScript의 특정 기능(`public`, `private` 등 접근 제한자)을 처리할 수 있도록 명시적으로 활성화해야 합니다. - `vitePreprocess({ script: true })`를 추가하면, TypeScript의 모든 기능이 `

게시글 상세