Angular5 빌드 및 now 서버 배포 하기

안녕하세요. 

완성된 앱을 바탕으로 localhost 가 아닌 

now 서버 호스팅을 통해 

서버 업로드 하는 방법을 공유합니다. 

HTML과 자바스크립트 호스팅 방법은 Heroku, Cafe24, AWS S3, FTP 와 같이

다양한 매체를 통해 자체 서버 업로드가 가능하나 

now 를 적용하면 10분이면 적용 가능합니다. 

(저는 이메일 필터 걸려서 3시간 헤멨지만 )

준비물 : 각자의 완성된 소스코드 

※ 아래 깃 자료는 기초적인 컴포넌트로만 구성된 자료입니다. 

Github : https://github.com/Munchurwoo/Angular_reddict

---

위 깃허브 자료를 clone 한 후 

해당 폴더 안에서 ng serve 실행하면 

다음과 같은 화면으로 구성되어 있습니다. 

루프백(Localhost)를 통한 앱 구성은 완료 했으니 

이제 누구든 접속해서 나의 앱을 볼 수 있는 

서버 구축을 진행하겠습니다. 

---

1. 커맨드창을 활용하여 해당 폴더로 이동한다. 

---

2. 앱 빌드하기

ng build --target=production --base-href /

 

ng 도구는 build 명령어를 통해 production 환경에 맞도록 빌드를 진행한다. 

--base-href 는 앱이 사용할 루트 URL 이다. 

---

3. 빌드가 위와 같이 성공적으로 마무리 되면 dist 라는 폴더가 생성된다. 

---

4. dist폴더를 ls 해보시면 TypeScript 가 JavaScript 로 

변환된 파일들이 존재 합니다. 

dist 폴더를 now 서버에 올리면 배포 완료 됩니다. 

---

5. npm install -g now 를 통해 now를 커맨드창에 설치합니다. 

( -g 는 글로벌의 약자로 전역을 의미 ) 

---

6. https://zeit.co/now 나우 홈페이지에서 회원가입을 진행합니다. 

네이버, 다음 이메일 계정보단 

구글 gmail 로 하시는걸 추천합니다. 

---

7. join free 를 클릭하시고 이메일 계정을 입력하면 

입력한 이메일로 인증서 확인 메일이 날아옵니다. 

---

8. ※ 특이 케이스로 스펨 메일로 분류되어 날아올 수 있으므로 스펨 메일함 확인 바랍니다.

( 이것때문에 몇시간 삽질.. )

해당 가입 메일을 클릭하면 다음과 같은 화면이 나옵니다. 

해당 VERIFY  를 클릭하면 회원가입 완료 됩니다. 

---

9. 다시 cmd 창으로 돌아와서 해당 앱 폴더 안에서 now login 을 진행합니다. 

---

10. 입력한 해당 메일 계정으로 로그인 확인 절차가 진행됩니다. 

회원가입과 똑같이 

VERIFY  누르시면 

다음과 같이 회원가입, 로그인 절차가 마무리 됩니다. 

---

11. 이제 마지막으로 cd dist , now 를 진행하시면 서버 배포가 완료됩니다 !! 

1. .js 디렉토리로 접근 후, 

2. now 를 통한 서버가동 

3. 웹스톰 , visual studio code 사용자는 Ctrl + 마우스 왼쪽 클릭하면 가동된 서버가 실행됩니다.

여기까지 따라 오느라 고생하셨습니다! 

free 버전으로 가볍고 트레픽 얼마 없는 개인플젝용으로 좋을꺼 같습니다.

자세한 사항은 https://zeit.co/account/plan 참고 바라며 이미지 첨부를 마지막으로 인사드리겠습니다.