TIL 12.27

서버 배포 방법!

이전에 리액트파일을 버셀로 매우 간편하게 배포한 경험이 있어서 버셀로 db.json까지 서버 배포도 완료하고 싶었으나...
vercel의 파일 서버가 read-only라 db.json을 수정하지 못해 500 error가 발생하게 된다고 한다.
이는 glitch로 배포하면 해결된다고 하여 서버는 glitch, 리액트파일은 vercel로 배포하였다.

(시도 한 것)
프로젝트를 진행했던 리액트파일에서 db.json도 같이 저장해두었기 때문에 혹시 하나의 파일로 만들어서 한 번만 배포를 하면 되지 않을까 생각했다.
하지만 이렇게 하려니까 실수로 빼먹은 파일도 생기고 기존에 있던 파일에서 에러없이 추가하기도 쉽지 않았다. 그래서 따로따로 배포하는 것이 좋다고 생각했다.

서버 배포

참고자료!
https://github.com/jesperorb/json-server-heroku
https://dev.to/newtonombese/hosting-your-json-server-on-glitch-1nnm

사용법에도 나와있지만 이 템플릿으로 레퍼지토리를 새로 만든다.
db.json 파일에만 필요한 데이터를 입력하고 저장한다.
glitch 사이트에 가입하고 깃허브 주소를 입력해 올리면 간단 배포 가능!

리액트 배포

vercel도 마찬가지로 깃허브에 레퍼지토리를 연결하면 자동으로 배포 된다.
배포한 이후 변경사항이 있어도 푸쉬를 해주면 적용된다.

배포한 이후 중요한 점!

프로젝트 리액트 파일에서 서버 주소를 로컬 호스트로 하드코딩해놓고 진행했었던 부분을 서버 주소로 바꿔주어야 한다!
앞으로는 이 점을 유념해서 먼저 이 작업을 해주면 좋을 것 같다.

// constants.js파일

// export const AXIOS_ADDRESS = "http://localhost:3003";

const AXIOS_ADDRESS = 'https://cool-rigorous-umbra.glitch.me/';

export default AXIOS_ADDRESS;

// module 파일

import AXIOS_ADDRESS from './constant';

export const __getProductpost = createAsyncThunk(
  'productposts/getproductpost',
  async (payload, thunkAPI) => {
    try {
      const data = await axios.get(`${AXIOS_ADDRESS}/product_posts`);
      return thunkAPI.fulfillWithValue(data.data);
    } catch (error) {
      return thunkAPI.rejectWithValue(error);
    }
  }
);

module파일들에 서버주소 필요한 부분마다 다 바꿔주어야 한다.