Bitbucket 파이핑을 사용하여 React 응용 프로그램을 Heroku에 배포
Bitbucket 파이핑을 사용하여 React 응용 프로그램을 Heroku에 배포
햄버거의 anAtlassian Community Event을 위해 강연을 준비할 때, 나는 Bitbucket과 Heroku가 함께 사용하는 문서와 강좌를 만났다.그래서 제 첫 편을 쓰기로 했어요.
Building a basic CI/CD pipeline for deploying a React App to Heroku using Bitbucket
입문
단계 1 - React 응용 프로그램 만들기
이 강좌에서 React 응용 프로그램을 Heroku에 배치하는 방법을 중점적으로 소개할 것입니다. 따라서 React starter 응용 프로그램만 사용할 것입니다.Heroku에서 프로그램을 실행하기 위해서, 우리는 잠시 후에 기본적인 express 서버 설정을 추가할 것입니다.
React 응용 프로그램을 만들고 실행하기 위한 필수 조건은 다음과 같습니다.
Building a basic CI/CD pipeline for deploying a React App to Heroku using Bitbucket
npx create-react-app name-of-your-app
돌아오면 터미널에 다음 줄을 입력하여 프로그램을 시작합니다
cd name-of-your-app
npm start
2단계 - Bitbucket 저장소 만들기
현재 우리는 로컬 기계에 프로그램을 설치하고 실행했습니다. git 저장소를 만들어야 합니다.그래서 우리는 방향을 바꾸었다https://bitbucket.org.만약 당신이 아직 계좌가 없다면, 무료로 하나를 얻을 수 있습니다 (지금은 매우 중요합니다)!
새 저장소를 만들 때 최소한 이름을 지정하고 접근 단계를private로 설정해야 합니다.이후 대부분의 설정을 변경할 수 있습니다.
잘했어!아마도 첫 번째-git 저장소를 만들었을 것입니다.메뉴를 훑어볼 때가 됐어. 이제 왼손에서 볼 수 있어.
Bitbucket에 대한 자세한 내용은 official documentation 를 참조하십시오.
3단계 - Heroku 응용 프로그램 만들기
우리는 지금 곧 우리의 응용 프로그램을 배치할 것이다.https://heroku.com - 계좌가 없으면 다시 계좌를 만드세요(무료!).
대시보드에서 새로 만들기를 클릭한 다음 새 응용 프로그램 만들기를 선택합니다.대화 상자에서
응용 프로그램은 이미 만들어졌지만, 코드와git 메모리 라이브러리로 돌아가기 전에, 응용 프로그램이 우리가 사용하고 싶은 것을 알려야 합니다 Buildpack.
나중에 응용 프로그램을 배치하기 위해서는 API 키가 필요합니다.
Bitbucket 파이핑 배포 사용
지금 재미있는 부분이 왔는데... 사실 너한테는 많이 배웠으니까 그럴 필요 없어.
1단계 - express Server 설정
Visual Studio 코드로 이동하여 서버라는 새 폴더를 저장소의 루트 디렉터리에 추가합니다.이 폴더에 서버라는 파일을 만듭니다.js 및 터미널에서 다음 명령을 실행하여 express를 설치합니다.
npm install express --save
const path = require('path');
const express = require('express');
const app = express();
const publicPath = path.join(__dirname, '..', 'build');
const port = process.env.PORT || 3000;
app.use(express.static(publicPath));
app.get('*', (req, res) => {
res.sendFile(path.join(publicPath, 'index.html'));
});
app.listen(port, () => {
console.log('Hello World I run on PORT ' + port);
});
너의 소포 안에 있다.json 파일은 프로그램을 시작하는 스크립트 행을 다음과 같이 변경합니다.
"start": "node server/server.js",
2단계 - 모든 내용을git 저장소에 업로드
터미널 창을 열고 React 응용 프로그램의 루트 디렉터리에 있는지 확인하고 다음 줄을 입력하십시오.
git init
git add .
git commit -m "initial commit"
git remote add origin [https://[email protected]/username/name-of-your-repository.git](https://[email protected]/username/name-of-your-repository.git)
git push -u origin master
3단계 - Bitbucket 파이핑 설정 및 구성
우리의 코드가 우리의 저장소에 있는 이상, 우리는 우리의 저장소를 위해 파이프를 설정해야 한다.
우리의 예에서, 우리는 원한다. (사실이 아니라, 작가가 원한다.)다음 규칙과 절차를 사용하여 파이프를 구성하려면
우리는 최종적으로 우리의 저장소를 Heroku로 보내기를 희망한다
저자 주: 네, 저는 git를 사용하여 메모리 라이브러리를 Heroku로 보낼 수 있습니다. 그러나 이것은 제가 이 글을 쓰는 목적이 아닙니다!
파이핑: 모든 파이핑 정의를 포함합니다.
기본값: 다음 중 하나를 충족하지 않은 상태에서 밀어넣을 때마다 실행하는 단계를 포함합니다.
단계: 각 단계마다 저장소의 클론으로 새 Docker 컨테이너를 시작한 다음 **스크립트 **섹션의 컨텐트를 실행합니다.
스크립트: 순서대로 실행되는 명령 목록입니다.
파이프: 파이프는 추가 구성 요소나 함수와 같습니다. 예를 들어 메모리 라이브러리를 Heroku에 업로드하는 것과 같은 입력과 작업이 필요합니다.
우리 마지막 비트박스 파이프.yml 파일은 다음과 같습니다.
image: node:10.15.3
pipelines:
branches:
master:
- step:
name: Test App
caches:
- node
script:
- rm -rf package-lock.json
- rm -rf node_modules
- npm install
- npm run test
- step:
name: Create artifact
script:
- git archive --format=tar.gz master -o application.tar.gz
artifacts:
- application.tar.gz
- step:
name: Deploy to heroku
deployment: production
caches:
- node
script:
- pipe: atlassian/heroku-deploy:1.1.4
variables:
HEROKU_API_KEY: $HEROKU_API_KEY
HEROKU_APP_NAME: $HEROKU_APP_NAME
ZIP_FILE: "application.tar.gz"
WAIT: 'true'
끝내다
네가 그것을 좋아하길 바라고, 더욱 그것이 너를 도울 수 있기를 바란다.알려주세요!:)
Reference
이 문제에 관하여(Bitbucket 파이핑을 사용하여 React 응용 프로그램을 Heroku에 배포), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/janszczepanski_/deploy-a-react-app-to-heroku-with-bitbucket-pipelines-3876텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
