만들고 싶은거 만들기 (24) 썸네일형 리스트형 광고 수익을 창출할 웹사이트 만들어보기 3-5(EC2 서버에 Python 최신버전 설치 Flask 서버 배포준비) 지난편에서까지 탄력이 토끼푸딩 같은 EC2서버를 빌려보았다. 좋다.이번편엔 빌린 EC2서버에 내 플라스크 백앤드로직을 배포해보겠다. 빠로시작. 일단 플라스크를 배포할수있게 필요한 소프트웨어 설치가 먼저다.당연 파이썬이 설치되어야 한다.리눅스 환경에서 파이썬설치를 먼저 아래 명령어로 해주자.sudo yum update -ysudo yum install python3 python3-pip -y 그럼 이렇게 나온다.무슨뜻이냐면 이미 설치 완료되어있다는 뜻이다.그게 뭘 의미하냐면 AWS에서 빌린 EC2 리눅스2 서버의 경우 Python 3과 pip가 이미 설치되어 있으며 최신 버전으로 유지 되고 있다는 뜻이다.Good 이다.이제 그 다음은 기존에 CORS에 적용되어있는 localhost를 버셸에 배포된 u.. 광고 수익을 창출할 웹사이트 만들어보기 3-4(AWS EC2 서버 빌리기) 지난편에서 리액트서버는 버셸에서 배포가 완료되었기 때문에 이번엔 Flask 서버를 배포해 보겠다. 나는 azure만 좀 많이 사용해보고 AWS는 5년전에 테스트용으로 사용해보고 기억이 아무것도 나지 않는다.그래도 일단 진행해본다.AWS배포는 여러 단계로 나눠서 진행할 예정이다.일단 이번편에서는 서버를 빌리는 단계까지 진행해 볼것이다.글 하나가 너무 길어지면 내가 작성하기 힘들어서 그렇다.일단 내가 사용할 AWS 서비스는 EC2다. EC2가 서버인건 아는데 이게 뭘 의미하는건지는 모른다.이제 알아봐야 된다. 어음 그렇구나 물리적인 서버를 빌려주는거구나 어 알았어.이름이 궁금해서 좀 찾아봣는데 Elastic Compute Cloud = 탄력적 컴퓨팅 클라우드 필요한 리소스를 유연하게 늘리거나 줄일 수 있는.. 광고 수익을 창출할 웹사이트 만들어보기 3-3(React 서버 배포하기 With Vercel) 1차적으로 소스도 만들었고,깃에도 올려놨으니, 이제 내 로컬PC에서 띄우는게 아닌 외부에 서버를 띄워보기로 한다.찾아보니 리액트서버를 배포하는 방법이 여러가지가 있는데 빠르고 간단하게 테스트하고 싶다면: Vercel 사용.추후 확장성을 고려한다면: Netlify 추천.비용 없이 진행하고 싶다면: GitHub Pages.이 정도로 추려봤다. 어차피 내 페이지는 작고 간단한 서버라 Vercel을 통해 배포해보기로 한다.Vercel은 아래와 같은 기능을 무료로 이용 가능하다.무료 요금제 기능자동화된 배포: GitHub, GitLab, Bitbucket과 연동하여 코드 변경 시 자동으로 빌드 및 배포됩니다.서버리스 함수 지원: 서버 관리를 필요로 하지 않는 서버리스 함수를 통해 백엔드 로직을 구현할 수 있습니다.. 광고 수익을 창출할 웹사이트 만들어보기 3-2(React 서버 github 소스 업로드] 이번엔 React서버 바로간다.한번 해봤으니 짧게 쳐버린다. 1.init 먼저 빠르게 해준다.(초기화) cd D:/emoji-generator-frontendgit init 2.제외파일 선택React프로젝트는 .gitignore파일이 create-react-app 명령어로 프로젝트 생성할때 만들어 지나보다.이미 .env.local과 다른 환경별 .env 파일들이 .gitignore에 포함되어 있으니 추가로 .env를 넣지 않아도 된다. (쥐리는 리액트다.) 3.API키 .env로 빼기python과 똑같이 .env파일을 써서 내 카카오톡 API key를 감출거다.프로젝트의 루트디렉토리에 .env파일을 추가해 내 API 키를 작성한다.REACT_APP_KAKAO_API_KEY=4.App.js에 하드코딩으.. 광고 수익을 창출할 웹사이트 만들어보기 3-1(Flask 서버 github 소스 업로드] 일단 크게 3가지정도의 할일이 있다. 지난편까지 일단 간단한 AI 이미지 생성기를 만들었다. 그 다음 차례는 GitHub에 소스 올리기로컬 프로젝트를 깃(Git)으로 초기화.GitHub에 새 레포지토리 생성.로컬 프로젝트를 GitHub 레포지토리에 푸시.로컬 환경에서 Flask 서버와 React 서버 테스트Flask 서버 실행:flask run 명령어로 서버 실행.서버 URL(예: http://127.0.0.1:5000) 확인.React 서버 실행:React 프로젝트 디렉토리에서 npm start로 서버 실행.React 개발 서버 URL(예: http://localhost:3000) 확인.Flask와 React 간 통신 테스트:React에서 Flask 서버와 API 통신 확인.AWS EC2를 사용해 두 .. 광고 수익을 창출할 웹사이트 만들어보기 2-10 (Frontend 꾸미기~! -완-) 좋다. 일단 내 페이지를 한번 다시 봐보자. 위치가 별로다. 그리고 나는 영어분노증(나만 가지고있음)이 있어서 한글로 싹다 변경하고 위치조정까지 해보겠다. 좋아 한글 밖에 없다 한글사랑. return ( 만능 그림봇 setPrompt(e.target.value)} className="input-box" /> {loading ? "생성 중..." : "생성!"} {/* 로딩바 및 대기 안내 */} {load.. 광고 수익을 창출할 웹사이트 만들어보기 2-9(Frontend 꾸미기~! CSS 삽질) 사실 나는 미대출신이다.(자퇴임)그래서 감각이 좀 있는편이다.(아님) 그래서 자신있게 꾸며보자고~!(자신감만 있음)일단 내 페이지의 상태를 보자.쉽지 않다............ 이번엔 이 페이지를 내 미적감각을 살려 꾸며보겠다.일단 참고할만한 디자인을 찾아본다. 색감은 AI로 만드는 약간 이런 보라보라 푸르른푸릉 색감이 좋을것같다.GPT 선생한테 초본을 뽑아달라고 해보자. 1. 필요한 기술CSS 그라데이션과 밝은 색상 팔레트를 활용.글꼴(Font) 선택으로 고급스럽고 현대적인 느낌 제공.TailwindCSS 또는 Styled-Components 같은 UI 라이브러리 활용이라고 한다.바로 시작해보자. 일단 당연히 웹화면을 담당하고 있는 리액트서버의 App.js파일을 수정해준다.기존 JavaScript 코.. 광고 수익을 창출할 웹사이트 만들어보기 2-8(카카오톡 공유기능 추가) 번역까진 완벽하게 진행했다.거의 완성품이라고 봐도 무방할 정도다 (미완성품)나 이제 좀 쓸모있는놈 아닐까?........이제 실제 공유기능을 추가해보도록 하겠다.일단 기능추가는 React 서버에 구현할 예정이다. 앞단에 있는거니까 당연히 프론트앤드에서 개발한다.(너빼고 다암) 왜 ReactJS 서버에 구현해야 하나요?카카오톡 API는 클라이언트 사이드에서 동작:카카오톡 JavaScript SDK는 브라우저 환경에서 실행됩니다.사용자의 브라우저에서 직접 카카오톡 앱으로 공유 요청을 보낼 수 있어 React에서 구현하는 것이 간편합니다.백엔드(Flask)에서는 제한 사항 존재:카카오톡 API는 사용자 인증 정보를 필요로 하기 때문에 클라이언트 사이드에서 처리하는 것이 적합합니다.Flask 서버에서는 카카오톡.. 이전 1 2 3 다음
