React a GitHub Pages에 대한 프로젝트 시작

소개

En esta ocasión de mostrare como hacer deploy de tu proyecto de react al servidor de paginas estáticas de github pages. Si sabes que es react seguramente sabrás que GitHub y tendrás tu cuenta, si es así sígueme en github . Github Pages는 웹 페이지(단독 HTML, JavaScript 및 CSS)를 호스팅하는 추가 서비스를 제공하지 않으며 COMO SERVIDOR BACKEND 기능이 없으므로 서비스를 무료로 사용할 수 있습니다.

준비

GitHub Pages의 초기 배포 절차는 다음과 같습니다.

[x] GitHub Cuenta

[x] Git 설치 및 컴퓨터 설치

[x] 프로젝트 웹 및 저장소 en GitHub

Instalacion de gh-pages

El primer paso será instalar el paquete gh-pages que nos ayudara a convertir el código de react a archivos estáticos que nos acepte el hosting

npm install --save-dev gh-pages

recuerda que las banderas "--save-dev"asignan la instalación como dependsencias de desarrollo. Una vez que se haya instalado verifica en el archivo package.json que se haya agregado el paquete

},
...
"devDependencies": {
    "gh-pages": "^4.0.0"
    }
...
   }

package.json 구성

Para configurar nuestro archivo package.json debemos agregar las siguientes reglas, la primera será 홈페이지 la vamos agregar después de "devDependencies"

 },
...
"devDependencies": {
    "gh-pages": "^4.0.0"
    },
 "homepage": "https://USUARIO_GITHUB.github.io/NOMBRE_DE_REPOSITORIO"
...
   }

Para esta regla de "homepage"es importante que coloques TU usuario de github y el nombre del repositorio que estas utilizando, por ejemplo

"homepage": "https://aramxD.github.io/react-fetch-exercise"

Ahora vamos agregar un par de scripts, llamados "predeploy"y "deploy"que nos ayudara a preparar nuestra aplicación para subirla a los servidores de GitHub

},
"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    ...
    "predeploy":"npm run build",
    "deploy": "gh-pages -d build
    ...
},

노 올비데스 가다르 로스 캄비오스

Ejecutamos 배포

Con los scripts preparados ejecutamos en nuestra terminar el script "deploy"

npm run deploy

No olvides que la terminal debe esta en la carpeta de nuestro proyecto.
Una vez que termine la ejecución de nuestro comando, podrás ver que se creo una carpeta llamada "build"



En esta carpeta encontraras lo archivos estáticos de nuestro proyecto

커밋 및 푸시

Para finalizar debemos guardar los cambios y agregarlos a nuestro repositorio, primero agregamos los cambios con:

git add --all

lo siguiente será crear el commit con los cambios

git commit -m"deploy ready"

para finalizar enviamos los cambios al repositorio con "push"

git push origin master

결과

Para comprobar que todo haya salido bien, entra a tu repositorio y dirígete a settings, en el lado izquierdo encontraras el apartado de Pages ahí encontraras el link publico de tu proyecto.

Nota: En ocasiones es necesario esperar unos minutos para que se actualicen los servidores de GitHub Pages y se muestre nuestro proyecto