목록cloud_computing (28)

코딩 기록 저장소

[클라우드컴퓨팅] 4-5. 계산기 프론트엔드 배포(Docker EC2)

1. 프론트엔드 Dockerfile 작성Visual Studio Code 실행프로그램 실행 후 frontend 폴더를 선택한 후 'Dockerfile' 파일을 추가함다음과 같이 Dockerfile 내용을 작성함 2. 프론트엔드 프로젝트 EC2 업로드프론트엔드 프로젝트 EC2 업로드- 계산기 프론트엔드 프로젝트는 백엔드 IP 주소를 포함하므로 외부에 노출될경우, 백엔드로 DDoS 공격 등보안 위협에 취약해짐- 민감한 정보를 포함한 프로젝트는 Docker Hub나 Git과 같은 공개 저장소에 등록하지 않도록 주의해야 함- 계산기 프론트엔드는 Docker Hub에 등록하지 않고, EC2에 직접 업로드하여 Docker 이미지를 생성함프로젝트 업로드 프로그램 설치- https://filezilla-project...
학교 공부/클라우드컴퓨팅 2025. 2. 16. 15:45
[클라우드컴퓨팅] 4-4. 계산기 프론트엔드 배포 (EC2 생성 설정)

1. EC2 생성 실습EC2 생성 실습- AWS 사이트 로그인 후, 지역은 서울로 설정하고 서비스-컴퓨팅-EC2를 누름- 인스턴스 시작을 클릭함EC2의 이름과 Ubuntu 리눅스를 선택함키 페어 생성- 클라우드 배포 시, 프론트엔드 파일을 EC2에 업로드해야 함- EC2 파일 업로드를 위해 새로운 키 페어가 필요함- 새 키 페어 생성을 클릭키페어 이름 및 ppk형식 선택- 키페어 파일을 c:\cloud_project01에 안전하게 저장- 키페어 파일은 재발급되지 않으므로 분실 시 EC2 접근이 불가능함- 보안을 위해 키페어 파일을 안전하게 관리하고 외부 유출을 방지해야 함- EC2에 생성한 키페어가 설정되었는지 확인함2. EC2 보안설정EC2 보안 설정- EC2의 3000 포트를 사용 가능하도록 설정함프..
학교 공부/클라우드컴퓨팅 2025. 1. 15. 21:48
[클라우드컴퓨팅] 4-3. 계산기 백엔드 배포 (EC2 생성 설정 배포)

1. AWS EC2- AWS EC2 (Amazon Elastic Compute Cloud)는 아마존 웹 서비스의 클라우드 컴퓨팅 서비스- 실제 서버 관리 없이 필요한 컴퓨팅 자원을 사용하여 비용 효율성을 높이고 유연한 IT 인프라를 구축EC2의 기본 개요- EC2는 AWS에서 제공하는 클라우드 컴퓨팅 서비스- 사용자는 가상 컴퓨터를 생성하고 관리하여 실제 서버와 유사한 기능을 활용할 수 있음- EC2를 이용하면 필요에 따라 CPU, 메모리, 스토리지, 네트워크 등의 컴퓨팅 리소스를 조합하여 원하는 환경을 구축- 실제 서버 관리 비용과 시간을 절감할 수 있음- 비즈니스 요구사항에 따라 컴퓨팅 자원을 쉽게 확장하거나 축소하여 유연하게 대응할 수 있음2. EC2 보안설정- 계산기를 배포하기 위해 AWS 사이트..
학교 공부/클라우드컴퓨팅 2025. 1. 15. 20:54
[클라우드컴퓨팅] 4-2. 계산기 백엔드 배포(Docker)

1. DockerfileDockerfile설계 스케치- Dockerfile은 컨테이너를 어떻게 구축할지 설명하는 간략한 설계 스케치필요한 것들- 필요한 장비, 재료를 간략히 명시함설계도 생성- 이 스케치를 바탕으로 실제 컨테이너를 구현하는 완성된 설계도(Docker Image)를 생성Docker ImageDocker Image- Docker Image는 Dockerfile 스케치를 바탕으로 만들어진 상세하고 완성된 컨테이너 설계도상세한 설계- 컨테이너의 모든 세부 사항을 포함하며 실제 동작 가능한 컨테이너를 설계함컨테이너 생성- 실제 컨테이너(Docker Cointainer) 생성에 사용됨Docker Container실제 컨테이너- Docker Container는 Docker Image 설계도에 따라 구..
학교 공부/클라우드컴퓨팅 2025. 1. 13. 23:12
[클라우드컴퓨팅] 4-1. 계산기 프론트엔드 구현 (JavaScript)

1. 프로젝트 열기Visual Studio code 실행File-Open Folder 선택c:\cloud_project01\calculator_frontend 프로젝트 열기App.js 파일 열기2. 초기값 설정 및 입력값 업데이트입력 상자 초기값 설정아래의 코드를 추가함 setInnum1, setInnum2- 숫자를 바꾸는 도구- React에서는 데이터를 직접 바꾸지 않고, setInnum1이나 setInnum2라는 도구를 사용해서만 데이터 변경 가능useState(0)- 상태를 만드는 React의 함수- 0은 초기값, innum1의 첫 번째 값- React는 이 초기값을 기억하고, 이후에 숫자가 변경되면 화면을 자동으로 업데이트함HTML상에서 변수 값을 텍스트 박스에 출력하도록 코드를 추가함npm st..
학교 공부/클라우드컴퓨팅 2025. 1. 11. 00:10
[클라우드컴퓨팅] 3-7. 계산기 프론트엔드 (HTML CSS)

1. 프론트엔드 구성요소HTML 소개- 웹 페이지의 구조와 내용을 정의하는 마크업 언어- 태그를 사용해 텍스트, 이미지, 링크 등을 구조화하며, 웹 브라우저는 이 코드를 해석하여 사용자에게 시각적으로 표시- , , 태그를 기본 구조로 사용- 에는 페이지 설정을, 에는 실제 표시될 내용을 포함구조 정의- 태그를 통해 제목, 단락, 목록 등 웹 페이지의 기본 구조를 정의콘텐츠 삽입- 텍스트, 이미지, 비디오 등 다양한 콘텐츠를 페이지에 추가함하이퍼링크- 다른 웹 페이지나 리소스와 연결하는 링크를 생성폼 생성- 사용자 입력을 위한 다양한 형태의 폼을 구현CSS 소개- 웹 사이트의 스타일과 레이아웃을 정의하는 언어- HTML이 웹사이트의 구조와 내용을 담당한다면, CSS는 이를 시각적으로 꾸며주는 역할- CS..
학교 공부/클라우드컴퓨팅 2025. 1. 4. 00:13
이전 Prev 1 2 3 4 5 Next 다음