msw를 netlify, storybook production 환경에 적용하기 (feat. 백엔드 없이 살아남기)
기존에 AWS로 배포했던 배포 사이트가 도메인 사용 기한을 넘기면서 Netlify로 다시 배포하게 되었다.
Netlify와 Storybook의 배포 환경에서 msw를 적용하는 과정을 간략히 기록한다.
Netlify production 환경에 msw 적용하기
deploy 모드에서 worker 실행하기
기존에 develop 환경에서만 worker를 실행하던 것을 조건문을 삭제하여 deploy 환경에서도 실행시킨다.
// src/index.tsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { worker } from './mocks/worker';
/** dev 환경에서 실행되는 조건문 삭제
if (process.env.NODE_ENV === 'development') {
worker.start({ onUnhandledRequest: 'bypass' });
}
*/
worker.start({ onUnhandledRequest: 'bypass' });
const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
root.render(
<React.StrictMode>
<App />
</React.StrictMode>,
);
만약 API 요청을 보내는 baseUrl을 백엔드 배포 url로 설정했다면 주석처리를 해준다. 현재 배포된 url에 엔드포인트로 API 요청을 보내야 msw가 response를 내려줄 수 있기 때문이다. 프로젝트에서는 axios를 사용해서 baseUrl을 설정해주고 있었으므로 해당 부분을 주석처리했다.
// src/App.tsx
// axios.defaults.baseURL = process.env.REACT_APP_PUBLIC_URL;
workerDirectory 설정
npx msw init ./public --save
위 명령어를 터미널에 입력하면 public 디렉토리에 mockServiceWorker.js 스크립트 파일이 생성된다. 이 파일은 기본적인 msw 설정을 가지고 있으며, 네트워크 요청을 가로채고 가짜 응답을 반환한다.
--save 플래그를 사용하면 package.json 파일에 PUBLIC_DIR을 저장한다.
workerDirectory 속성은 worker script를 복사할 위치를 나타내는 것으로 이 설정을 통해 msw 패키지가 업데이트 될 때 worker script가 새 버전의 라이브러리와 동기화될 수 있도록 한다. 즉, worker script를 자동으로 업데이트할 수 있게 한다.
// package.json
"msw": {
"workerDirectory": "./public"
},위 과정까지 진행하고 배포를 해보았더니 다음과 같은 에러가 발생한다.
Uncaught (in promise) Error: [MSW] Failed to register a Service Worker for scope ('https://deploy-preview-7--my-issue-tracker-web.netlify.app/') with script ('https://deploy-preview-7--my-issue-tracker-web.netlify.app/mockServiceWorker.js'): Service Worker script does not exist at the given path.
Did you forget to run "npx msw init <PUBLIC_DIR>"?
Learn more about creating the Service Worker script: https://mswjs.io/docs/cli/init
요약해보면 service worker script가 path에 존재하지 않는다는 말이다.
Webpack 번들링 과정에서 worker script의 위치가 변경되어 찾지 못하는 것 같다.
이를 해결하기 위해 두가지 방법을 찾았다.
- 웹팩 설정에서 HTML 파일과 함께 worker script를 복사하여 적절한 위치에 배치한다.
- netlify.toml에 명령어를 추가하여 msw 설정을 갱신한다.
두가지 방법 모두 worker script 위치를 msw에 알려주고 애플리케이션에서 정상적으로 사용할 수 있게 하는 것이 목적이다.
나는 AWS에서 배포할 때 작성했던 yaml 파일이 있어서 두번째 방식을 택했다.
/**netlify.toml*/
[build]
command = """
npm install --force
npm run build
echo -e "REACT_APP_GITHUB_AUTH_URL=$REACT_APP_GITHUB_AUTH_URL\n
REACT_APP_KAKAO_AUTH_URL=$REACT_APP_KAKAO_AUTH_URL\n
REACT_APP_NAVER_AUTH_URL=$REACT_APP_NAVER_AUTH_URL\n
REACT_APP_PUBLIC_URL=$REACT_APP_PUBLIC_URL\n
REACT_APP_UNIVERSAL_LINK=$REACT_APP_UNIVERSAL_LINK\n" > ./.env
npx msw init ./build --save
"""
publish = "build"주의할 점
-
명령어의 디렉토리를 build로 수정한다.
웹팩 번들링 이후 build에 생성되므로 public에서 build로 꼭 변경해야 한다. -
command 순서를 지키자.
반드시npm run build명령어 다음에npx msw niit ./build --save가 와야 한다.
빌드가 끝난 후 생성된 build 디렉토리에 msw 환경을 설정하는 것이기 때문이다.
만약 msw 환경을 먼저 설정하고 빌드를 하면 나중에 생성된 build 디렉토리가 worker script를 덮어씌우므로 스크립트 파일이 정상적으로 생성이 되지않는다. -
netlify 환경변수 설정
기존에 github action의 secrets and variables로 환경변수를 설정했다.
이때는.yaml파일에서${{환경변수}}이런 방식으로 접근할 수 있었다.
netlify는$환경변수로 접근해야 한다.
storybook production 환경에 msw 적용하기
storybook 공식 문서는 chromatic을 통해 배포하는 방식을 소개한다.
msw 적용 방식은 위와 동일하나 package.json 파일의 workerDirectory 속성에 .storybook/public 이 저장되어야 한다.
하지만 workerDirectory 속성에 여러 디렉토리를 입력할 수 없는 이슈로 storybook 배포를 위한 별도의 브랜치를 생성했다.
chromatic.yaml 파일은 다음과 같다.
/**.github/worflows chromatic.yaml */
name: 'Chromatic'
on:
push:
branches:
- deploy
jobs:
chromatic-deployment:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v1
- name: Install dependencies
run: npm install --force
- name: Publish to Chromatic
uses: chromaui/action@v1
with:
projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}