Vercel에서 정적 파일 사용하기

React Setting을 CRA로 하면 이슈가 없지만, zero base로 셋팅했을 경우 이미지를 절대 경로로 접근 못하는 이슈가 있다.

/assets/img/a.png

assets 파일 이름을 static으로 변경하면 절대경로로 접근 가능하다.

1) assets > static 파일 네임 변경

2) webpack에서 에셋 파일 복사(webpack.config.prod.js)

const path = require('path');
const webpack = require('webpack');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
  mode: 'production',
  output: {
    filename: 'static/bundle.[hash].js',
    path: path.resolve('dist'),
  },
  plugins: [
    new CleanWebpackPlugin({
      cleanAfterEveryBuildPatterns: ['dist']
    }),
    new webpack.HotModuleReplacementPlugin(),
    new CopyWebpackPlugin(
      [
        {
          from: path.resolve(__dirname, '../static'),
          to: path.resolve(__dirname, '../dist/static')
        }
      ]),
  ],
};