Vue/Firebase 이용해서 홈페이지 만들기 (11) axios 이용해서 storage에 파일 업/다운로드 하기

오늘의 목표

axios 이용해서 storage에 파일을 업/다운로드 하는 법을 알아보자.

---

#1. axios 설치 및 테스트코드 작성

#2. CORS 정책을 위한 google cloud sdk 설치 및 설정

---

#1. axios 설치 및 테스트코드 작성

 - axios 사용법
   . 설치 : yarn add axios
   . 사용 : import axios from 'axios'

 - write와 read 버튼 만들어서 제대로 동작하는지 테스트

<template>
  <v-sheet>
    <v-textarea v-model="text">

    </v-textarea>
    <v-btn @click="read">read</v-btn>
    <v-btn @click="write">write</v-btn>
  </v-sheet>
</template>
<script>
import axios from 'axios'

export default {
  data () {
    return {
      text: '',
      url: ''
    }
  },
  methods: {
    async write () {
      const sn = await this.$firebase.storage().ref().child('xx1x.text').putString('abcd')
      const url = await sn.ref.getDownloadURL()
      this.url = url
    },
    async read () {
      const r = await axios.get(this.url)
      console.log(r)
      this.text = r.data
    }
  }
}
</script>

 

#2. CORS 정책을 위한 google cloud sdk 설치 및 설정

 - CORS오류 발생할 것임 : localhost와 실제 도메인이 달라서 오류가 남.
    . 해결법 : CORS 설정해줘야 함 (google cloud SDK 설치돼야 함 : https://cloud.google.com/sdk/docs?authuser=0)

 - Google Cloud SDK 설치완료함. (python까지 설치되어 있어야 함)

 - 이제 gsutil 등을 가져다 쓸 수 있게 cors.json 파일 만들어서 아래와 같이 셋팅함 (root/cors.json)

[
  {
    "origin": ["*"],
    "method": ["GET"],
    "maxAgeSeconds": 3600
  }
]

google-cloud-sdk 다운로드 후 path 설정을 위한 echo $SHELL 확인

 - $ vi ~/.bashrc 명령어로 path 수정하기

 - $ source .bashrc : 변경사항 적용하기

 - gcloud --version

 - 인텔리제이 터미널을 열고 gsutil cors set cors.json gs://cllang-edu-online-class.appspot.com 입력했는데 gsutil 경로를 못 잡는다.....

 - gsutil 별도로 설치해서 $HOME에 압축을 풀었다.

 - $ vi ~/.bash_profile => export PATH=${PATH}:$HOME/gsutil 추가해줬다.

 - 터미널 다시 열어 gsutil cors set cors.json gs://cllang-edu-online-class.appspot.com 입력하니 아래와 같이 뜨네...

401 Anonymous caller does not have storage.buckets.update

 

 - $ gsutil config 실행 후 아래와 같이 하니 해결됐다!

 - 이제 write 후에 read를 해보니 잘 작동한다.

write 하면 storage에 abcd를 입력한 txt 파일이 저장됨

read 버튼을 누르면 다운받아 화면이 보여줌

 

※ 해당 내용은 아래의 사이트에서 강의를 보며 실습한 내용입니다.

memi.dev

 

---