vercel (4) 썸네일형 리스트형 광고 수익을 창출할 웹사이트 만들어보기 4-4(React서버 프론트엔드 부분 기능 추가구현 및 개선사항) 이번엔 Vercel에 배포되어있는 React 웹페이지에 수정 및 구현한 사항에 대해서 알아보겠다. 리액트는 크게 바뀐건 로고가 생겼다는거, 그리고 화면에 사용자가 어떤 텍스트를 입력했는지 보이게 한 부분 등짜잘짜잘하게 바뀌었고 크게 바뀐부분은 없다. 상세 변경된 Git 커밋내역은 아래와 같다. 2024년 12월 8일feat: 카카오톡 공유 기능에 사용자 프롬프트 텍스트 포함카카오톡 공유 기능 추가.사용자가 입력한 프롬프트 텍스트를 공유 메시지에 포함하도록 구현.feat: 백엔드 에러 메시지 사용자에게 표시 개선백엔드에서 발생한 에러를 사용자에게 더 직관적으로 전달하도록 개선.2024년 12월 9일feat: title 수정 및 logo image 추가프로젝트 타이틀 수정.로고 이미지를 새롭게 추가하여 UI.. 광고 수익을 창출할 웹사이트 만들어보기 4-1(중간점검) 어느 기술을 사용했고 구현프로세스는 어떻게 되는지 정리하는겸 작성하는 글이다.내가 보기위해 작성한 글이다.만능그림봇 프로젝트 사용 기술 (수정 및 보완)사용 기술Flask: 백엔드 프레임워크로 사용, RESTful API 구현.Gunicorn: Flask 애플리케이션의 배포를 위한 WSGI 서버.Nginx: 리버스 프록시 설정 및 HTTPS 인증서 적용.Certbot: Let's Encrypt 인증서를 통해 HTTPS 설정.OpenAI API: ChatGPT 및 DALL·E를 사용하여 프롬프트 번역 및 이미지 생성.Stable Diffusion: 이미지 생성 모델을 테스트했으나 최종적으로 OpenAI DALL·E로 대체.Flask-CORS: CORS 설정을 통해 프론트엔드와 백엔드 간 통신 허용..env.. 광고 수익을 창출할 웹사이트 만들어보기 3-7(Vercel과 EC2 flask서버 통신 + Gunicorn으로 앱 띄워보기) 저번편에서 EC2서버의 SSL인증까지 완료했다.이번에는 Vercel과 flask서버의 통신을 진행할것이다. 주말이라 시간이 빨리가니 빨리 시작한다.일단 첫번째로 Vercel에서 저번에 배포한 github엔 포함되지 않는 .env의 값을 따로 추가해줘야 한다.Vercel에서 **Environment Variables(환경 변수)**를 수정하는 방법은 다음과 같다. 1. Vercel 프로젝트로 이동Vercel Dashboard에 로그인합니다.환경 변수를 수정하려는 프로젝트를 클릭합니다.2. 설정 메뉴로 이동프로젝트 대시보드 화면에서 "Settings" 탭을 클릭합니다.왼쪽 메뉴에서 **"Environment Variables"**를 선택합니다.3. 환경 변수 추가 또는 수정새 변수 추가Key: 환경 변수 이.. 광고 수익을 창출할 웹사이트 만들어보기 3-3(React 서버 배포하기 With Vercel) 1차적으로 소스도 만들었고,깃에도 올려놨으니, 이제 내 로컬PC에서 띄우는게 아닌 외부에 서버를 띄워보기로 한다.찾아보니 리액트서버를 배포하는 방법이 여러가지가 있는데 빠르고 간단하게 테스트하고 싶다면: Vercel 사용.추후 확장성을 고려한다면: Netlify 추천.비용 없이 진행하고 싶다면: GitHub Pages.이 정도로 추려봤다. 어차피 내 페이지는 작고 간단한 서버라 Vercel을 통해 배포해보기로 한다.Vercel은 아래와 같은 기능을 무료로 이용 가능하다.무료 요금제 기능자동화된 배포: GitHub, GitLab, Bitbucket과 연동하여 코드 변경 시 자동으로 빌드 및 배포됩니다.서버리스 함수 지원: 서버 관리를 필요로 하지 않는 서버리스 함수를 통해 백엔드 로직을 구현할 수 있습니다.. 이전 1 다음
