침대코딩 BedCoding
침대코딩 BedCoding
  • Видео 118
  • Просмотров 777 262
[개발공부] certbot으로 https 인증서 자동갱신 및 도메인 설정 (next.js와 express 배포)
* 이전 영상: ruclips.net/video/q2foFWGd38g/видео.htmlfeature=shared
이전 영상에서는 그냥 AWS EC2에 http로만 배포하고 끝냈었는데, 이번에는 https로도 배포해보았습니다.
제가 영상에서는 따로 언급 안하고 넘어갔었는데 영상에서는 비용 문제로 AWS에 하나의 vm만 생성해서 그 안에서 ui와 api를 같이 배포했으므로 둘 다 같은 인증서 파일을 바라보고 있습니다.
그런데 만약 ui가 설치된 vm과 api가 설치된 vm이 서로 분리되어 있는 경우, 둘 다 같은 도메인을 써야 서로 통신할 수 있기 때문에 각 vm마다 동일한 인증서를 따로 넣어줘야 합니다.
[영상 요약]
1. 우선 내도메인이라는 사이트에서 무료로 도메인을 받았는데 신규 도메인을 인식하는데 시간이 걸려서 저는 미리 만들어놨습니다.
2. 이후 certbot 사이트에 들어가서 공식문서에 나와있는대로 진행해서 AWS에서 만든 vm 안에서 설치를 진행했는데, 도메인을 등록하는 명령어는 제가 별도로 검색해서 따로 넣어줬습니다.
예시) sudo certbot certonly -d 도메인 --manual --preferred-challenges dns
그 외 인증서 자동갱신 명령어는 공식 사이트에 나와있는 대로 넣어줬습니다.
3. 이후 Please deploy a DNS TXT record under the name: 이런 메세지와 함께 입력하...
Просмотров: 55

Видео

