깃허브 페이지에 배포중 이미지 경로 다루기 (with Webpack)

웹팩을 사용한 깃허브 페이지 배포과정에서 public static 이미지 경로 다루는 중 삽질기록

 

CRA를 사용하면 미리 작성된 설정에 따라 배포자체는 쉽게 된다. 문제는 웹팩을 사용하면서 겪은 문제들

 

리액트 파일구조는 다음과 같다.

 

public 폴더 안에 img0.jpg 이미지 파일 하나가 들어있다.

 

이미지 경로 다루기

public
  ㄴimg0.jpg
src
  ㄴcomponent
  ㄴindex.tsx
  ㄴindex.html

 

구글링 결과 src 폴더 밑에 asset 폴더 형식으로 이미지경로를 다루는 예제들이 많다.

 

이미지 경로는 대부분 다음과 같이 임포트 형식으로 불러와서 작성한다.

import imagesrc from './asset/img0.jpg';

<img src={imagesrc}/>

 

필자는 작은 프로젝트 중 public 폴더에 있는 이미지를 다루고 배포하고 싶었다.

개발모드에선 public폴더 내 이미지경로는 다음과 같이 간단하게 작성할 수 있다.

 

<img src='img0.jpg'/>

 

리액트가 알아서 public 폴더를 잡아줘서 상대경로로 쉽게 잡을 수 있다.

 

깃허브 페이지 배포

 

static한 웹서비스를 깃허브 페이지에 배포를 한다면 package.json에 다음과 같이 속성을 추가해야 한다.

 

package.json

"homepage": "{username}.github.io/{repo}"

 

웹팩에 publicPath 속성을 명시하지 않으면 깃헙 페이지에 그대로 배포를 하였을 시 app.js를 가져오는 경로가

 

맞지 않아서 불러 오지 못한다. 기본적으로 publicPath는 설정되어 있지 않다.

 

 

올바른 경로

<script src='{reponame}/app.js'/>

틀린 경로

<script src='app.js'/>

 

웹팩 publicPath는 다음과 같이 설정한다.

publicPath는 일종의 prefix개념으로 배포시 cdn이나 웹서버에서 리소스를 가져오기 위해 일종의 주소나 문자열을 앞에 명시하는 것이다. 다음 블로그에 publicPath에 설명이 아주 잘되있다.

 

https://develoger.kr/frontend/webpack-%EC%9D%B4%EB%AF%B8%EC%A7%80-%EA%B2%BD%EB%A1%9C-%EC%B2%98%EB%A6%AC/

Webpack 이미지 경로 처리 – 개발자블로그

 

웹팩에서 output 속성을 다음과 같이 작성한다.

 

module.exports = (env, argv) => {

  const isDevMode = argv.mode === 'development';
  const isProdMode = argv.mode === 'production';

  return {
    output: {
      path: path.resolve(__dirname, 'dist/'),
      filename: 'app.js',
      publicPath: isProdMode ? `/{repoName}/` : ''
    }
    ... 기타 다른 속성들
}

 

반드시 개발모드, 배포모드로 나누어서 작성한다. 모드를 나누어 작성하지 않는다면 

 

개발모드에서 로컬호스팅시 listing directory 취약점을 띄어주며 개발을 할 수 없다.

 

위와같이 publicPath에 레포지터리 이름을 반드시 작성해준다. 

 

listing directory 이미지

 

 

이대로 빌드해서 배포하면 깃헙 브랜치에는 public 폴더를 찾을 수 없다.

 

public 폴더를 그대로 복사해서 배포해야 한다. 이에 아주 좋은 플러그인이 있다.

 

npm i --save-dev copy-webpack-plugin

webpack.config.js

const CopyWebpackPlugin = require('copy-webpack-plugin');
 
module.exports = {
    context: path.join(__dirname, 'your-app'),
    plugins: [
        new CopyWebpackPlugin({
            patterns: [
                { from: 'public' }
            ]
        })
    ]
};

다양한 옵션 설정 방법이 있지만 여기선 간단하게 다룬다. pattern 속성에  다음과 같이 작성해준다. 

 

빌드시 public 폴더를 output파일이 있는 폴더에 복사해준다.

 

배포모드에서 이미지 경로 다시 다루기

 

위에서 public 폴더내 이미지 경로는 다음과 같이 다루었다.

<img src='img0.jpg'/>

 

하지만 깃헙페이지 배포시 이미지를 불러오지 못한다. 당연히 경로 문제

 

다음과 같이 작성해준다.

 

const prodMode = process.env.NODE_ENV === 'production';
const src = prodMode ? '{repoName}/public/image0.jpg' : 'img0.jpg';

<img src={src}/>

 

이미지 리소스들을 어디에 넣냐에 따라 다르지만 배포모드에서 반드시 앞에 레포지터리 이름을 넣어주고

 

그 다음에 gh-pages 브랜치에서 이미지가 들어있는 경로에 작성해서 넣어준다.

 

물론 위 방법은 아주 일반적이지 않다.

 

import 형식으로 불러오면 webpack의 fild-loader가 알아서 해준다.