背景
開発時はローカル、本番ではGCSへコピーした画像を参照したい
やったこと
使うコンポーネントで毎回ローカルとGCSの参照を切り替えるのは面倒なので画像を扱うクラスを用意することにしました
Rails環境でRAILS_ENVにproduction,staging等が指定されGCSではバケット名が [RAILS_ENV]-assets というような名前になっている状態です
NODE_ENVはdevelopmentかproductionが指定されるのでそれを見て開発時のローカルパスを返すか、GCSのURLを返すかを判断します
画像はapp/javascript/images 以下に image-a.jpg, image-b.jpgが置いてある前提です
config/webpack/environment.js
...略
environment.config.merge({
resolve: {
alias: {
'@': path.resolve(__dirname, '..', '..', 'app/javascript')
}
}
})
module.exports = environment
image.js
'use strict'
import imageA from '@/images/image-a'
import imageB from '@/images/image-b'
const GCS_DOMAIN = 'storage.googleapis.com'
const BUCKET = `${process.env.RAILS_ENV}-assets`
const PROTOCOL = 'https'
class Image {
static sources = {
imageA: imageA,
imageB: imageB
}
constructor () {
this.host = ""
if (process.env.NODE_ENV === 'production')
this.host = `${PROTOCOL}://${BUCKET}.${GCS_DOMAIN}`
}
/**
* 画像のパスを取得
* @returns {String}
*/
getSrc (key) {
return `${this.host}${Image.sources[key]}`
}
}
export default new Image
Image.vue
<template lang="pug">
img(:src="src")
</template>
<script>
import image from './image'
export default {
data () {
src: image.getSrc('imageA')
}
}
</script>