[개발공부] aws에서 git clone으로 프로젝트 배포 (pm2로 next.js와 express 구동)
Просмотров 542 месяца назад
* 이전 영상: ruclips.net/video/mtpHct7UI7I/видео.html * 다음 영상: ruclips.net/video/gA9P8uN089k/видео.html 이전에 만든 프로젝트들을 aws ec2 인스턴스에도 배포해봤습니다. 영상에서는 그냥 간단하게 git clone 하는 방식으로 프로젝트 가져왔습니다. 보통 pm2는 node.js 백엔드 서버를 배포할 때 사용했지만, 이번에는 프론트엔드를 next.js로 만들었기 때문에 프론트엔드도 pm2로 배포했습니다. react로 정적으로 배포할 때는 nginx로 배포했지만, 영상에 나온 next.js의 경우 서버 측에서 렌더링된 페이지를 클라이언트에 제공하는 방식으로 동작하고 있으므로 UI를 서버 구동시키는 방식으로 배포했습니다. [그외] ...
[개발공부] STT API 사용3 - React에서 OpenAI STT API 서버로 음성 데이터 전달 처리
Просмотров 772 месяца назад
* 이전 영상: ruclips.net/video/7hRN-IMT2hI/видео.htmlfeature=shared 지난 시간에는 구글 STT API를 이용해서 음성을 텍스트로 추출했었는데, chatGPT에서 제공하는 STT API도 구글이랑 원리가 동일해서 UI는 재활용하고 백엔드 로직만 [구글 API → OpenAI API]로 바꿔치기해봤습니다. 역시 동일하게 잘 동작하네요.
[개발공부] STT API 사용2 - React에서 구글 STT API 서버로 음성 데이터 전달 처리
Просмотров 1073 месяца назад
* 이전 영상: ruclips.net/video/2ZCLF2rarn8/видео.html 앞 시간에 API 키를 발급 받아서 예제만 실행해봤는데, 이번 시간에는 chatGPT에게 프롬프트를 줘서 받은 예시 코드를 활용해서 프론트엔드에서 백엔드 서버로 마이크에서 말한 음성을 전달하도록 수정했습니다. 처음에는 chatGPT가 wav 파일 예제를 주던데, webm이 기본값인 것으로 알고 있어서 기본값을 기준으로 파일을 전달하도록 수정했습니다. 프롬프트의 경우 이런식으로 줬습니다. "아래 코드는 구글 STT API를 호출하는 서버쪽 소스코드이다. 이것을 react 프론트엔드로부터 audio 파일을 받을 수 있도록 수정해줄래? 프론트로부터 받은 파일은 따로 저장하지 않을 것이다." 이후 "프론트엔드에서 파일을 ...
[개발공부] STT API 사용1 - 구글 STT API 키 발급 후 Node.js로 예제 실행해보기
Просмотров 724 месяца назад
* 다음 영상: ruclips.net/video/7hRN-IMT2hI/видео.html 음성 텍스트 추출을 하기 위해 구글 클라우드에서 API 키를 발급받은 뒤 Node.js로 예제를 호출해봤습니다. 시간 관계상 아직 프론트에서 백엔드 서버를 호출하는 것까지는 구현하지 못했습니다. 여기서 더 발전시킬 경우 React 프로젝트를 만들어서 음성을 서버로 전달하는 로직을 추가로 작성해야 하는데 그건 다음주에 할 생각...
[개발공부] chatGPT로 CRUD 구현 (Next.js + react-query) (Express + PostgreSQL)
Просмотров 1884 месяца назад
* 다음 영상: ruclips.net/video/q2foFWGd38g/видео.htmlfeature=shared 간단하게 chatGPT에 프롬프트만 던져서 풀스택 프로젝트를 만들어보았습니다. 전체적인 흐름을 잘 알고 있는 개발자들은 생산성을 크게 증가시켜줄 것으로 보여집니다. [전체 과정] 1. PostgreSQL DB에 간단한 테이블 생성 2. chatGPT가 만들어준 소스코드로 Express에서 CRUD 하는 API 구현 후 postman으로 API 호출 테스트 3. chatGPT가 만들어준 소스코드로 Next.js에서 react-query를 사용하여 API 연동 ☆백엔드 프롬프트 내용 나는 guestbook이라는 테이블을 postgresql db에 만들었다. articleno (pk) useri...
[개발공부] nodeJS에서 구글번역 API 사용하기 (express, nextJS, reactJS)
Просмотров 565 месяцев назад
전체 순서 1. 구글 클라우드 가입 2. 결제 카드 등록 3. 무료 체험판 사용시 3달 무료(40만원 지급) 4. 새 프로젝트 생성 5. 프로젝트 생성된 이후 "모든 API 보기" 클릭 6. 머신러닝 탭에서 Cloud Translation API 클릭 7. 해당 API "사용" 클릭 8. 구글 클라우드에서 API 키 발급 이후 코딩 과정 1. nodeJS로 API키 넣은 뒤 예시대로 구글번역 API 호출 2. express로 간단한 백엔드 구축 - GET으로 파라미터를 주는 방식 - POST로 body를 주는 방식 (참고: GET은 body를 줄 수 없음) 3. postman으로 API 호출 테스트 4. nextJS로 API 호출 5. nextJS 로직 reactJS로 그대로 옮겨서 실행 사실 next...
[개발공부] nodeJS에서 라마2 AI 모델 사용하기 (허깅페이스 + 올라마)
Просмотров 1525 месяцев назад
처음에는 llama-node 라이브러리를 사용하려고 했으나 해당 라이브러리는 huggingface에서 가져온 AI 모델을 인식하지 못하는 문제가 있어서 결국 Ollama를 컴퓨터에 설치해서 로컬로 구동시키는 방식으로 사용했습니다. (그래서 만약 aws 같은 곳에 서비스 배포 하시려면, 리눅스 서버 안에서 올라마 설치하신 뒤 구동시킨 상태에서 nodeJS 프로젝트를 돌려야 할 것 같습니다.) 하지만 llama2는 한국어 학습 데이터가 0.6%밖에 안되다보니 한글을 못하는 이슈가 있었고, 한국어를 할 수 있도록 커스텀된 AI 모델로 바꿔치기 해서 사용해봤지만 아직까지는 한국어가 제대로 되지 않았습니다. 그래서 아직까지는 라마2를 가지고 바로 자체 AI를 구축하기는 어려워 보여서 올해 출시 예정인 라마3를 ...
[개발공부] nextJS에서 Playwright로 E2E 테스트 코드 작성 (Express API 호출 테스트)
Просмотров 2336 месяцев назад
테스트코드에서 바로 API를 호출시키는 것이 아니라, UI에서 API를 호출하는 버튼을 클릭시킨 뒤 그 결과를 확인하는 방식으로 간접적으로 API를 테스트했습니다. 초반에 Express로 간단하게 CRUD 하는 API를 만들긴 했지만 애초에 프론트엔드에서 테스트 코드를 발동시키는게 주 목적이다보니 백엔드는 대충 만들었습니다.
[개발공부] 카카오 로그인 API를 REST API 방식으로 프론트에서 바로 호출해보기 (nextJS & reactJS)
Просмотров 1,5 тыс.8 месяцев назад
[개발공부] 카카오 로그인 API를 REST API 방식으로 프론트에서 바로 호출해보기 (nextJS & reactJS)
[개발공부] 카카오 맵 API 사용하기 (nextJS & reactJS)
Просмотров 9778 месяцев назад
[개발공부] 카카오 맵 API 사용하기 (nextJS & reactJS)
[개발공부] chatGPT 연동(2) - reactJS 프론트에서 백엔드 호출 처리
Просмотров 529 месяцев назад
[개발공부] chatGPT 연동(2) - reactJS 프론트에서 백엔드 호출 처리
[개발공부] chatGPT 연동(1) - nodeJS express 백엔드에서 chatGPT API 호출 처리
Просмотров 1209 месяцев назад
[개발공부] chatGPT 연동(1) - nodeJS express 백엔드에서 chatGPT API 호출 처리
[개발공부] reactJS랑 nextJS 비교해보기
Просмотров 1689 месяцев назад
[개발공부] reactJS랑 nextJS 비교해보기
[개발공부] 도메인과 SSL인증서 발급받기 (+ react 배포한 nginx에 https 접근 설정)
Просмотров 2449 месяцев назад
[개발공부] 도메인과 SSL인증서 발급받기 ( react 배포한 nginx에 https 접근 설정)
[개발공부] 원격 vm 생성 후 nginx 세팅해서 react 배포하기
Просмотров 65911 месяцев назад
[개발공부] 원격 vm 생성 후 nginx 세팅해서 react 배포하기
[개발공부] react에서 AWS S3로 파일업로드 하기
Просмотров 694Год назад
[개발공부] react에서 AWS S3로 파일업로드 하기
[개발공부] nestJS - (3)개발기/운영기 분기처리
Просмотров 135Год назад
[개발공부] nestJS - (3)개발기/운영기 분기처리
[개발공부] nestJS - (2)로그 파일 남기기
Просмотров 113Год назад
[개발공부] nestJS - (2)로그 파일 남기기
[개발공부] nestJS - (1)스케줄러와 DB 연동하기
Просмотров 168Год назад
[개발공부] nestJS - (1)스케줄러와 DB 연동하기
사육장 세팅 박살낸 반수생 거북이
Просмотров 8 тыс.2 года назад
사육장 세팅 박살낸 반수생 거북이
반수생 거북이 키우는 방법...?
Просмотров 8 тыс.3 года назад
반수생 거북이 키우는 방법...?
AWS 데이터베이스 생성후 DB툴, 소스코드 연동 (postgreSQL, DBeaver, pgAdmin, nodejs)
Просмотров 7853 года назад
AWS 데이터베이스 생성후 DB툴, 소스코드 연동 (postgreSQL, DBeaver, pgAdmin, nodejs)
반수생 거북이 육지 만들기
Просмотров 30 тыс.3 года назад
반수생 거북이 육지 만들기
골키퍼 혼자 남은 경기
Просмотров 6 тыс.3 года назад
골키퍼 혼자 남은 경기
LG 이동식 에어컨 소음 후기 (침대에 누워서 노트북 할 때 소음 vs 측정한 데시벨)
Просмотров 26 тыс.4 года назад
LG 이동식 에어컨 소음 후기 (침대에 누워서 노트북 할 때 소음 vs 측정한 데시벨)
주문제작한 거북이 수조 세팅
Просмотров 22 тыс.4 года назад
주문제작한 거북이 수조 세팅
거북이 주인 알아보나요 (거북이 주인 인식)
Просмотров 40 тыс.4 года назад
거북이 주인 알아보나요 (거북이 주인 인식)
모터로 거북이 어항 환수, 물갈이 하기
Просмотров 6 тыс.4 года назад
모터로 거북이 어항 환수, 물갈이 하기
마녀의 샘4 드래곤 나르에르
Просмотров 10 тыс.4 года назад
마녀의 샘4 드래곤 나르에르