23시간만에 실험보고서 생성 AI 웹서비스 만들기(3) - 웹서비스 배포하기

이 글은 시리즈로 이루어져 있으므로 1편부터 읽으시는 것을 추천합니다.

1편: 웹서비스 기획하기 [바로이동하기]
2편: 웹서비스 개선하기 [바로이동하기]
3편: 웹서비스 배포하기 [읽고있는글]
4편: 웹서비스 최적화하기 [바로이동하기]

더 많은 이야기를 듣고싶다면 위드의 메이커 레터 [구독하러가기]

웹...너로 정했다. 웹 배포하기

이제 웹서비스 코딩을 끝났으니 웹서비스를 배포해 볼께요. 웹서비스를 배포하기 위해선 웹 호스팅이 필요해요. 

웹서비스를 사용할 수 있게 만들어주는 웹 서버가 있어야 하는것이지요. 

보통은 웹 호스팅 업체를 이용하여 유료로 웹 서버를 사용하는 것이 일반적이에요. 

 "돈이 없다. 그리고 웹 호스팅이 정상적으로 작동할까?" 

테스트로 하지 않고 유료 웹 호스팅 서비스를 이용하는건, 시기상조라 느껴졌어요. 그리고 수익이 없는 저의 웹서비스를 위해 매달 돈을 지불하는건 어려웠어요. 

 "테스트를 위해 무료 웹호스팅 업체를 찾다." 

무료로 제공되기 때문에 제한적인 기능만 제공되지만 테스트에 있어서는 정말 고마운 서비스였어요.

구글링을 통해 무료 웹호스팅을 하는 법을 배웠어요. 이제 웹서버에 코드를 올려고 웹사이트를 구축하면 끝!

웹 배포 성공...? 눈 앞이 깜깜해졌다.

닷홈 사이트에서 무료 도메인과 웹호스팅을 했어요. 코드를 올려 웹서비스가 정상적으로 작동하는지 볼께요. 

코드를 서버에 올리기 위해선 FTP 프로그램이 필요했어요. 

제가 만든 코드를 서버에 올릴 수 있도록 전송해주는 프로그램이었어요.

저는 많은 FTP 프로그램 중, 정보가 많고 이용하기 쉬운 파일질라 프로그램을 선택했어요. (한국어도 지원해요!)

FTP 프로그램을 통해 저의 html 코드와 파이썬 코드를 업로드 해볼께요. 

FTP 프로그램을 통해 서버에 연결하고 저기있는 html 폴더에 코드 파일을 업로드 해주면 됩니다.(드래그 앤 드롭으로 업로드)

 "어? 왜 안되지?" 

html 코드와 파이썬 코드를 서버에 업로드 했는데도 불구하고 오류가 계속 발생했어요.

알아보니, 파이썬 코드를 웹서버에서 사용하려면 별도의 작업이 필요했어요. 

파이썬 코드를 업로드 하기 위해선 파이썬 언어를 위한 환경을 만들어야 했어요. 

 "정말...열심히 했어요." 

파이썬 환경을 서버에 만들려고 노력했어요...구글링은 물론이고 gpt한테 무한 질문했어요. 

원래 서버에 폴더가 저렇게 많지 않았어요. 노력의 흔적들..

 "결론은 구조적인 문제..." 

서버에서 파이썬 환경을 지원하지 않았어요. 그래서 아무리 노력을 해도 파이썬 코드를 업로드 할 수 없었어요. 

 "여기서 그만할까?" 

기껏 열심히 만든 코드가 한 순간에 무용지물이 되었어요. 그리고 웹서버 때문에 많은 시간도 허비했어요. 그만두고 싶었어요...

오잉? 코드의 상태가...?

지금까지 해온 시간이 아까워서라도 계속해야했어요. (매몰비용의 오류...)

다른 언어로 코드를 다시 짜기엔 시간도 없고 힘들었어요. 그리고 또 아까와 같은 상황이 발생할 수도 있었구요. 


 "이번에도 해주겠지...AI" 

한 가지 묘수를 생각해봤어요.

웹에서 사용되는 기본적인 언어는 html, JS(자바스크립트), css가 쓰여요. 이 언어들은 서버 환경설정없이 사용할 수 있어요. 

gpt에게 파이썬 코드를 JS 코드로 변환해달라고 했어요. 그러자 코드가 바로 나왔어요. 정말로 다행이었어요. 

이후, 몇가지 오류를 잡고 (정말 빠르게 해결했어요!)

html 코드는 기존에 있던 코드를 이용했어요. 새로 만든 JS코드와 호환이 되도록 gpt로 검토하고 사용했어요.  css 코드는 양이 적어서 html 코드와 통합했어요. 

파이썬 코드에서 Js 코드로 변환했는데도 정상적으로 작동할 수 있었어요. 😁

이제 서버에 업로드만 남았네요!

이제 "코드를 바쳐라!"

FTP 프로그램을 통해 서버에 html 코드와 Js 코드만 업로드 하면 됩니다.

저는 Replit 사이트에서 제작했으니 압축된 폴더로 다운받아서, 압축해제 후 업로드 할께요. 

파일 이름은 꼭,

index.html
script.js 

이렇게 해주셔야 서버에서 인식할 수 있어요. 다운 받은 폴더를 압축을 풀고 폴더 안에 파일들을 전부 업로드할께요. 

FTP 프로그램을 열고 서버와 연결한 이후, 드래그 앤 드랍으로 html 폴더에 업로드 해주세요. (html 폴더가 없으면 새로 html 폴더를 만들어주세요.)

완벽하게 웹사이트가 작동되고 있어요. 다행입니다. 😅

 "오직...감탄만" 

코딩을 하나도 모르는 제가 웹사이트를 하나 만들었다는 사실이 너무 감격스럽네요..

다크모드도 정상적으로 작동되고, 복사 버튼 등 만들어논 기능들은 완벽하게 작동했습니다!!

문의하기 버튼은 임시로 카카오톡 1대1 톡방으로 연결했어요.

축하합니다. 완성본으로 진화했습니다!

완성된 웹사이트 링크: 

웹사이트만 제작해서 배포했다고 끝이 아닙니다. 웹사이트 분석 설정, 검색엔진 등록, 보안 등등 웹사이트 최적화 과정이 필요해요. 

이 과정은 4편에서 다룰께요.!

4편에서 계속....