개발/WEB (4) 썸네일형 리스트형 Vue 시작하기 (4) | Github actions + S3로 배포 자동화 📄 목차 1. Amazon IAM 생성 1. 사용자 이름, 자격증명 유형 선택 2. 권한 설정 나머지는 다음 다음 눌러서 넘겨주시면 됩니다. 사용자 추가가 완료되면 키가 포함된 csv를 다운로드 할 수 있습니다. 2. github secrets 세팅 깃헙 프로젝트를 새로 생성하여 작업한 vue 프로젝트를 업로드 합니다. Settings탭 > secrets > actions > New repository secret 아까 S3에서 생성한 key id와 secret을 각각 AWS_ACCESS_KEY_ID, AWS_SECRET_ACCESS_KEY 이름으로 등록합니다. 3. github workflows정의 프로젝트의 루트 디렉토리에 .github/workflows 폴더를 만들고 하위에 deploy.yml 파일.. Vue 시작하기 (3)| 프로젝트 빌드, S3로 배포 📄 목차 Vue 프로젝트는 Amazon S3를 활용해서 간단하게 무료로 배포할 수 있습니다. 이번 글에서는 Amazon S3 를 통한 프로젝트 배포 방법을 설명하겠습니다. 1. S3 버킷 만들기 S3에서 배포를 위한 새로운 버킷을 만들어줍니다. 여기에 vue를 빌드한 정적 파일을 업로드하여 호스팅을 할 예정입니다. 2. 버킷의 퍼블릭 접근 허용 버킷 > 권한 탭에 가서 버킷 정책을 public read 허용으로 편집해줍니다. { "Version": "2012-10-17", "Statement": [ { "Sid": "PublicRead", "Effect": "Allow", "Principal": "*", "Action": [ "s3:GetObject", "s3:GetObjectVersion" ], "Re.. Vue 시작하기 (2) | Firebase 프로젝트 생성, FireStore권한 전체허용, Vue에서 FireStore데이터 불러오기 📄 목차 1편에서 만들 Form input을 저장소와 연결해야 하는데요, 이번 글에서는 데이터를 저장할 저장소를 만들어 vue와 연결하겠습니다. 서버를 따로 만들기는 번거로우니 Firebase를 활용하겠습니다. 1. Firebase 프로젝트 생성 프로젝트 이름을 지정하고 google analytics계정을 연결해줍니다. 프로젝트 생성이 완료되면 콘솔로 이동하는데요, 앱 추가 > Web을 선택하면, npm방식으로 web에 연결하는 방법과 apikey등이 나옵니다. 이 key값들을 잘 복사해두세요. vue코드 안에 삽입해주어야 하는 값입니다. 2. Firebase에 데이터 생성 Firebase의 데이터를 vue프로젝트와 연결해보겠습니다. 데이터베이스만들기를 클릭하여 새로운 데이터베이스를 하나 만들어주세요. .. Vue 시작하기 (1) | vue create, vuetify, form input 1. Vue Create로 프로젝트 생성 Vue 기본 프로젝트를 하나 생성합니다. vue create (프로젝트명) cd (프로젝트명) npm i npm run serve vue create시의 옵션은 아래와 같이 설정했습니다. [Vue 2] dart-sass, babel, typescript, pwa, router, vuex 2. Vuetify추가 vue add vuetify 명령어 입력 후 localhost:8080에 접속해보면, vuetify 디자인이 적용된 화면을 확인할 수 있습니다. 3. Vuetify 컴포넌트 사용해보기 vuetify 공식 페이지에서 버튼 컴포넌트를 하나 가져와 사용해보겠습니다. https://vuetifyjs.com/en/components/buttons/#usage Butt.. 이전 1 다음
