항해 30일차
오늘은 내가 만든 과제를 마무리하고 배포하는 시간을 가졌다.
원래 계획이라면 https://www.heroku.com/ 를 이용하여 json-server를 배포할려고 했지만, 유료화가 되었다는 소식에....😬 다른 사이트를 사용하였다.
나는 render 라는 배포 사이트를 사용하였다. https://render.com/
사용 방법은 이렇다..
1.
git hub 원격 레포지토리를 만든다.
2.
새로운 폴더를 만들어 vscode를 킨다.
3.
npm init, npm i 를 입력해준다.
4.
git remote add origin <원격 레포지토리 이름>을 입력한다.
5.
npm install -y입력한다.
6.
yarn add json-server cors json-serve를 입력한다.
7.
server.js를 만들어
```jsx
const jsonServer = require("json-server");
const server = jsonServer.create();
const router = jsonServer.router("db.json");
const middlewares = jsonServer.defaults({
static: "./build",
});
const port = process.env.PORT || 4000;
server.use(middlewares);
server.use(router);
server.listen(port, () => {
console.log("JSON Server is running");
});이때 const port = process.env.PORT || 4000; 이 부분에서 자신이 사용한 포트로 바꾸어준다.
8.
그리고 생성된 package.json 파일을 수정한다.
{
"name": "jsonserver",
"version": "1.0.0",
"main": "server.js",
"scripts": {
"start": "node server.js"
},
"author": "",
"license": "ISC",
"dependencies": {
"cors": "^2.8.5",
"json-serve": "^0.1.0",
"json-server": "^0.17.3"
},
"devDependencies": {},
"repository": {
"type": "git",
"url": "깃허브 주소"
},
"keywords": [],
"bugs": {
"url": "깃허브 주소/이슈"
},
"homepage": "깃허브 주소/리드미",
"description": ""
}
버전과 자신의 원격 레포지토리를 잘 확인하고 입력해준다. 9.
.gitignore를 만들어 /node_modules를 입력해준다.
10.
git add .
git commit -m "server setting"
git push -u origin main
깃 푸쉬를 진행한다.
10.
마지막으로 자신의 레포 상태가 다음과 같은지 확인한다.
11.
렌더사이트 가입 👉 웹 서비스 클릭 👉 깃 허브 연결 후 원격 레포지토리 연결 👉 간단한 설정과 웹서비스 생성 클릭 👉 그 후 사이트로 들어가면 db.json에 입력한 정보를 볼 수 있다.
12.
그 후 자신이 만든 리액트 프로젝트를 vercel에 배포하면 잘 실행된다.
⚠️ 이때 아까 만든 랜더 주소를 리액트 프로젝트에 있는 env 포트로 바꿔주면 끝이다.
마무리
랜더라는 사이트를 알게 되었고, 이러한 배포방법까지 알아보았다. vercel과 같이 render 사이트도 자주 사용해야겠다. 무료 개🍯!!~
