[Nuxt.js + Node.js] 백엔드에서 업로드한 정적파일을 프론트에서 참조하기

백엔드에서 이미지 파일을 static 폴더에 올렸다면 일반적으로는 프론트에서 참조할 수가 없다.

하지만 express는 이미지 파일과 같은 정적 파일들을 쉽게 참조하여 반환할 수 있는 메소드를 제공한다.

 

| Back-end

app.use('/static', express.static(path.join(__dirname, 'static')));

express.static 메소드는 node프로세스가 실행되는 path에 따라 상대적이므로 위와 같이 환경변수인 __dirname을 써서 디렉토리명을 지정해줄 수 있다. node 프로세스가 실행되는 같은 경로의 static 폴더를 참조한다.

 

그러면 아래와 같이 참조했을 때 백엔드의 static 디렉토리내의 모든 파일을 참조할 수 있게 된다.

http://localhost:3000/api/static/images/mt/resize-1697954077172.jpg

 

| Front-end

다음은 nuxt.config.js를 수정하여

api라는 경로로 들어왔을 때 경로를 다시 쓰기해주도록 한다.

 axios: {
        proxy: true,
        prefix: '/api'
    },

    proxy: {
        '/api': { target: process.env.AXIOS_BASE_URL, pathRewrite: { '^/api/': '/' } },
    },

[프론트 .env 폴더에 정의된 api 주소]

AXIOS_BASE_URL=http://127.0.0.1:10072

 

만약 DB에 저장된 path과 다음과 같다면 프론트의 메소드나 computed 속성으로 경로를 반환하면 될 것이다.

static/images/mt/resize-1697954077178.jpg

 

  getImageUrl(img) {
            if (img.path && img.path.includes('static/images')) {
                return '/api/' + img.path;
            }
            return URL.createObjectURL(img);
        },

그러면 백엔드에서 굳이 파일객체를 리턴한다는지 리소스가 많이들고 비효율적인 방법을 쓰지않고도 쉽게 리소스를 참조할 수 있게 된다.