2주차 과제
Local 서버 구축 / Window/MacOS + Apache PHP MySQL (Bitnami) 👌
AWS 서버 구축 / Linux + Nginx PHP MySQL 👌
Sub Domain에 각각 나만의 페이지 만들기 👌

나만의 페이지 만들기 (기본 index)

• 원래는 서브도메인에 나만의 페이지를 제작하는 거였으나.. 접속하자마자 index로 이쁘게 나타나는 걸 구현하고 싶어서 조금 수정해서 제작했다. 기존의 nginx index 창을 서브도메인으로 구현하고 나만의 페이지를 기본 index로 바로 나오게 만들어보자!

우선 그에 앞서.. 나만의 홈페이지를 제작해야한다. 개인적으로 html, css, js까지 모두 공부하고 제작하기에는 시간이 촉박하다고 생각하여 템플릿을 다운로드 받기로 했다.

여러군데 찾아본 결과 html5up 홈페이지에 있는 템플릿이 데스크탑, 태블릿, 모바일까지 모두 구현되어 있어 퀄리티가 높다고 생각해 응용해보기로 했다. 마음에 드는 템플릿을 다운로드하였다.

보통 html, css, js의 경우 IDE로는 VSCode를 많이 사용하는 것 같다. 해당 툴을 이용해 본인의 입맛에 맞게 잘 수정해보자. 추가 구현하면 정말 좋겠지만 일단 서버 수업에 치중하기로 하고 간단히 주어진 코드를 아주 미약하게 수정해서 만들어보았다.

수정 이후 index의 경로를 복사하여 브라우저 주소창에 붙여넣으면 해당 결과물을 확인할 수 있다. 해당 브라우저 내에서 개발자 도구를 통해 즉각적으로 변경도 가능하므로 참고하면 되겠다.

본인은 이전에 원주에 있을 때 뮤지엄 산을 인상 깊게 봤던 경험이 있다.. 그래서 이 건축물의 건축가인 안도 다다오(타다오)의 소개 홈페이지를 간단히 제작해보기로 했다.

어느 정도 완료가 되었으면 EC2 인스턴스를 다시 재가동시키고 Winscp를 통해 해당 파일을 집어넣어주자.

권한이 없어 거절당했다. 해당 폴더에 쓰기 권한을 허용시키자.

sudo chmod 777 /해당 디렉토리 주소

해당 폴더에 모든 권한을 주었다. 다시 붙여넣기를 시도해보자.

해당 폴더에 무사히 안착한 모습을 볼 수 있다. 이제 저번에 서브도메인을 건드렸을 때처럼 putty를 통해 수정해주자.

저번 시간과 동일하게 default 파일을 수정해서 새로 붙여넣은 파일을 index 홈페이지로 만들어줄 것이다.
/etc/nginx/sites-available/default 설정 파일을 건드려보자.

sudo vi /etc/nginx/sites-available/default 

기존에 있던 루트 위치를 수정한 뒤(본인은 /html/htmlikinfo 추가)
본인이 넣은 html을 최우선적으로 index로 하게끔 불러오자.
본인은 이름을 index.html 그대로 사용했다.

참고로 AWS에 넣은 디렉토리는 다음과 같다.

이제 다시 nginx를 시작해주자!

정상적으로 나오는 모습을 확인할 수 있다!

이제 연습 겸 기존 nginx index 홈페이지를 서브도메인으로 구현해보자.

이전과 동일하게 /etc/nginx/sites-available/default 설정 파일을 건드려보자.

sudo vi /etc/nginx/sites-available/default 
***
  
server {
    root /var/www/html;
    index index.nginx-debian.html;
    server_name init.ikinfo.shop www.init.ikinfo.shop;
	// index.nginx-debian.html을 index로 불러오는 init 서브 도메인 제작
  
    location ~ \.php$ {
        include snippets/fastcgi-php.conf;
        fastcgi_pass unix:/run/php/php8.1-fpm.sock;
}

    location / {
        try_files $uri $uri/ =404;
    }
}

이전과 동일하게 가비아에서 CNAME 타입으로 서브 도메인을 추가해주자.
값/위치에 도메인 주소 뒤에 .은 꼭 잊지 말자.

이후 certbot을 통해 CA 인증서를 수취하여 https까지 적용시켜준 뒤
다시 nginx를 재시작해주자.

서브도메인 홈페이지에서 해당 홈페이지가 정상적으로 나오는 것을 확인할 수 있다.

기타 위 사항들을 응용하면 서브 도메인에 나만의 홈페이지를 여럿 만들 수 있을 것이다. www.ikinfo.shop

참조사항:

안도 다다오 작품물..등이 있던 홈페이지:
http://www.tadao-ando.com/