K-digital 기초역량훈련
[패스트 캠퍼스] 코딩 1:8 | 웹 개발 왕초보 입문 (5주차)
1️⃣ AWS 클라우드 (Amazon Web Services)
아마존에서 운영하는 클라우드 서비스
1-1. 아마존 계정 가입 후 [콘솔 홈 > 우측 상단 위치정보] '서울' 설정 변경
나는 Gmail 사용해서 가입했고 음성통화를 통한 보안 확인 결제정보, 주소 등 입력 후 무료버전 선택까지 완료하여 가입했다
(개인적으로 결제정보랑 주소 쓰는 거 피싱 당할까 무서워하는데 아마존이니까 뭐! 하는 생각으로 차근차근 진행함)
1-2. [서비스 > 컴퓨팅 > EC2 > 인스턴스] 우측 상단 '인스턴스 시작'
1-3. 인스턴스 설정 완료하기
이름 설정 (본인이 원하는 이름으로)
[키 페어 > 새 키 페어 생성] 클릭
키 페어 이름 설정 (본인 원하는대로) 후, 키 페어 유형 RSA, 파일 형식은 .ppk 선택
페이지 하단에 SSH, HTTS, HTTP 트래픽 허용 모두 체크 후
'인스턴스 시작' 클릭하면 인스턴트 생성 완료
[인스턴스] 로 돌아가서 새로고침 후 '연결' 선택
[인스턴트에 연결 - EC2 인스턴스 연결] '연결' 선택
검정 배경의 가상환경이 나오면 설정 완료
1-4. FileZila 파일질라 이용한 업로드 (https://filezilla-project.org/)
좌상단 [사이트 관리자] 클릭 > [새 사이트] 클릭 후 세부사항 설정
- 프로토콜 : SFTP
- 호스트 : AWS에서 만들었던 인스턴스의 퍼블릭 IP 주소
- 로그온 유형 : 키 파일
- 키 파일 : 다운받았던 .ppk 파일 업로드
연결 누르면 비밀번호 설정이라던지 IP주소와 관련된 팝업창이 뜰 수도 있는데
강의에서 따로 언급은 없길래 나도 별 설정없이 그냥 확인버튼만 계속 눌러줬다
왼쪽 창에서 배포하려는 모바일 청첩장 폴더를 찾아서
오른쪽 인스턴스로 드래그 앤 드롭하여 파일 업로드 후 파일명을 'wedding' 으로 바꿔주었다
1-5. 인스턴스 설정 확인
aws 인스턴스로 돌아가서 새로고침 후 다시 연결하고 아래 명령어를 통해서 파일이 잘 업로드 되었는지 확인
$ ls
$ cd wedding
$ sudo pip3 install flask Flask-PyMongo
cd(change directory) 명령어를 이용하여 wedding 폴더 내로 이동 후 두번째 명령어 입력하여 Flask 설치
하단에 Successfully installed Flask-PyMongo 대충 이런 문구가 나오면 성공한 것이다
1-6. 인스턴스에서 MongoDB 설치
https://www.mongodb.com/docs/v4.4/tutorial/install-mongodb-on-amazon/
$ sudo vim /etc/yum.repos.d/mongodb.repo
해당 명령어를 작성하면 아무 것도 없이 물결(~)이 많은 검정 화면 하나가 나타난다
(리눅스 환경에서 텍스트 파일을 편집할 수 있는 환경)
해당 환경에서 키보드 ' i '를 누르면 하단에 영문이 'insert'로 바뀌는데,
이때 상단 몽고DB 홈페이지에서 복사해온 1번 코드를 붙여넣고 키보드 'esc' 누르기
[mongodb-org-4.4] name=MongoDB Repository baseurl=https://repo.mongodb.org/yum/amazon/2/mongodb-org/4.4/x86_64/ gpgcheck=1 enabled=1 gpgkey=https://www.mongodb.org/static/pgp/server-4.4.asc
'esc'를 누르면 하단 'insert' 문구가 사라지고
그 상태에서 ' : ' (cmd + ;) 를 누르면 명령어를 입력할 수 있게 활성화 되는데
해당 상태에서 'wq' 를 입력 후 'enter' 하면 파일 저장 완료
: wq
다시 몽고DB 홈페이지에서 2번 코드를 복사해 인스턴스에 붙여 넣어 몽고DB를 설치
Complete! 문구가 뜨면 설치 완료
$ sudo yum install -y mongodb-org
1-7. 인스턴스에서 MongoDB 실행
$ sudo systemctl start mongod
위 명령어를 입력하면 아무것도 바뀌지 않고 바로 한 단계 아래로 탭 되는데 이게 맞는 거다
$ sudo systemctl status mongod
그리고 몽고DB가 잘 실행됐는지 확인하는 명령어를 입력 후
하단에 'active (running)' 이라고 뜨면 정상적으로 실행되고 있는 것
1-8. 인스턴스 주소로 모바일 청첩장 실행
$ sudo python3 app.py
명령문을 입력하면 하단에 IP 주소 2개가 확인된다
[AWS > 인스턴스 세부 정보] 로 돌아가서 퍼블릭 IP 주소로 접속하면 모바일 청첩장이 뜬다
잘 뜬다면 배포 성공한 것!!!
(+ 인스턴스 중지하기, 인스턴스 종료하기)
인스턴스 선택 > 인스턴스 상태 > 인스턴스 중지
인스턴스 선택 > 인스턴스 상태 > 인스턴스 종료 (삭제)
인스턴스 종료를 누르면 '인스턴스 상태 : 종료됨' 으로 변하고 최대 반나절 정도 기다리면 삭제 된다고 한다
처음에 인스턴트스 종료가 잠깐 멈추는 용인줄 알고 눌렀다가 서버 영구삭제 되어버린 .....
그래서 인스턴스 다시 만들어서 진행했다. 저같은 실수 하지 마시길 !!!!
'중지 = 멈춤 / 종료 = 삭제' 입니다
2️⃣ 백그라운드 실행
Ctrl + C (인스턴스 프로그램 종료)
macOS 사용 중이라 이전 Flask 환경에서는 'ctrl + c' 단축키 안 먹어서 다른 단축키를 서칭했었다
이번에도 그냥 안되겠지 하는 마음으로 눌러보는데 아래 이미지처럼 ^C가 뜨더니
모바일 청첩장 서버가 연결이 안되는 것.... 한 번에 성공한 맥 유저는 기뻐 날뛰었습니다
macOS 에서 cmd 아니고 control 입니다
$ sudo nohup python3 app.py &
위 명령어를 입력하면 4자리 숫자가 나오는데
해당 상태에서 다시 모바일 청접장 서버를 새로고침 후 실행이 완료되면 백그라운드 실행 성공
(4자리 숫자는 프로그램 관리 번호라고 생각하면 된다고 한다)
3️⃣ 도메인 설정하기
도메인 > 도메인 검색등록
어떤 사람이 어떤 도메인을 사용하고 있는지 정보 검색 가능
이미 나오는 도메인이면 설정 불가
3️⃣ OpenGraph (Og태그)
하나의 웹 페이지의 코드를 살펴보면, <head> 태그 안에 <meta> 태그에 많은 정보가 담겨져있다
<meta> 태그는 해당 웹 페이지의 메타 데이터를 가지고 있는 태그
Search Engine Optimization (SEO, 검색 엔진 최적화)
: 검색 엔진 효율적으로 노출되도록 웹 사이트를 개선하는 프로세스
3-1. <meta> 태그 수정하기
<meta property="title" content="박준영♥채송아 결혼합니다">
<meta property="description" content="여기를 눌러 링크를 확인하세요.">
<meta property="image" content="/static/c.jpeg">
<meta property="og:title" content="박준영♥채송아의 청첩장">
<meta property="og:description" content="여기를 눌러 링크를 확인하세요.">
<meta property="og:image" content="/static/c.jpeg"
3-2. Filezilla 에서 기존 파일 삭제 후 수정된 html 파일 재업로드
3-3. 인스턴스 환경 재설정하기
$ ps -ef | grep python3
인스턴스 환경에서 위 명령어 입력 후 python3 이 실행 중인 서버 넘버를 확인
($ ps -ef : 실행중인 모든 프로그램 확인하는 명령어)
$ sudo kill -9 ****(해당 서버 넘버)
기존 app.py 파일이 실행되고 있던 서버를 모두 종료시켜준다 (내 경우에는 2개 서버 종료!)
$ cd wedding
$ sudo nohup python3 app.py &
기존 서버가 종료되면 다시 cd 명령어를 통해 폴더 내부로 위치를 옮기고
sudo nohup 명령어를 이용해 업데이트된 app.py 파일을 실행 시켜준다
(나는 기존 4자리 숫자에서 새로 연결하니까 5자리 숫자가 나와서 당황했는데 5자리도 상관 없는듯 하다)
그리고 웹 페이지로 돌아가서 새로고침 후 별다른 오류 없으면 성공!
thank you for References🙏
https://developers.google.com/search/docs/fundamentals/seo-starter-guide?hl=ko
http://www.tcpschool.com/html-tags/meta
https://developer.mozilla.org/ko/docs/Web/HTML/Element/meta
맥북에 듀얼모니터로 공부했던 지난 5주간의 내 공부환경!
맥북 화면에는 구글링이나 라이브러리 같은 것들 바로 검색할 수 있도록 검색창을 켜놨었고
듀얼 모니터에는 강의화면 반, vscode 반 켜두고 바로바로 코딩 따라할 수 있도록 했다
최신형 맥북이 아니라 아이패드로 air display 연동이 안돼서 조금 아쉬웠는데...
당장 장비 업글할 환경은 아니라 그냥 모니터 큰 거에 만족 중!
대신 좀 더 긴시간 공부하게 된다면 책상이랑 모니터암을 바꿔보려고 한다
👩🏻💻 5주차 학습 후기
드디어 5주차 끝. 완성했던 모바일 청첩장 배포까지 해보았다. 중간에 파일질라에서 ppk 파일이 오픈되지 않아서 애를 좀 먹었고, 해결방법 찾는 동안 그 이전 과정들을 까먹어버려서 진도가 좀 더뎠다. 그런 김에 눈으로라도 따라가보자 하고 5주차 강의를 마저 다 보았고 다시 1주차로 돌아가 중간에 놓쳤던 당당마켓을 다시 훑었다... 이 과정에서 느꼈던 점은 아직은 2개 이상의 서로 다른 프로젝트를 같이 하는 것보다 한 프로젝트에 집중도를 높이는 것이 나한테 더 잘 맞는 공부법이구나 느끼는 계기도 되었음. 이번 1:8 코딩 입문 강의는 일단 너무 재미있었고 내 눈 앞에 보여지는 하나의 작품을 완성했다는 점에는 만족했지만 정말 왕초보들이 따라올 수 있게 떠먹여주는(?) 강의이기 때문에 차근차근 기초기반을 단단히 다지기에는 빠진 내용이 많아서 정말 '흥미'만을 가지고 죽이됐든 밥이됐든 겉보기에 뭐라도 완성해보고싶다 하는 사람한테는 너무x100 잘 맞는 강의라서 추천해주고 싶었다. 대신 나는 0단계부터 기초를 차근차근 쌓아서 내 힘으로 100% 이해하고 만들어볼거야 하는 사람한테는 비추! 나는 개발자로 이직을 앞두고 나를 시험해보려고 한 강의이기도 하기 때문에 생략된 내용이 궁금하기도 했고 늘 왜? 라는 질문을 하는 사람이기에 강사님께서 그냥 지금은 넘어가시면 된다- 하는 것들이 넘어가지지 않아 힘든 점도 있었다. 그리고 macOS 유저로서 강의가 windows 기반으로 진행돼서 오류 해결적인 부분에서는 솔직히 크게 아쉬운 점도 있다... 그래도 혼자 힘으로 (오류 해결이라던지...) 간단한 프로젝트라도 완성해보았다는 의미에서 좋은 강의였고 FE, BE 분야를 간략히라도 모두 다루어보고 내가 그중에 어떤 기술들을 더 흥미로워하고 잘 하는지, 잘 하고싶어 하는지를 체크해볼 수 있어서 전체적으로는 만족스러웠던 강의라고 할 수 있다. 내일배움카드가 있고 간단한 코딩으로 웹 개발 세계에 살짝 발 담궈보고 싶으신 분들께 강력추천!
'K-Digital Training > 패스트캠퍼스 1:8 코딩 입문' 카테고리의 다른 글
[패스트 캠퍼스] 코딩 왕초보 웹 개발 강의 : 4주차 학습일지 (0) | 2023.02.23 |
---|---|
[패스트 캠퍼스] 코딩 왕초보 웹 개발 강의 : 3주차 학습일지 (0) | 2023.02.21 |
[패스트 캠퍼스] 코딩 왕초보 웹 개발 강의 : 2주차 학습일지 (0) | 2023.02.13 |
[패스트 캠퍼스] 코딩 왕초보 웹 개발 강의 : 1주차 학습일지 (0) | 2023.02.08 |