개인 홈페이지 게시하기

소개

짧은 프로필을 수정하고 SCP로 EC2에 전송하여 실제 웹페이지의 변경을 확인합니다.

앞선 포트폴리오 실습을 먼저 완료하세요. 새 환경에는 앞 단계의 기능과 별도 리소스가 준비되어 있습니다. 이전 서버, 파일이나 자격 증명을 보관할 필요가 없습니다.

자격 시험과 연결

실습 개요

로컬 프로필 준비하기

이 단계에서는 게시된 페이지를 아직 바꾸지 않고 새 로컬 프로필을 준비합니다.

이번 실습은 이미 실행 중인 새 서버를 제공합니다. Terminal과 AWS View가 준비되면 현재 실습의 AWS View에서 포트폴리오를 열고 Alex Morgan을 확인하세요. 이전 실습의 서버를 찾거나 다시 실행할 필요는 없습니다.

로컬 파일은 LabEx 작업 환경에 있고, 원격 파일은 웹사이트의 EC2 서버에 있습니다. 로컬 파일을 수정해도 원격 파일은 자동으로 바뀌지 않습니다.

프로젝트 폴더로 이동합니다.

cd /home/labex/project

프로필은 JSON 파일입니다. 이름이 있는 항목으로 설정을 저장하는 텍스트 형식입니다. cat은 내용을 보여 줍니다. 수정하기 전에 profile.json을 확인하세요.

cat profile.json

name은 내비게이션과 푸터, headline은 큰 제목, about은 짧은 설명입니다. 원래 프로필은 JSON 문자열 안의 \n으로 줄을 바꿉니다. 연습 제목은 한 줄입니다. 문자열은 큰따옴표로 감싸고 항목은 쉼표로 구분합니다.

cat >는 파일에 씁니다. here-document의 JSON 시작과 끝 표식을 모두 복사하여 세 항목을 작성합니다.

cat > profile.json <<'JSON'
{
  "name": "Sam Rivera",
  "headline": "Design with purpose.",
  "about": "Brand identities and digital experiences."
}
JSON

파일을 읽고 값을 확인합니다.

cat profile.json

페이지를 새로고침해도 아직 Alex Morgan입니다. 검사에는 지정된 연습 값을 사용하고 완료 후 개인 문구를 시도할 수 있습니다.

프로필 게시하고 확인하기

이 단계에서는 준비한 프로필을 게시하고 실제 웹사이트에서 변화를 확인합니다.

SSH는 서버에 암호화된 연결을 제공하고, SCP는 그 연결을 통해 파일을 복사합니다. 제공된 ssh_config가 이번 실습의 키와 연결 경로를 이미 선택합니다.

website.env에는 서버 주소와 식별자가 들어 있습니다. source는 현재 Terminal 세션에 변수를 읽어 들입니다. 먼저 주소를 표시하세요.

source website.env
echo "$PUBLIC_IP"

AWS View의 주소와 비교하세요. $PUBLIC_IP는 저장된 값을 사용하고, 따옴표는 그 값을 하나의 인수로 묶습니다.

로컬 profile.json을 웹사이트로 복사하세요. -F ssh_config는 연결 설정을 선택하고, ubuntu는 EC2 사용자입니다. 콜론은 서버 주소와 대상 파일 경로를 구분합니다.

scp -F ssh_config profile.json ubuntu@"$PUBLIC_IP":/home/ubuntu/portfolio/profile.json

첫 연결에서는 제공된 서버의 호스트 키가 추가되었다는 안내가 나올 수 있습니다. 전송이 100%에 도달하면 복사가 끝난 것입니다. 이어서 실제 페이지에 반영되었는지 확인하세요.

현재 실습의 AWS View에서 연 웹사이트를 새로고침하세요. Sam Rivera, Design with purpose., **Brand identities and digital experiences.**가 표시되어야 합니다. 애플리케이션은 요청마다 프로필을 읽으므로 재시작할 필요가 없습니다.

마지막으로 서버의 파일도 확인하세요. SSH 주소 뒤에 붙인 명령은 원격 서버에서 실행되고, 끝나면 Terminal로 돌아옵니다.

ssh -F ssh_config ubuntu@"$PUBLIC_IP" cat /home/ubuntu/portfolio/profile.json

원격 JSON은 로컬 파일과 같아야 합니다. 파일 복사와 그 파일이 만드는 페이지를 모두 확인했습니다. 여전히 Alex Morgan이라면 전송 완료 여부, AWS View의 주소, 대상 경로를 확인한 뒤 현재 실습의 페이지를 새로고침하세요.

게시가 완료되었습니다. 웹사이트를 열어 두고 결과를 살펴봐도 좋습니다. 다음 실습은 별도의 서버를 제공하며 방문자 접속을 허용하는 네트워크 규칙을 다룹니다.

요약

로컬 JSON 프로필을 수정하고 SCP로 EC2에 게시한 뒤 SSH로 원격 파일을 확인했습니다. 실제 페이지의 새 이름과 제목을 통해 변경이 로컬에만 머무르지 않고 애플리케이션까지 전달되었음을 확인했습니다.

공식 문서: Connect to a Linux instance with SSH, transfer files to an instance.