๐gh-pages๋?
github๋ ๊ณ์ ๋น ํ๋์ฉ ๋ฐฐํฌ์ฉ ๋๋ฉ์ธ์ ์ฌ์ฉ๊ฐ๋ฅํ๋๋ก ์ง์ํ๊ณ ์์ต๋๋ค.
์ด๋ ๊ฒ {username}.github.io์ ํํ์ ๋๋ฉ์ธ์ ๊นํ๋ธ์์ ์ง์ํด์ฃผ๋ ๋๋ฉ์ธ์ด๋ผ๊ณ ์๊ฐํ๋ฉด ๋ฉ๋๋ค.
๋ณดํต์ ์ด๊ฑธ ์ด์ฉํด์ ๊ฐ๋ฐ๋ธ๋ก๊ทธ๋ก ์ด์ฉํ์๋ ๋ถ๋ค์ด ๋ง๊ณ ,
์ฃผ์ด์ง ๋๋ฉ์ธ ์์์ ๋ ํฌ์งํ ๋ฆฌ๋ณ๋ก ๋ฐฐํฌ๊ฐ ๊ฐ๋ฅํฉ๋๋ค.
ํ๋ก์ ํธ๋ฅผ ๋ฐฐํฌํ๊ฒ ๋๋ฉด ๋๋ฉ์ธ์ ์ด๋ฐ ํํ๊ฐ ๋ฉ๋๋ค.
{username}.github.io.{repo}
๋ค๋ง ์ ์ ์นํ์ด์ง๋ง ๋ฐฐํฌํ ์ ์๊ธฐ ๋๋ฌธ์
๋์ ์ธ ๊ธฐ๋ฅ์ด ๋ค์ด๊ฐ๋ค๋ฉด ๋ฐฐํฌ๊ฐ ์ ํ์ ์ผ ์ ์์ต๋๋ค.
์ด์ ํ๋ก์ ํธ๋ฅผ ๋ฐฐํฌํ๋ฌ ๊ฐ๋ด ์๋ค
๐คgithub repo ๋ง๋ค๊ณ ์ ๋ก๋ํ๊ธฐ
git์ผ๋ก ํ๋ก์ ํธ๋ฅผ pushํ๋ ๋ฐฉ๋ฒ์ ๋ํด์๋ ๋ฐ๋ก ๋ค๋ฃจ์ง ์๋๋ก ํ๊ฒ ์ต๋๋ค.
git์ด ์ด๋ ต๋ค๋ฉด ์์ฑํ github repo์ ํด๋๋ฅผ ๋๋๊ทธ ์ค ๋๋กญํด๋ ์ ๋ก๋ ๊ฐ๋ฅํฉ๋๋ค.
๊นํ๋ธ ๋ ํฌ์งํ ๋ฆฌ๋ฅผ ์์ฑํ ๋ค์์
$ git remote add origin [github repo]
remote ์ฐ๋๊น์ง ๋ง์ณ์ค๋๋ค.
โํ๋ก์ ํธ์ gh-pages ์ค์น & ์ธํ
// npm
$ npm install gh-pages --save-dev
//yarn
$ yarn add -D gh-pages
gh-pages๋ฅผ devDependency๋ก ์ค์นํฉ๋๋ค.
package.json์ "homepage": "http://{username}.github.io/{repo}" ์ถ๊ฐํฉ๋๋ค.
package.jsonํ์ผ์ scripts์ predeploy์ deploy ๋ช ๋ น์ด ์ถ๊ฐํฉ๋๋ค.
"predeploy": "npm run build",
"deploy": "gh-pages -d build",
์ด๋ ๊ฒํ๋ฉด ํ๊ฒฝ์ค์ ์ ๋ชจ๋ ๋๋ฌ์ต๋๋ค.
ํ์ผ๋ค์ ๋ชจ๋ main ๋ธ๋์น์ pushํด์ฃผ์ธ์.
$ git push origin main
๐gh-pages ๋ฐฐํฌํ๊ธฐ
// ๋ฐฐํฌํ๊ธฐ
$ npm run deploy
// ๋ฉ์์ง์ ํจ๊ป ๋ฐฐํฌํ๊ธฐ
$ npm run deploy -- -m "Deploy React app to GitHub Pages"
scripts์ ์ถ๊ฐํด์ค deploy ๋ช ๋ น์ด๋ฅผ ์คํํด์ ๋ฐฐํฌ๋ฅผ ์์ํฉ๋๋ค.
๊นํ๋ธ์ ๋ฉ์์ง๊ฐ default๋ก ์ฌ๋ผ๊ฐ๋ ๊ฒ ์ซ๋ค๋ฉด -m ์ต์ ์ผ๋ก ๋ฉ์์ง๋ฅผ ์์ฑํด์ฃผ์ด๋ ๋ฉ๋๋ค.
ํฐ๋ฏธ๋์์ ์์ ์ด ๋๋๋ฉด
๊นํ๋ธ ๋ ํฌ์งํ ๋ฆฌ๋ก ํ์ธํ๋ฌ ๊ฐ๋ด ์๋ค.
๐ฎgh-pages ๋ฐฐํฌ ํ์ธํ๊ธฐ
gh-pages ๋ธ๋์น๊ฐ ์๊ฒจ์๋ ๊ฑธ ํ์ธํ ์ ์์ต๋๋ค.
gh-pages ๋ธ๋์น๋ ๋ฐฐํฌ์ฉ ๋ธ๋์น์ด๊ธฐ ๋๋ฌธ์ ๋ฐ๋ก ๊ฑด๋๋ฆฌ์๋ฉด ์๋ฉ๋๋ค!
์ค๋ฅธ์ชฝ ๋ฉ๋ด์ Environments์ github-pages๋ผ๋ ๊ฒ ์ถ๊ฐ๋์ด ์๋ ๊ฑธ ๋ณผ ์ ์์ต๋๋ค.
View deployment๋ฅผ ํด๋ฆญํ๋ฉด ์ค์ ํ ๋ homepage์ ์ ๋ ฅํ๋ url๋ก ๋ฐฐํฌ๊ฐ ๋์ด ์๋ ๊ฑธ ํ์ธํ ์ ์์ต๋๋ค.
โถReference
react-gh-pages ๊นํ๋ธ
์ฌ์ค ์ฌ๊ธฐ ๋ฆฌ๋๋ฏธ์ ๋ค ๋์์์
'react' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
[Vite] vite๋ก ์ด์ ๋ชจ๋ฅด๊ฒ ์น์์ผ ํต์ ์ด ์๋๋ ๊ฒฝ์ฐ(ws, sockjs) (1) | 2023.01.05 |
---|---|
json-server ์ปค์คํ ํ๊ธฐ (0) | 2022.12.19 |
[React] Lifecycle๊ณผ ๋ฉ์๋ ๊ทธ๋ฆฌ๊ณ Hook (0) | 2022.12.12 |
[React] Redux-toolkit ์ ๋ฌธํ๊ธฐ (0) | 2022.12.10 |
[React] ์นด์ดํฐ๋ก ์์ํ๋ Redux (0) | 2022.12.04 |