화면 개발하고 웹 서버에 배포

화면 개발하고 웹 서버에 배포

1. 템플릿 선택

HTML 5UP사이트는 html5기본 소스를 무료로 제공해준다. 마음에 드는 것 하나를 다운로드 받는다.

(Hyperspace 라는 것을 골랐다!! 리드미 파일을 읽어보면 상업적, 개인적으로 사용가능한지 알 수 있음.)

라이브데모 : https://html5up.net/hyperspace

 

2. 웹 서버 실행

웹 서버에 접속해 실행해준다. => AWS - 웹 서버 만들기(3. 웹 서버에 접속)

EC2에 접속한 터미널에 다음 명령어를 입력한다.

cd /var/www

다시 cd 명령어로 html폴더 안에 들어가서 ll로 조회해보면 아무 파일이 없는 것을 확인할 수 있다.

이 html폴더에 소스를 넣는 것이 배포이다.(배포 = 서버에 파일을 넣는 것)

 

3-1. 배포(파일로 배포하는 방식)

배포에는 여러가지 방식과 툴이 존재한다.

무료로 사용할 수 있는 파일전송 프로그램인 파일질라를 이용해 파일배포를 해볼 것이다.

이 방식은 사내에서 쓰이는 작은 사이트나, 잠깐 다운😅되어도 괜찮은 사이트에 자주 사용된다.

 

1) 파일질라 설치

파일질라를 설치해준다.

 

2) 파일질라에 keypair등록

파일질라 프로그램을 실행한 후 상단 메뉴 탭에서 [편집 > 설정 > SFTP > 키파일 추가]로 키파일을 추가해준다. 

※ ppk파일로 공인 키 인증 실패했을 때 참고한 사이트 [https://liufeier.tistory.com/126] 

 

3) 파일질라로 서버에 접속

22번 포트로 접속이 안되면, AWS 보안그룹에 21번 포트를 열고 파일질라에서 21번 포트로 접속해준다.

 

4) 서버측에 파일 넣기

• assests폴더, images폴더, index.html파일을 드래그앤드롭으로 서버측에 넣어준다.
• 처음부터 /var/www/html 폴더에 넣어도 되지만, 바로 폴더에 배포하는 방식은 전송하다가 파일이 깨질 수 있기 때문에 위험하다. 그래서 일단 연결된 폴더 아무데나 넣어두는 것이다.

 

3-2. 배포(SFTP 명령어 이용하는 방식)

• 실무에서는 SFTP를 하기 위해 파일질라를 잘 사용하지 않는다. 파일질라는 프로그램이기 때문에 자동으로 돌릴 수 없기 때문이다.
• 맥의 경우 터미널, 윈도우의 경우 cmd를 실행시키고 아래의 명령어를 입력해준다.

cd .aws
sftp -i "키페어이름.pem" ec2-user@ec2-15-165-237-149.ap-northeast-2.compute.amazonaws.com

// 15-165-237-149 대신 EC2 IPv4 퍼블릭 주소를 입력해준다.

• cd : 키페어 있는 파일로 이동한다.
• sftp : EC2 접속명령어. ssh 대신에 sftp를 입력하여 EC2에 접속한다.
• pwd : EC2에 접속한 후 위치를 확인하는 명령어이다.
• lpwd : EC2 접속 전 로컬에 있는 위치를 확인하는 명령어이다. lpwd위치에서 pwd위치로 파일을 옮기는 상황이다.
• put (파일이름)을 쓰면 파일이 전송된다.
• put -r (폴더명)을 쓰면 폴더를 옮긴다.

 

4. Apache가 읽고 있는 폴더로 파일,폴더 이동

파일질라 또는 SFTP로 /home폴더에 파일을 옮겼다면, 임시로 옮겨진 파일과 폴더를 Apache가 읽고 있는 폴더로 옮겨야한다.

• /var/www/html폴더에 권한이 없으므로 sudo를 앞에 붙여 관리자권한으로 실행한다. 
• mv (옮길파일) (위치)로 파일을 옮겨준다.

 

5. 페이지 확인

아래로 url로 접속하면 이제 Apache 테스트 페이지가 아닌 우리가 만든 페이지가 나오게 하는 데에 성공했다!😆

http://EC2퍼블릭IP:80