개발/프런트엔드
-
[vuejs] AWS S3에 vue 배포개발/프런트엔드 2020. 4. 7. 10:24
프런트엔드 vuejs는 빌드 후 AWS S3에 배포 할 수 있습니다. vuejs 빌드는 npm run build 명령어로 할 수 있고, 프로젝트 폴더에 dist 폴더가 생깁니다. 1. AWS S3 버킷 생성 AWS에서 S3로 이동 후 버킷을 만듭니다. (퍼블릭 엑세스 차단은 모두 해제 합니다. 외부에서 접근 하려면 차단을 풀어야 합니다.) 2. AWS S3 권한설정 (버킷 정책) 권한에서 버킷 정책으로 이동한 다음 아래 코드를 작성해 줍니다. (이 때 test0407은 본인의 버킷이름으로 변경해야 합니다.) AWS Route 53을 사용해서 자신이 보유하고 있는 도메인을 사용할 경우 버킷이름을 도메인 주소로 설정해 줘야 합니다. { "Version": "2012-10-17", "Id": "Policy15..
-
[vuejs] vue cli 3.0 명령어 (프로젝트 생성, 배포, vuetify)개발/프런트엔드 2020. 4. 7. 09:40
1. 프로젝트 생성 vue.cmd create test //test 프로젝트 생성 2. vuetify 적용 cd test //test 프로젝트 폴더로 이동 vue.cmd add vuetify //test 프로젝트에 vuetify (UI 프레임워크) 적용 https://vuetifyjs.com/ vuetify는 vuejs의 UI를 material design으로 쉽게 적용 할 수 있다. material design은 google에 표준화 시킨 디자인 규칙으로 대표적으로 유튜브 UI를 생각하면 된다. 3. 프로젝트 빌드 및 배포 npm run serve //로컬 서버 실행 (http://localhost:8080/) npm run build //운영 서버 배포 파일 만들기 - test/dist 폴더에 배포 ..
-
[vuejs] 구글 애널리틱스 적용개발/프런트엔드 2020. 4. 1. 16:18
vuejs로 배포한 서비스를 구글 애널리틱스 적용하는 방법입니다. 1) 구글애널리틱스 가입 후 추적하고자 하는 사이트 도메인을 입력 후 추척코드를 받는다. https://analytics.google.com 2) vuejs 프로젝트에 npm으로 설치 npm install vue-analytics https://www.npmjs.com/package/vue-analytics 3) vuejs 에서 src/main.js에 아래 코드를 작성 id 에는 1)에서 부여받은 추적코드를 작성해 줍니다. import VueAnalytics from 'vue-analytics' // 구글 애널리틱스 Vue.use(VueAnalytics, { id: , router }) 4) 구글애널리틱스 결과 확인 (간단한 설정을 통해서..