Cloud Web Server 구축 방법

[Domain Name 확보]

(회원 가입)

- http://www.freenom.com에서 회원 가입

• • 회원 가입은 Google이나 Facebook 계정으로만 가능함

  • 회원 가입(sign up) 기능은 따로 없고 원하는 domain name에 .cf, ga, .gq, .ml, 혹은 .tk를 붙여서 검색한다. 예를 들어, "acelabkr.tk"로 검색한다.

  • 그 다음에 Checkout을 눌러서 계속 등록 절차를 진행한다.

  • 회원 가입인 경우는 마지막에 email을 입력하게 된다. 기존에 freenom에 등록된 email은 사용할 수 없어서, 새로운 email을 찾아서 가입해야 한다.

  • 가입에 사용한 email로 "Freenom Email Verification"이 발송되므로, email에 있는 link를 눌러서 인증한다.

  • 회원 가입이 완료되면, Sign in을 눌러서 freenom에 log in 할 수 있다.

(주의 사항)

- freenom에서 잘못된 접속 혹은 사용자라 판단하면 domain name을 부여하지 않는다. 이 경우는 새로운 email을 이용해서 회원 가입 절차를 다시 진행해야 한다.

(Domain Name 선택)

- freenom에서 선호하는 domain name을 검색해서 사용 가능하다면 하나 확보

• • Services > Register a New Domain 선택하여 입력

- 아래와 같이 12 Months @ FREE를 선택하고 Continue를 눌러 다음 과정을 계속 진행함

• • 위 예제는 "acelabkr.cf"를 선택했음

  • 다음 화면에서 "Complete Order"을 누르면 domain name이 1년 동안 확보됨(다만 미사용인 경우 freenom에서 강제로 삭제할 수 있음)

[Repository 생성]

- Git에 대한 기본 개념을 이해해서, 이미 가입한 Github에 login

- 새로운 repository를 생성함

• • + > New repository 선택

  • 아래에 같이 필요 항목 입력하고 "Create repository" 누름

- PC에 Git 사용자 정보 등록

• • VS Code를 실행해 cmd 터미널을 열어 다음 Git 명령 입력

• git config --global user.name <your name>

• git config --global user.email <your email>

[Nuxt.js Project 생성]

- VS Code를 실행해 cmd 터미널을 열고 Nuxt.js 구조를 생성할 path로 이동

• 보통 Windows 사용자 path가 기본으로 설정됨

- VS Code 터미널에 아래 명령 입력해 vue-cli 설치

• npm install -g vue-cli

- VS Code 터미널에 아래 명령 입력해 "mycloud1"란 이름으로 Nuxt.js project 생성

• vue init nuxt-community/starter-template mycloud1

[Nuxt.js Project와 GitHub 연결]

- VS Code에서 새로 생성된 mycloud1 folder로 이동함

• cd mycloud1

- GitHub이 자동으로 생성한 아래 command line 명령을 VS Code에서 실행함

echo "# MyCloud1" >> README.md

git init

git add README.md

git commit -m "first commit"

git remote add origin https://github.com/yongheuicho/MyCloud1.git

git push -u origin master

- 정상적으로 GitHub repository에 등록되었다면 아래 화면을 GitHub에서 볼 수 있음

- 현재 folder에 있는 모든 항목을 Git에 추가하고 update된 항목을 GitHub에 push함

git add --all

git commit -m "second commit"

git push -u origin master

- 위 code를 실행하면 GitHub 구조가 다음처럼 바뀜

[Deployment 설정]

- https://www.netlify.com에서 GitHub으로 "Sign Up"(최초 등록) 혹은 "Log In"(단순 login할 때) 누름

- New site from Git을 눌러 자신의 website를 등록

- "Authorize application" window가 뜨면 "Authorize netlify"를 눌러 승인

- 아래 화면에서 우리가 만든 MyCloud1을 선택함

- 아래 화면과 같이 입력하고 "Deploy site"를 누름

• • Build command: npm run generate (GitHub에서 자동 생성한 명령임)

  • Publish directory: dist

- 어느 정도 기다리면 serverless website deployment가 다음처럼 완료됨

- PC -> GitHub -> netlify로 연결된 구조가 자동화되어 향후 PC 내용이 바뀌면 website가 자동으로 바뀜

- "Set up a custom domain"을 선택하고 "Add custom domain"을 눌러, freenom에서 확보한 domain name으로 custom domain을 설정함

- 아래 화면에서 "Set up Netlify DNS"을 선택해 절차에 따라 입력함

- 최종적으로 domain name 연결에 필요한 nameserver 정보를 얻음

[Domain Name과 Nameserver 연결]

- freenom에 가서 nameserver 등록 화면으로 들어감

• • Services > My Domains > Manage Domain

- netlify에서 제공한 nameserver를 freenom에 등록함

- 위에서 제시한 모든 과정을 성공적으로 실행하면 나만의 serverless website가 구축됨

• http://www.acelabkr.cf/

[HTTPS 인증서 생성 및 등록]

- netlify에서 Settings > Domain management > HTTPS로 들어감

- SL/TLS certificate에서 "Verify DNS configuration"을 눌러 현재 DNS를 검증함

- 검증을 통과하면 나오는 "Let's Encrypt certificate"을 눌러 HTTPS 인증서 생성 및 등록

- 이 과정이 잘 수행되면 HTTPS로 serverless website 접근이 가능해짐

• https://www.acelabkr.cf/

[참고 문헌]

- Nuxt.js 공짜로 도메인과 웹사이트 구축하기

- Deploying a Vue.js app to Netlify using GitLab’s CI/CD pipeline

- [Series 1-8] How to start creating an impressive website for the first time