티스토리 뷰
1. Procfile 만들기 타입스크립트면 ts , 일반이면 js
//Procfile
web: node server.js
2. server 파일 만들기
//server.js
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(
jsonServer.rewriter({
"/api/*": "/$1",
})
);
server.use(router);
server.listen(port, () => {
console.log("server is running");
});
3. package.json 파일에 script 추가하기
"scripts": {
"start": "node server",
"start:dev": "cross-env NODE_PATH=src react-scripts start",
"build": "cross-env NODE_PATH=src react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject",
"heroku-postbuild": "cross-env NODE_PATH=src npm run build"
},
npm i cross-env
설치해야 작동함
https://www.npmjs.com/package/cross-env
4. Heroku CLI 설치
https://devcenter.heroku.com/articles/heroku-cli
wsl2 유저는 이것 설치
curl https://cli-assets.heroku.com/install.sh | sh
버전확인 heroku -v
5.본인 프로젝트 마스터 브런치 혹은 default 브런치에서 heroku login
$ git init
$ git add .
$ git commit -am'initial commit'
그 이후
$ heroku create <프로젝트명> # 프로젝트명을 공백으로 하시면 이름이 자동으로 랜덤설정 됩니다.
$ heroku config:set NPM_CONFIG_PRODUCTION=false # devDependency 도 설치하게 설정합니다
$ git push heroku master
에러가 날 경우
heroku buildpacks:set mars/create-react-app
터미널에 입력
참고 블로그
https://bogmong.tistory.com/11
https://redux-advanced.vlpt.us/3/09.html
https://github.com/mars/create-react-app-buildpack
https://github.com/jesperorb/json-server-heroku#deploy-to-heroku
https://heeyeonjeong.tistory.com/102
'배포' 카테고리의 다른 글
heroku 무료 버전 폐지 ! cloudtype.io 로 웹 서버 옮기기 json-server 를 배포 (0) | 2023.01.07 |
---|---|
heroku 무료 버전 폐지 ! fly.io로 웹 서버 옮기기 (wsl2 fly.io install) (0) | 2022.12.30 |
gh-pages 로 리액트 사이트 배포하기 // gh-pages 로 SPA 지원하기 // 배포한 사이트 새로고침 가능 (0) | 2022.02.27 |
heroku 에서 배포한 사이트 30분 주기로 잠에서 깨우기 잠자는 사이트 (0) | 2022.02.19 |
AWS S3 ,CloudFront로 리액트앱 프론트앤드 웹페이지 배포하기 (0) | 2022.02.03 |
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
- Total
- Today
- Yesterday
링크
TAG
- TopLayer
- 프리온보딩
- env
- 윤성우 열혈C프로그래밍
- WSL2
- 아차산
- 스토리 북
- electron
- Storybook
- 북클럽
- javascript
- 위코드
- 원티드
- nextjs
- 프론트앤드
- jest
- error
- React
- createPortal
- NextApiRequest
- NextRequest
- CLASS
- C언어
- nodejs
- 노마드코더
- 노개북
- import/order
- 초보
- 우아한테크코스
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 | 31 |
글 보관함