요즘은 예쁘고 꼼꼼하게 설계된 html 페이지를 GPT 통해서 매우 쉽게 얻을 수 있습니다.
정확히는 AI 통해서 어디서나 얻을 수가 있죠.
그렇다면 이렇게 잘~ 만든 나의 html 페이지를 실제 웹페이지로 게시를 해보고도 싶을 겁니다.
오늘은 AI 통해 제작한 html 파일을 실제 웹페이지로 서비스를 하는 것을 목적으로 진행하겠습니다.
단순하게 AI 에게 부탁하는 것만으로도 위와 같은 html 파일을 얻을 수 있습니다.
제가 게시를 해볼 html 파일을 위 버튼을 통해 다운로드 할 수 있습니다.
뭐 어떤 html 파일이든 상관은 없습니다.
사용하고 싶은 html이 있다면 그걸 쓰셔도 상관이 없습니다.
AI 통해 제작한 HTML 파일을 어떠한 주소로 게시를 하고 싶은지는 중요합니다.
이를 위해서 도메인을 구매한 사이트가 있을 겁니다.
이런 주소를 구매하는 사이트는 다양하니까… 어떤 곳에서 구매를 하든 특별히 상관은 없습니다.
저는 후이즈라는 도메인 업체에서 사용할 주소를 구매했습니다.
위와 같은 화면 기준에서 “네임서버 고급설정” 버튼을 통해서 해당 도메인 설정을 체크 가능합니다.
꼭 후이즈가 아니더라도 이런 기능들은 도메인 제공 업체에서 다 있습니다.
이동한 화면입니다.
여기에서 “A 레코드 관리” 부분에서 관리화면 열기를 클릭해주세요.
위와 같이 입력 가능한 섹션이 열린다?
성공입니다!
그렇다면 이 페이지를 그대로 기억해주세요!
이제 AWS EC2 생성을 하고 그 정보를 이쪽으로 가져올 겁니다.
바로 AWS 쪽으로 가보겠습니다.
AWS 계정을 생성 이후에 EC2 인스턴스를 다음의 섹션에서 시작 가능합니다.
인스턴스 시작 버튼을 눌러주세요.
위와 같이 설정을 해서 진행합니다.
이름은 원하는 EC2 이름으로 생성하고,
AMI를 Amazon Linux 2023
인스턴스는 t3.micro
설정을 했습니다. 기본적인 프리티어 세팅입니다.
네트워크 설정은 및 스토리지 구성은 위와 같이 체크를 합시다.
키페어는 우선 없이 진행해도 됩니다.
네트워크 설정 부분에서 빨간 표시 해둔 부분은 체크를 꼭 해주세요!
저기 보면 규칙을 사용하여 보안그룹 “launch-wizard-4” 라고 되어 있는데, 이 부분 기억도 해줍시다.
인스턴스 관리 화면으로 넘어가집니다.
여기에서 우리가 설정한 이름의 인스턴스가 실행중으로 되면 성공입니다.
인스턴스 ID 부분을 클릭하면 해당 인스턴스 세부 정보를 볼 수 있습니다.
인스턴스 세부 정보 화면에서 필요한 정보가 있는 부분들을 빨간 화살표로 체크했습니다.
퍼블릭 IPv4 주소와, 퍼블릭 DNS 주소를 확인해주세요!
이 부분을 잘 기억해뒀다면, 다음 스텝으로 이동하겠습니다.
IP 할당을 위해서 EC2 를 Elastic IP에 연결을 할 겁니다.
이를 위해서 사이드 탭에서 다음의 “탄력적 IP” 를 찾아주세요.
클릭해서 페이지를 이동합시다.
그럼 다음과 같은 화면이 나타납니다.
여기 상단에 있는 “탄력정 IP 주소 할당” 버튼을 눌러주겠습니다.
할당을 성공하면 새로운 IPv4 주소의 주소가 생성이 될 겁니다.
새로 생성된 주소에 들어가서 세부화면은 위와 같습니다.
상단에 있는 “IP 주소 연결” 버튼을 눌러줍시다.
여기서 앞서 우리가 생성했던 EC2 인스턴스를 선택합니다.
앞서 EC2 세부정보에서 프라이빗 IP 주소도 확인이 가능했죠?
모두 방금 생성한, 우리가 html 파일을 업로드할 EC2 정보로 선택하면 됩니다.
위와 같이 성공 메시지가 나타난다면 끝입니다.
그럼 아~까 후이즈 도메인 업체 화면으로 이동하겠습니다.
아까 이 화면이었죠?
여기 A 레코드 관리에서 호스트명은 공란으로 비워두세요.
바로 옆에 있는 IP 주소에 방금 우리가 연결한 탄력적 IP 주소를 입력하면 끝입니다.
그리고 바로 아래에는 “신청” 누르고 호스트명에 “www” 입력해주세요.
마찬가지로 ip 주소에는 탄력적 ip 주소를 넣으면 됩니다.
결과적으로 호스트명이 공란이 경우, WWW 인 경우 2개가 생성이 되는 거죠.
아까 EC2 를 생성했었죠?
그 EC2 의 세부 설정 화면으로 다시 이동합시다.
상단에 보면 “연결” 버튼이 있습니다.
저걸 눌러주세요.
연결 버튼을 누르면 다음과 같이 EC2 인스턴스에 연결을 위한 기본 정보들이 뜹니다.
기본적으로 바로 연결 가능하게끔 되니까 아래에 있는 연결 버튼을 눌러주세요.
그럼 이제 위와 같은 화면으로 연결이 되는데요.
여기서 편하게 명령어들을 차레대로 입력하면 됩니다.
sudo dnf update -y
sudo dnf install nginx -y
sudo systemctl start nginx
sudo systemctl enable nginx
위 명령어들을 순서대로 입력해주세요!
차례차례 입력하면서 다운로드를 하나씩 하면 됩니다.
다 됐다면 우리가 연결을 원했던 도메인으로 접속을 해볼까요?
위와 같이 나온다면 내 도메인이 내 EC2를 잘 가리키고 있는 겁니다.
도메인이 아니라 아까 연결한 탄력적 IP로 접속해도 이런 화면이 나옵니다.
sudo dnf install certbot python3-certbot-nginx -y
sudo certbot --nginx -d <your domain>.it -d www.example.com
이어서 위와 같은 명령어를 차례로 입력합시다.
2번째 명령어의 경우는 your domain 부분에 본인이 구매한 정보를 써주세요.
만약 내가 example.com 이라는 도메인을 구매했다면.
example.com 이 저곳에 들어가면 됩니다.
sudo nano /etc/nginx/nginx.conf
server {
listen 80;
listen [::]:80;
server_name example.com; # 이 줄 추가/수정
# ... 나머지 내용
}
위에서 첫번째 명령어를 입력합시다.
그럼 편집기에 접속이 되는데요.
아래 버튼 막 누르면서 파일 아래로 가다보년 server 이라는 블락이 있습니다.
해당 블록에서 server_name 에 해당하는 부분을 위와 같이 수정하고 저장합시다.
저장은 컨트롤+O 로 하고, 편집기 나가는 거는 컨트롤+X 입니다.
sudo certbot install --cert-name example.com
sudo systemctl restart nginx
다시 밖으로 나와서 위 명령어를 순서대로 실행하면 됩니다.
example.com 은 내 도메인에 알맞게 변형해주세요.
sudo nano /usr/share/nginx/html/index.html
자 이제 또 편집기를 사용할 겁니다.
위 명령어를 쓰면 html 파일이 담긴 곳으로 이동이 되는데요.
이곳에 아까 다운로드 받았던 html 파일의 내용을 싹 붙여넣을 겁니다.
기존 내용은 삭제하고 html 파일 내용을 붙여주세요.
기존 내용 삭제하는 팁은 컨트롤+K 꾹 누르면 한줄씩 막 없어집니다.
이제 다시 주소로 접속하면 내가 업로드한 html 파일이 그대로 나타날 겁니다.
그럼 이제 해결이네요!
*코멘트 작성을 위한 이메일은 실제로 표시가 되지 않으며 수집되지 않습니다.