[AI스쿨] git clone사용하여 vue js 배포하기
[AI스쿨] git clone사용하여 vue js 배포하기 — #AI스쿨 #gitclone #npmbuild AI스쿨 msa기반 java 백엔드 코스 중에 공부한 내용을 작성하였습니다 학...
#AI스쿨 #gitclone #npmbuild
AI스쿨 msa기반 java 백엔드 코스 중에 공부한 내용을 작성하였습니다
학습법 이론
학습을 하기 이전, 명심해야할 학습법이 있다.
1.이해가지 않는다고 뒤돌아가 다시 보지 말 것
2.외우지 말라
=> 자주 봐서 외워짐을 당하라
=> 크롬을 통해 copy and paste하라
- 이해하는게 중요하다
=> 왜 생겨났는지?
=> 왜 사용하는지?
===> 응용이 가능해진다.
4.새로운 지식을 넣을땐 뇌를 비우자
vue js npm build하기
이전글에서 AWS EC2에 대한 내용을 정리했었습니다. EC2서비스 가입부터 Nginx 설치까지 해보았는데요. 이번에는 gitclone을 활용하여 github에 올라간 npm build해준 vue js 코드를 Ec2에 옮기고 html파일을 화면에 띄워보겠습니다.
npm run build
vue js 파일로 들어가 npm build를 진행합니다.
| npm run build |
|---|
그럼 이런 dist파일이 생기는데 이 파일만 git명령어를 사용하여 github에 올리면됩니다.
git clone
git명령어인 git clone을 사용하면 github에 올라간 파일을 서버에 손쉽게 다운로드 할 수 있습니다. AWS EC2 연결을 완료한뒤 해당명령어를 입력합니다.
| ubuntu@ip-172~ :~$ : git clone https://github주소 |
|---|
github주소는 내가 올린파일이 속해있는 repository주소를 의미합니다.
설치가 잘 완료되었는지 확인해봅시다.
| ls |
|---|
잘들어온것을 볼 수 있습니다.(vue파일)
Ec2 Nginx기본파일을 vue js html파일로 설정하기!
nginx로 접속하면 나타나는 기본 html파일 위치를 찾아서 기본파일을 설정해주셔야합니다. 배포한 vue js html파일로 바꾸겠습니다.
| cd etc/nginx/ |
|---|
우선 etc/nginx 파일로 이동해보시면 다양한 nginx설정 관련파일들을 열어보실 수 있습니다.
| cd sites-availablesudo vi default |
|---|
여기서 sites-available파일로 이동한뒤 default파일을 관리자 권한으로 열어줍니다.
다음 설정창을 확인해주시고 nginx 기본경로가 root /var/www/html/안에 있는 html파일로 설정되어 있을겁니다. 저는 기존에 있는 html파일을 지웠고 dist파일을 해당경로에 옮겨두었습니다. 그러니 root /var/www/html/dist가 경로가 되겠네요.
아 참고로 dist는 아까 vue js build해준 dist파일입니다. git clone으로 옮긴 후 명령어를 사용하여 해당경로로 옮겨주세요!
그럼 이제 EC2 퍼블릭주소로 접속하시면 제가 배포한 vue js의 html파일을 읽고 있는것을 볼 수 있습니다!